自4天以来,我一直在尝试自动滚动播放视频。我创建了一个应用程序,人们可以按垂直顺序查看视频列表。我想自动播放当前屏幕上的视频并暂停其他视频。
Video Player Image。Videos on scroll
我已经使用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>
您可以使用jquery检查滚动,并在所需的高度触发播放:)并暂停(您可以重新启动或任何您想要的...。)]
let playAfterThisHeight = 200
$(document).scroll(function() {
if ($(document).scrollTop()> playAfterThisHeight) {
$('.playerembed').trigger('play');
} else {
$('.playerembed').trigger('pause');
}
})