播放Youtube视频时暂停Bootstrap轮播 [英] Pause Bootstrap carousel when playing Youtube video
本文介绍了播放Youtube视频时暂停Bootstrap轮播的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我制作了一个带有图像和Youtube视频的轮播. 即使在播放视频时，轮播幻灯片也返回视频时，视频仍在播放.
I have made a carousel which has images and a Youtube video. Even when the video is playing the carousel slides and when returned to the video, the video is still playing.
-
我希望轮播在视频播放时暂停，并在箭头单击或视频结束时继续播放.
I want the carousel to pause when the video is playing and carry on if arrows clicked or if the video ends.
如果正在播放并且用户单击轮播箭头，请停止播放视频.
Stop video, if it was playing and the user clicked on carousel arrows.
HTML:
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-pause="hover">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div id="cal01"></div>
</div>
<div class="item">
<div id="cal02"></div>
</div>
<div class="item">
<iframe src="https://www.youtube.com/embed/pFaJqKqQa2E" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen id="cal3"></iframe>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
我该如何实现?我找不到类似的东西.
How can I achieve this? I wasn't able to find anything similar to this.
推荐答案
您的2个问题是逐字逐句的，与我今天早些时候所遇到的问题相同！
Your 2 questions were exactly word-by-word my same issues earlier today~
要让Youtube iframe视频在播放视频时触发轮播滑动的暂停，您需要有一个指标来确定视频是否被视为正在播放".您可以通过将YouTube iframe API的播放器功能与JavaScript结合使用.
For Youtube iframe videos to trigger a pause on the sliding of the carousel whenever a video is playing, you need to have an indicator on whether a video is considered "playing". You can achieve this by using the player functionalities of the Youtube iframe API with 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#Events
- 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#Events
收听涉及以下状态的事件:
Listen to events that involves these states:
- YT.PlayerState.PLAYING
- YT.PlayerState.BUFFERING
然后控制通过.carousel('pause')滑动的Bootstrap传送带:
And then control the Bootstrap carousel sliding through .carousel('pause') :
要监听此类事件，您可以在JavaScript中添加一个名为"onPlayerStateChange"的功能(如YouTube iframe API中所述):
To be able to listen to such events, you can add to your JavaScript a function called "onPlayerStateChange" (as described within the 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), either it was:
// 1. paused intentionally
// 2. paused as an effect of a slide
// 3. video has ended
// 4. wasn't totally played from the start
// 5. and literally any form where the video timer isn't running ;)
// - then the carousel would now resume sliding.
$('#moviesCarousel').carousel();
}
要在触发幻灯片时停止播放视频(如果用户单击上一个或下一个箭头):
To stop the video if a slide is triggered (if user clicked on either previous or next arrows):
// 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();
});
作为参考，这是完整的HTML(可直接使用，无需修改):
For reference, here is the full working HTML (works directly, no modifications needed) :
<!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), either it was:
// 1. paused intentionally
// 2. paused as an effect of a slide
// 3. video has ended
// 4. wasn't totally played from the start
// 5. and literally any form where the video timer isn't running ;)
// - then the carousel would now resume sliding.
$('#moviesCarousel').carousel();
}
}
// End of snippet from Youtube iframe API
</script>
</body>
</html>
这篇关于播放Youtube视频时暂停Bootstrap轮播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
