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

Question

我在网络中找到了 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
}
?>

Answer 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>

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

visible videos only have to play like Facebook on website

html

javascript

jquery

html5-video