自 4 天以来,我一直在尝试在滚动条上自动播放我的视频。我创建了一个应用程序,人们可以在其中按垂直顺序查看视频列表。我想自动播放当前在屏幕上的视频并暂停其他视频。
我已经使用 Plyr.io 实现了 HTML5 视频播放器。目前,以下代码有助于在播放当前视频时暂停其他视频。但是视频不会在滚动条上自动播放。我在这里分享代码。请帮忙。提前致谢。
<?
$sql_queryvid = "SELECT * FROM videos WHERE visible !='locked' ORDER BY video_no ASC";
$result2vid = mysql_query ($sql_queryvid) or die (mysql_error ());
?>
<?php
while ($row2vid = mysql_fetch_array ($result2vid))
{
?>
<div class="swiper-slide">
<video class="playerembed" poster="<?php echo $row2vid['thumbnail'];?>" id="player" playsinline autoplay loop controls style="object-fit: cover;">
<source src="<?php echo $row2vid['videosrc'];?>" type="video/mp4" />
<source src="/path/to/video.webm" type="video/webm" />
</video>
</div>
<? } ?>
<script src="https://cdn.plyr.io/3.5.6/plyr.js"></script>
<script>
const controls = [
'play-large', // The large play button in the center
'rewind', // Rewind by the seek time (default 10 seconds)
'play', // Play/pause playback
'fast-forward', // Fast forward by the seek time (default 10 seconds)
'progress', // The progress bar and scrubber for playback and buffering
'current-time', // The current time of playback
'duration', // The full duration of the media
'captions', // Toggle captions
'settings', // Settings menu
'pip' // Picture-in-picture (currently Safari only)
];
const players = Array.from(document.querySelectorAll('.playerembed')).map(player => new Plyr(player, { controls }));
players.forEach(function(instance,index) {
instance.on('play',function(){
players.forEach(function(instance1,index1){
if(instance != instance1){
instance1.pause();
}
});
});
});
</script>