滚动时如何暂停视频

时间:2014-06-11 20:16:38

标签: javascript html5 video html5-video

您好我在我的网站的另一部分滚动时尝试在我的网站上制作视频。

我正在使用HTML5视频

 <video id="video_background" preload="auto" volume="5" autoplay="1"><!--or turn on loop="loop"-->
        <source src="videos/trailer.webm" type="video/webm">
        <source src="videos/trailer.mp4" type="video/mp4">
        <source src="videos/trailer.ogv" type="video/ogg ogv">
 </video>

我尝试在stackoverflow上使用其他人的以下代码 但这对我的网站没有任何作用

var videos = document.getElementsByTagName("video_background"), fraction = 0.8;

function checkScroll() {

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

    var video = videos[i];

    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);

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

}

}

window.addEventListener('scroll', checkScroll, false);
window.addEventListener('resize', checkScroll, false);

0 个答案:

没有答案