如何在div中使用BigVideo.js？

Question

我正在尝试将BigVideo.js包含到单个div（例如英雄单位）中，但它继续接管正文背景。我正在使用BigVideo.js主页上的示例代码：

 <script type="text/javascript">
     var BV;
     $(function() {
     // initialize BigVideo
     BV = new $.BigVideo();
     BV.init();
     BV.show('http://video-js.zencoder.com/oceans-clip.mp4',{ambient:true});
});
 </script>

我尝试过这样的事情：

  <script type="text/javascript">
   var BV;
   $(function() {
     // initialize BigVideo
     BV = new $.BigVideo({
    container: $('video-wrap')
     });
     BV.init();
     BV.show('http://video-js.zencoder.com/oceans-clip.mp4',{ambient:true});
 });
  </script>

Answer 1

您需要正确指定BigVideo对象的容器（我不确定它是否是拼写错误，但一切似乎都没问题）

<强> ID

BV = new $.BigVideo({container: $('#video-wrap')});

<强>类

BV = new $.BigVideo({container: $('.video-wrap')});

在创建对象时，它设置为默认主体（BigVideo代码）：

var defaults = {
            // If you want to use a single mp4 source, set as true
            useFlashForFirefox:true,
            // If you are doing a playlist, the video won't play the first time
            // on a touchscreen unless the play event is attached to a user click
            forceAutoplay:false,
            controls:false,
            doLoop:false,
            container:$('body'), //Container
            shrinkable:false
        };

然后使用$.extend()

合并您发送的选项

var settings = $.extend({}, defaults, options);

Answer 2

上面的答案只是部分回答了这个问题。您应该更改或覆盖CSS的＃big-video-wrap＆＃39;在bigvideo.css中。将已修复更改为绝对，视频将仅显示在其容器中。

发件人

#big-video-wrap {
  overflow: hidden;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

要

#big-video-wrap {
  overflow: hidden;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}