引导转盘自动播放，当幻灯片激活时启动视频

bootstrap carousel autoplay,start videos when slide activates

本文关键字：激活 幻灯片 启动 视频 自动播放      更新时间：2023-09-26

我正在尝试将引导转盘与视频一起使用。我有一个5秒的视频列表。我需要使用这个旋转木马自动播放它们。

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

示例：

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

代码：

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

我检查了您创建的小提琴，您似乎将视频嵌入了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选项。您可能应该先阅读相关文档，然后再开始学习。希望这能帮到你。

试试这个：

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

注意：我认为您正在使用Iframe播放视频，因此使用此功能播放视频时，只需重新加载Iframe src即可。

我已经创建了工作的jsFiddle，但是在访问iframe中的'video'元素时抛出跨源请求安全异常。

要克服这个问题，请使用以下命令启动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();
});

尝试一下：

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