twitter-bootstrap bootstrap carousel 自动播放，在幻灯片激活时启动视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26353842/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap carousel autoplay,start videos when slide activates
提问by anam
I am trying to use Bootstrap carousel with videos. I have a list of videos of 5 sec. I need to auto-play them using this carousel.
我正在尝试将 Bootstrap carousel 与视频一起使用。我有一个 5 秒的视频列表。我需要使用此轮播自动播放它们。
Currently , Bootstrap plays the very first video but I also wish to automatically play all the others when they slide into the screen.
目前，Bootstrap 播放第一个视频，但我也希望在它们滑入屏幕时自动播放所有其他视频。
Example:
例子：
Code :
代码 ：
var $myCarousel = $("#myCarousel");
$myCarousel.carousel({
interval: 2000
});
回答by Vivek Pradhan
I checked the fiddleyou have created and you seem to embed the video in an iframe. Assuming you have the complete url of the video file resource available with you, you might want to try encapsulating them in a videotag supported by HTML5. It has an autoplayoption associated with it and is supported in all major browsers today (upto IE8).
我检查了您创建的小提琴，您似乎将视频嵌入到iframe. 假设您有可用的视频文件资源的完整 url，您可能想尝试将它们封装在videoHTML5 支持的标签中。它有一个autoplay与之相关的选项，并且在当今所有主要浏览器（直到 IE8）中都受支持。
From W3Schools, you could try something like this in context of your code:
从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>
Ofcourse, using the videotag limits browser compatibility to some extent which is the whole purpose of using an iframein the first place. That's something you can decide. Also, if you are embedding videos from Youtube or Vimeo in an iframe, they almost certainly have an autoplayoption in their videos. You should probably read up the relevant docs to get started on that. Hope this helps you out.
当然，使用video标签在一定程度上限制了浏览器的兼容性，这也是使用 aniframe的初衷。这是你可以决定的。此外，如果您是从嵌入YouTube或Vimeo的视频在iframe，他们几乎可以肯定有一个autoplay在他们的视频选项。您可能应该阅读相关文档以开始使用。希望这可以帮助你。
回答by Manwal
Try this:
试试这个：
$myCarousel.on('slid', function() {
console.log("Slide occur");
//play video
});?
Note:I think you are using Iframe to play video, so for playing video using this function, you can simply reload Iframe src.
注意：我认为您使用的是 Iframe 播放视频，因此要使用此功能播放视频，您只需重新加载 Iframe src。
回答by Gaurang Patel
I have created the working jsFiddle, however while accessing 'video' element within iframe throws cross-origin-requestsecurity exception.
我已经创建了有效的 jsFiddle，但是在访问 iframe 中的“video”元素时会引发跨域请求安全异常。
To overcome this start Chrome with following command,
要克服这个问题，请使用以下命令启动 Chrome，
chrome.exe --allow-file-access-from-files --disable-web-security
Open http://jsfiddle.net/wxMrf/21/and see it working
打开http://jsfiddle.net/wxMrf/21/并查看它的工作
Basically the solution is on the same line what 'Manwal' suggested,
基本上解决方案与'Manwal'建议的相同，
$('#myCarousel').bind('slid', function (e) {
$('.item.active').find('iframe').contents().find('body').find('video')[0].play();
});
回答by jkgh
Give this a shot:
试一试：
$('#myCarousel').bind('slid', function (e) {
$('.item.active').find('iframe').contents().find('body').find('video')[0].play();
});
