我正在尝试在灯箱中打开的同一页面上实现多个视频。我目前正在使用 Plyr.js,因为它可以对 html5、vimeo 和 youtube 视频进行皮肤处理,使其看起来都一样。我也在使用 Fancybox 作为灯箱。
当我添加一个视频时,一切似乎都奏效了。但是,多个视频似乎没有在灯箱中初始化。我还注意到,如果我有一个 youtube 视频并将其排在列表的首位,它可以工作,但如果它跟随另一个视频,它将不会初始化。
我使用的是类.player
而不是 id,因为我有多个实例。
我知道这是一个灯箱问题,因为如果我删除灯箱,所有视频都可以正常工作。所以可能我需要以某种方式调整灯箱如何初始化 Plyr.js
这是我的代码:
示例 HTML
<div class="container">
<p><a href="#video1" data-fancybox>HTML5 Video</a></p>
<div id="video1" class="lightbox">
<video controls crossorigin playsinline class="player">
<!-- Video files -->
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4">
</video>
</div>
<p><a href="#video2" data-fancybox>Youtube Video</a></p>
<div id="video2" class="lightbox">
<div class="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY"></div>
</div>
<p><a href="#video3" data-fancybox>HTML5 Video</a></p>
<div id="video3" class="lightbox">
<video controls crossorigin playsinline class="player">
<!-- Video files -->
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4">
</video>
</div>
</div>
示例 JS:
$("[data-fancybox]").fancybox({
beforeShow: function() {
const player = new Plyr('.player', {});
}
});
示例 CSS
.container {
width: 600px;
margin: 0 auto;
}
.lightbox {
display: none;
width: 600px;
}
.fancybox-content {
padding: 0;
}