【问题标题】: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 的问题。另外,请正确格式化您的代码:)
      猜你喜欢
      • 1970-01-01
      • 2021-02-19
      • 2015-08-02
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-07-17
      • 1970-01-01
      • 2014-10-05
      相关资源
      最近更新 更多