如何使用javascript在滚动上自动播放视频？答案

【问题标题】：How to automatically play videos on scroll using javascript?如何使用javascript在滚动上自动播放视频？
【发布时间】：2019-11-28 13:19:23
【问题描述】：

自从 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>

【问题讨论】：

标签： javascript jquery html5-video media-player plyr.js

【解决方案1】：

您可以使用 jquery 检查滚动，并在您想要的高度触发播放 :) 并在不播放时暂停（您可以重新启动或任何您想要的......）

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

        } else {
          $('.playerembed').trigger('pause');
        }
    })

【讨论】：