如何流星 + jQuery + BigVideo.js

Question

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

为简单起见，我正在修改示例 simple-todo 应用程序。虽然我已经删除了 ifClient 和 ifServer 条件语句并将代码分开并将其放在适当的 ./client、./server 和 ./both 目录中。该应用程序在我的模组之后运行。现在，我正在尝试让 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" }
      ]);
    }
});

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

我错过了什么？

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>

如何流星 + jQuery + BigVideo.js

HowTo Meteor + jQuery + BigVideo.js

jquery

meteor