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');
}
})
关于javascript - 如何使用javascript自动滚动播放视频？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59089817/