引导轮播自动播放，幻灯片激活时开始视频答案

【问题标题】：bootstrap carousel autoplay,start videos when slide activates引导轮播自动播放，幻灯片激活时开始视频
【发布时间】：2017-02-02 17:26:55
【问题描述】：

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

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

例子：

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

代码：

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

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案1】：

我检查了您创建的fiddle，您似乎将视频嵌入到iframe 中。假设您拥有可用的视频文件资源的完整 url，您可能想尝试将它们封装在 HTML5 支持的 video 标记中。它有一个与之关联的autoplay 选项，并且在当今的所有主流浏览器中都受支持（直到 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 的初衷。这是你可以决定的。此外，如果您将来自 Youtube 或 Vimeo 的视频嵌入到 iframe 中，他们几乎可以肯定他们的视频中有 autoplay 选项。您可能应该阅读相关文档以开始使用。希望对您有所帮助。

【讨论】：

我需要播放我的域的视频。
好的，那么最好像建议的那样使用video 标签，并使用适当的src 属性来链接您的视频文件。尝试在您的轮播中调整我提供的代码 sn-p 并使用 autoplay 选项。

【解决方案2】：

试试这个：

$myCarousel.on('slid', function() {
    console.log("Slide occur");
    //play video
});

注意：我认为你是在使用iframe播放视频，所以要使用这个功能播放视频，你只需重新加载iframe src即可。

【讨论】：

【解决方案3】：

我已经创建了正常工作的 jsFiddle，但是在 iframe 中访问“视频”元素时会引发 cross-origin-request 安全异常。

要克服这个问题，请使用以下命令启动 Chrome，

chrome.exe --allow-file-access-from-files --disable-web-security

打开 http://jsfiddle.net/wxMrf/21/ 并查看它的工作原理

基本上，解决方案与“Manwal”建议的相同，

$('#myCarousel').bind('slid', function (e) {
  $('.item.active').find('iframe').contents().find('body').find('video')[0].play();
});

【讨论】：

这只是第一个视频吗？我需要 tp 在活动状态下播放它们
不只是首先，它会在包含它的幻灯片变为活动状态时播放视频。但为此，您需要启动 Chrome。

【解决方案4】：

试一试：

$('#myCarousel').bind('slid', function (e) {
  $('.item.active').find('iframe').contents().find('body').find('video')[0].play();
});

【讨论】：

感谢您的回答，但请说明您的回答为何解决了 OP 的问题。另外，请正确格式化您的代码:)