javascript - bootstrap 轮播自动播放，幻灯片激活时开始播放视频

Question

我正在尝试将 Bootstrap 轮播与视频一起使用。我有一个 5 秒的视频列表。我需要使用此轮播自动播放它们。

目前，Bootstrap 播放第一个视频，但我也希望在其他所有视频滑入屏幕时自动播放。

例子:

http://jsfiddle.net/wxMrf/20/

代码:

 var $myCarousel = $("#myCarousel");
   $myCarousel.carousel({
      interval: 2000
    });

Answer 1

我检查了 fiddle您已经创建并且似乎将视频嵌入到 iframe 中。假设您有可用的视频文件资源的完整 url，您可能想尝试将它们封装在 HTML5 支持的 video 标签中。它有一个与之关联的自动播放选项，并且在当今所有主流浏览器(最高为 IE8)中均受支持。

来自 W3Schools , 你可以在你的代码上下文中尝试这样的事情:

  <div class="item">
    <div class="container">
     <div class="flex-video widescreen" style="margin: 0 auto;text-align:center;">4
       <video controls autoplay>
         <source src="foobar.mp4" type="video/mp4">
         Your browser does not support the video tag.
      </video>
     </div>
    </div>
  </div>   

当然，使用 video 标签在一定程度上限制了浏览器的兼容性，这正是使用 iframe 的首要目的。这是你可以决定的事情。此外，如果您在 iframe 中嵌入来自 Youtube 或 Vimeo 的视频，他们几乎可以肯定在他们的视频中有一个 autoplay 选项。您可能应该阅读相关文档以开始使用。希望这对您有所帮助。