javascript - 如何使用javascript自动滚动播放视频？(How to automatically play videos on scroll using javascript?)

Question

Since 4 Days I am trying to autoplay my videos on the scroll.(自4天以来，我一直在尝试自动滚动播放视频。)

I have created an application where people can see a list of videos in vertical order.(我创建了一个应用程序，人们可以按垂直顺序查看视频列表。) I want to automatically play the video that is currently on the screen and pause other videos.(我想自动播放屏幕上当前的视频并暂停其他视频。) Video Player Image .(Video Player图片 。) Videos on scroll(滚动影片) I have implemented the HTML5 Video player using Plyr.io.(我已经使用Plyr.io实现了HTML5视频播放器。) Currently, the below code helps to pause other videos while playing current video.(目前，以下代码有助于在播放当前视频时暂停其他视频。) But video not playing automatically on the scroll.(但是视频不能在滚动条上自动播放。) I am sharing the code here.(我在这里分享代码。) Please do help.(请帮忙。) Thanks in advance.(提前致谢。) <? $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>   ask by NJR translate from so

Answer 1

You can check the scrolling with jquery, and trigger play in the hight you want it :) and pause (you can restart or anything you want ....) when not(您可以使用jquery检查滚动，并在所需的最高位置触发播放：）并暂停（您可以重新启动或任何您想要的....）。)

let playAfterThisHeight = 200 $(document).scroll(function() { if ($(document).scrollTop()> playAfterThisHeight) { $('.playerembed').trigger('play'); } else { $('.playerembed').trigger('pause'); } })