播放视频时暂停引导旋转木马
Pausing Bootstrap carousel When a Video playing
我有多张带有视频和图像的幻灯片。旋转木马被设置为自动播放时加载。但是，当有人播放视频并将鼠标移出侧边时，它会继续滑动(如预期的那样)。
如何跟踪视频何时播放和暂停?我在堆栈溢出周围搜索，但没有发现类似的问题。
网站管理员将添加视频以后，所以他们可以是iframe或html5视频。所以，我需要一个解决方案，这两个工作
这对我来说很有效，当本地HTML5视频播放时暂停Bootstrap旋转木马，并在视频暂停或播放完成时再次播放它。我是一个完全的JS新手，但我四处搜索，串了一些东西在一起。我可能犯了一个错误，但这对我有用。
我不是通过id呼叫视频，因为我想在旋转木马播放的任何视频上工作的行动。我的箱子里有一些。
注意更改旋转木马的ID以匹配您的ID。
<script>
$('video').on('play', function (e) {
$("#portfolioCarousel").carousel('pause');
});
$('video').on('stop pause ended', function (e) {
$("#portfolioCarousel").carousel();
});
</script>
$ (" # myCarousel ") .carousel("暂停");阻止它$ (" # myCarousel ") .carousel ();重新开始http://www.w3.org/2010/05/video/mediaevents.html有许多事件，你应该重新开始，甚至暂停，结束的事件被触发和暂停播放。
YouTube我不确定你如何集成它，但他们确实有js API所以https://developers.google.com/youtube/js_api_reference#Events它会向你展示你可以监听的事件和你在html5 video
对于Youtube iframe视频，在视频播放时触发旋转木马滑动暂停，您需要有一个指示符，显示视频是否被认为是"正在播放"。你可以通过使用Youtube iframe API的JavaScript播放器功能来实现这一点。
- https://developers.google.com/youtube/iframe_api_reference
- https://developers.google.com/youtube/iframe_api_reference Playback_status <
- https://developers.google.com/youtube/iframe_api_reference事件/gh>
听包含这些状态的事件:
- YT.PlayerState.PLAYING
- YT.PlayerState.BUFFERING
然后控制Bootstrap旋转木马滑动通过.carousel('pause'):
- <
- https://getbootstrap.com/docs/4.4/components/carousel/方法/gh>
为了能够监听这样的事件，你可以在你的JavaScript中添加一个名为"onPlayerStateChange"的函数(在Youtube iframe API中描述):
function onPlayerStateChange(event) // triggered everytime ANY iframe video player among the "players" list is played, paused, ended, etc.
{
// Check if any iframe video is being played (or is currently buffering to be played)
// Reference: https://developers.google.com/youtube/iframe_api_reference#Events
if (event.data == YT.PlayerState.PLAYING || event.data == YT.PlayerState.BUFFERING)
{
// If any player has been detected to be currently playing or buffering, pause the carousel from sliding
// .carousel('pause') - Stops the carousel from cycling through items.
// Reference: https://getbootstrap.com/docs/4.4/components/carousel/#methods
$('#moviesCarousel').carousel('pause');
}
else
{
// If there are no currently playing nor buffering videos, resume the sliding of the carousel
// This means that once the current video is in a state that is not playing (aside from buffering so either it was paused, or has ended, or wasn't totally played), then the carousel would now resume sliding
$('#moviesCarousel').carousel();
}
}
作为参考，这里是完整的工作HTML(直接工作，不需要修改):
<!doctype html>
<html lang="en">
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<!-- Buttons for manually sliding the carousel -->
<div class="btn-group col-lg-8" role="group" aria-label="Carousel controls">
<button id="prevMovie" type="button" class="btn btn-danger">Prev</button>
<button id="nextMovie" type="button" class="btn btn-info">Next</button>
</div>
<!-- The carousel containing the Youtube iframe videos -->
<!-- Remember to add the ?enablejsapi=1 in the Youtube embed link as described in: -->
<!-- https://developers.google.com/youtube/iframe_api_reference#Example_Video_Player_Constructors -->
<div id="moviesCarousel" class="carousel slide col-lg-8" data-ride="carousel" data-interval="2000">
<div class="carousel-inner embed-responsive embed-responsive-16by9"> <!-- embed is used for responsive size regardless of device -->
<div class="carousel-item embed-responsive-item active">
<iframe id="katniss" src="https://www.youtube.com/embed/v98Rh9qzmPs?enablejsapi=1" allowfullscreen></iframe>
</div>
<div class="carousel-item embed-responsive-item">
<iframe id="rancho" src="https://www.youtube.com/embed/-MlkASchodc?enablejsapi=1" allowfullscreen></iframe>
</div>
<div class="carousel-item embed-responsive-item">
<iframe id="logan" src="https://www.youtube.com/embed/UgJr0bNmTL8?enablejsapi=1" allowfullscreen></iframe>
</div>
</div>
</div>
<!-- jQuery first, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script>
$(document).ready(function()
{
// Slide the carousel upon button click
// .carousel('prev') - Cycles to the previous item
// .carousel('next') - Cycles to the next item.
// Reference: https://getbootstrap.com/docs/4.4/components/carousel/#methods
$('#prevMovie').on('click', function() {
$('#moviesCarousel').carousel('prev');
});
$('#nextMovie').on('click', function() {
$('#moviesCarousel').carousel('next');
});
// When a slide occurs, pause the current iframe video that is playing
// player.pauseVideo():Void - Pauses the currently playing video.
// Reference: https://developers.google.com/youtube/iframe_api_reference#Playback_controls
$('#moviesCarousel').on('slide.bs.carousel', function(event) {
// The variable "players" contain each Youtube Player for each iframe video
// Reference: https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player
// event.from - The index of the current video (before the slide occurs)
// - It is also the index of the corresponding player for the current video
// Reference: https://getbootstrap.com/docs/4.4/components/carousel/#events
players[event.from].pauseVideo();
});
});
// Start of snippet from: https://developers.google.com/youtube/iframe_api_reference
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var players = []; // would contain 1 player for each iframe video
function onYouTubeIframeAPIReady()
{
var allMovieIframes = document.getElementById("moviesCarousel").getElementsByTagName('iframe');
for (currentIFrame of allMovieIframes)
{
players.push(new YT.Player(
currentIFrame.id, // the target iframe video, here it is either katniss, rancho, or logan
{ events: { 'onStateChange': onPlayerStateChange } }
));
}
}
function onPlayerStateChange(event) // triggered everytime ANY iframe video player among the "players" list is played, paused, ended, etc.
{
// Check if any iframe video is being played (or is currently buffering to be played)
// Reference: https://developers.google.com/youtube/iframe_api_reference#Events
if (event.data == YT.PlayerState.PLAYING || event.data == YT.PlayerState.BUFFERING)
{
// If any player has been detected to be currently playing or buffering, pause the carousel from sliding
// .carousel('pause') - Stops the carousel from cycling through items.
// Reference: https://getbootstrap.com/docs/4.4/components/carousel/#methods
$('#moviesCarousel').carousel('pause');
}
else
{
// If there are no currently playing nor buffering videos, resume the sliding of the carousel
// This means that once the current video is in a state that is not playing (aside from buffering so either it was paused, or has ended, or wasn't totally played), then the carousel would now resume sliding
$('#moviesCarousel').carousel();
}
}
// End of snippet from Youtube iframe API
</script>
</body>
</html>
相关文章：
- 知道为什么我的旋转木马不会自动更改图片吗
- 禁用旋转木马中的下一个按钮和上一个按钮
- 旋转木马;启用内容安全策略时无法工作
- 在引导程序旋转木马中显示下一个图像
- 猫头鹰旋转木马2罐头't使渐变动画工作
- 猫头鹰旋转木马宽度计算错误
- 猫头鹰旋转木马动画未在Chrome中应用
- 猫头鹰旋转木马:无法读取属性'visibleItems'的未定义
- 在Javascript中设置多个小图像(如旋转木马）
- 如何使引导旋转木马保持图像纵横比
- 使用旋转木马在元素上切换类
- 暂停旋转木马悬停在单独的元素(猫头鹰Beta 2)
- 播放视频时暂停引导旋转木马
- SlickJS视频旋转木马暂停YouTube视频，并永久隐藏占位符图像
- 如何暂停和恢复旋转木马滑块
- 启动旋转木马暂停
- 在旋转木马上添加悬停暂停
- 我如何控制暂停/播放视频在旋转木马
- 暂停旋转木马在模态启动(引导)
- 暂停悬停在简单的jquery旋转木马
