Question

我是流星和JS新手的新手。但是，我正在大胆地进行。也许有点过于大胆，因为我正在尝试使用尚未打包为Meteor的第三方库。

为了简单起见，我正在修改示例simple-todo应用程序。虽然我已经删除了ifClient和ifServer条件并将代码分解并将其放在适当的./client，。/ server和./both目录中。该应用程序在我的mod之后工作。现在，我正在尝试让BigVideo模块渲染视频背景。

我添加了jquery和

wmodes$ cd myproject
wmodes$ meteor add jquery
jquery: Manipulate the DOM using CSS selectors

我已将BigVideo.js库解压缩到myproject / client / lib中：

wmodes$ ls client/lib/BigVideo.js-master/
BigVideo.jquery.json bower.json           lib
README.md            css
wmodes$ ls client/lib/BigVideo.js-master/lib/
bigvideo.js

我在myproject / client / simple-todos.js的底部添加了建议的BigVideo代码

$(function() {
    var BV = new $.BigVideo({useFlashForFirefox:false});
    BV.init();
    if (Modernizr.touch) {
      BV.show('public/images/oceans.mp4');
    } else {
      BV.show([
        { type: "video/mp4",  src: "public/video/oceans.mp4" }
        // { type: "video/webm", src: "vids/river.webm" },
        // { type: "video/ogg",  src: "vids/river.ogv" }
      ]);
    }
});

我启动流星没有错误，但也没有视频背景。

我错过了什么？

Answer 1

我让这个工作，主要是通过摆弄。

首先，我将BigVideo.js源解压缩到client / lib。

$ ls client/lib/bigvideo/
BigVideo.jquery.json bower.json           lib
README.md            css

模板真的没什么特别，只是BigVideo插入自己的div的占位符。

<div id="section2" class="section section3x">
    <div id="trigger2"></div>
    <div id="content2" class="content full">
        <h2>Scene 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus placerat egestas sem, eu ultricies dolor imperdiet eu. Nulla scelerisque vitae nisl at tempus. Sed mollis libero sit amet metus scelerisque consectetur. Sed eget maximus nisl. Curabitur rhoncus porttitor porttitor. Morbi nec fringilla felis. Maecenas condimentum a lectus nec vulputate.
        </p>
    </div>
</div>

我设置了所有默认值和选项，并调用了BigVideo。

// Fullscreen background video
var BV = new $.BigVideo();
$(function() {
    isTouch = Modernizr.touch;
    var bigvideoDefaults = {
        useFlashForFirefox:false,
        forceAutoplay:false,
        controls:false,
        doLoop:true,
        shrinkable:false,
    }
    var bigvideoSettings = $.extend({}, bigvideoDefaults, {
        container:$('#content2')
    });
    BV = new $.BigVideo(bigvideoSettings);

    BV.init();
    BV.show([
        { type: "video/mp4",  
            src: "/video/p00-sunny-window-loop.mp4"},
        { type: "video/webm", 
            src: "/video/p00-sunny-window-loop.webm"},
        { type: "video/ogg",  
            src: "/video/p00-sunny-window-loop.ogv"}
    ]);
    BV.getPlayer().pause();
});

这可能不是最有效的方法，但它有效。我可能会把它简化为几行，但为了我的理解，它很冗长。欢迎提出建议。

我特别怀疑我定义BigVideo对象的方式，然后稍后修改它。我想要访问var，因为稍微进一步，我使用scrollmagic来触发和关闭视频：

// Trigger background video start and end
var scene = new ScrollScene({
    offset: -winUnit/2,
    triggerElement: "#content2",
    duration: winUnit*(fullDelay*2),
    //pushFollowers: false,
})
    .on("start end", function (e) {
        BV.getPlayer().play()
    })
    .on("enter leave", function (e) {
        BV.getPlayer().pause()
    })
    .addTo(controller)
    .addIndicators({suffix: '2b'});

Answer 2

如果您不必将BigVideo作为背景视频的来源，并且任何视频都可以，那么此解决方案可能适合您：

/* Put this in your CSS file */

/* This code comes from http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video */

video#bgvideo { 
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  z-index: -100;
  background: url(stillImage.jpg) no-repeat;
  background-size: cover; 
}

video { 
  display: block; 
}

@media screen and (max-device-width: 768px) {
  html {
    background: url(stillImage.jpg) #000 no-repeat center center fixed;
  }
  #bgvideo {
    display: none;
  }
}

<!-- Insert this code between your <body></body> tags -->

<!-- Also from http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video -->

<video autoplay poster="stillImage.jpg" loop id="bgvideo">
  <source src="video.mp4" type="video/mp4">
</video>

如何Meteor + jQuery + BigVideo.js

2 个答案: