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一样播放

1 个答案: