我正在开发一个项目,该项目使用 Fancybox 来显示单个 HTML5 视频以及 HTML5 视频库。
对于单个视频,我希望在 Fancybox 中打开视频后立即自动播放,然后在视频播放完毕后关闭 Fancybox。
对于画廊中的视频,我想在 Fancybox 中打开视频时自动播放视频,在视频播放完毕后前进到下一个画廊项目,并暂停当前视频/自动播放下一个/上一个视频,如果用户浏览图库。
我在这里包含了一个代码笔:http://codepen.io/ericjacksonwood/pen/kXKkaq/其中包括我对 Fancybox 的“afterLoad”功能的一些尝试:
// Attempt 01
$(".fancybox-video").find('video').play();
// Attempt 02
$(".fancybox-video").find('video').attr('autoplay','autoplay');
// Attempt 03
var vid = document.getElementsByClassName("fancybox-video");
function playVid() {
vid.play();
}
任何帮助将不胜感激!谢谢。
-------- 编辑--------
codepen 已更新并且工作正常。
最佳答案
可以使用html5的媒体methods和 events为此。
我使用了 play
幻灯片放映动画完成后开始播放视频的方法,以及在视频结束后调用 fancybox.next()
函数的 ended
回调。
这是您可以检查的工作版本:
$(document).ready(function() {
$(".fancybox").fancybox({
afterShow: function() {
// After the show-slide-animation has ended - play the vide in the current slide
this.content.find('video').trigger('play')
// Attach the ended callback to trigger the fancybox.next() once the video has ended.
this.content.find('video').on('ended', function() {
$.fancybox.next();
});
}
});
});
.fancybox-video {
display: none;
}
.fancybox-nav {
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
height: 40%;
}
/**** DEMO STUFF ****/
html, body {
padding: 1em;
}
hr {
border: none;
height: 1px;
background: #eee;
display: block;
clear: left;
margin: 4em 0 2em 0;
}
.video-links {
list-style: none;
padding: 0;
}
.video-links li {
float: left;
margin-right: 10px;
}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<h4>01. Single Video</h4>
<ul>
<li>Autoplay HTML5 video when Fancybox opens</li>
<li>Close Fancybox after video is finished playing</li>
</ul>
<ul class="video-links">
<li><a class="fancybox" href="#single-video">Video 01</a></li>
</ul>
<div id="single-video" class="fancybox-video">
<video controls width="100%" height="auto">
<source src="https://cache.wdcdn.net/asset/assetId/2508128/size/primary/ts/1471978675/type/library/client/WD-8KVJQ/Oikos_TheSpill.mp4?token=fc1b0717c&category=pres&action=view" type="video/mp4">
</video>
</div>
<hr/>
<h4>02. Video Gallery</h4>
<ul>
<li>Autoplay HTML5 video when Fancybox opens</li>
<li>Advance Fancybox to next video in gallery when video is finished playing</li>
<li>Pause video if user navigates to next video in gallery (which fancybox seems to do already)</li>
<li>Autplay next video if user navigates through the gallery</li>
<li>Close Fancybox after last video is finished playing</li>
</ul>
<ul class="video-links">
<li><a class="fancybox" rel="video-gallery" href="#video01">Video 01</a></li>
<li><a class="fancybox" rel="video-gallery" href="#video02">Video 02</a></li>
<li><a class="fancybox" rel="video-gallery" href="#video03">Video 03</a></li>
</ul>
<div id="video01" class="fancybox-video">
<video controls width="100%" height="auto">
<source src="https://cache.wdcdn.net/asset/assetId/2508128/size/primary/ts/1471978675/type/library/client/WD-8KVJQ/Oikos_TheSpill.mp4?token=fc1b0717c&category=pres&action=view" type="video/mp4">
</video>
</div>
<div id="video02" class="fancybox-video">
<video controls width="100%" height="auto">
<source src="https://cache.wdcdn.net/asset/assetId/2506071/size/primary/ts/1369681137/type/library/client/WD-8KVJQ/TaxAct_FreetoPee.mp4?token=fc1b0717c&category=pres&action=view" type="video/mp4">
</video>
</div>
<div id="video03" class="fancybox-video">
<video controls width="100%" height="auto">
<source src="https://cache.wdcdn.net/asset/assetId/2507394/size/primary/ts/1471978845/type/library/client/WD-8KVJQ/WalMart_Legs_15.mp4?token=fc1b0717c&category=pres&action=view" type="video/mp4">
</video>
</div>
关于jquery - 在 Fancybox 中自动播放 HTML5 视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39131456/