可见视频只需要像 Facebook 一样在网站上播放答案

【问题标题】：visible videos only have to play like Facebook on website可见视频只需要像 Facebook 一样在网站上播放
【发布时间】：2018-12-05 06:47:07
【问题描述】：

我在网络中找到了用于播放视频的 JavaScript 代码，当它可见时，其他视频应该暂停，但是当我转到页面所有视频时，这段代码会暂停，但我在滚动它正在播放所有视频时，我会提交代码下来，我从数据库中获取视频，并通过 while 循环获取所有视频。任何人都可以帮助我解决此问题并告诉我更好的解决方案。

<script>
    var videos = document.getElementsByClassName('embed-responsive-item');

            function checkScroll() {

                for(var i = 0; i < videos.length; i++) {

                    var video = videos[i];
                    //alert(video);
                    var x = video.offsetLeft, y = video.offsetTop, w = video.offsetWidth, h = video.offsetHeight, r = x + w, //right
                        b = y + h, //bottom
                        visibleX, visibleY, visible;

                    visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
                    visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));

                    visible = visibleX * visibleY / (w * h);
                    fraction = 1;
                    //alert(visible);

                    if (visible > fraction) {
                        //alert(visible);
                        video.pause();
                    } else {
                        video.play();
                    }

                }

            }

            window.addEventListener('scroll', checkScroll, false);
            window.addEventListener('resize', checkScroll, false);
</script>

<?php
while($getSharePer01=mysqli_fetch_assoc($getPostStatus01)){
 extract($getSharePer01);
?>

<video id="sampleMovie" class="embed-responsive-item" height="500" preload controls>
<source src="<?php echo $u_pvid; ?>" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashvars" value='config={"clip":{"url":"HTML5Sample_flv.flv","autoPlay":false,"autoBuffering":true}}' />
</object>
</video>

<?php
}
?>

【问题讨论】：

标签： javascript jquery html html5-video

【解决方案1】：

这是这个问题的解决方案

<script>
         $(document).ready(function() {
             // Get media - with autoplay disabled (audio or video)
             var media = $('video').not("[autoplay='autoplay']");
             var tolerancePixel = 20;

             function checkMedia(){
                 // Get current browser top and bottom
                 var scrollTop = $(window).scrollTop() + tolerancePixel;
                 var scrollBottom = $(window).scrollTop() + $(window).height() - tolerancePixel;

                 media.each(function(index, el) {
                     var yTopMedia = $(this).offset().top;
                     var yBottomMedia = $(this).height() + yTopMedia;

                     if(scrollTop < yBottomMedia && scrollBottom > yTopMedia){ //view explaination in `In brief` section above
                         $(this).get(0).play();
                     } else {
                         $(this).get(0).pause();
                     }
                 });

                 //}
             }
             $(document).on('scroll', checkMedia);
         });
        </script>

【讨论】：