在javascript和html5

时间:2017-10-04 03:53:59

标签: javascript jquery html5-video

请帮帮我。我的代码出了什么问题。我有2个视频,我想要的是。当我滚动到第二个视频容器时,第一个视频将转到快退。我使用了playbackRate,但对我来说没有人可以帮助我。提前谢谢。

Here's屏幕截图。

var videos = document.getElementsByTagName("video");

fraction = 0.7;
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(10, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
        visibleY = Math.max(10, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));

        visible = visibleX * visibleY / (w * h);

        if (visible > fraction) {
            video.play();
        } else {
             video.playbackRate = 1.0;
        }

}

}

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

0 个答案:

没有答案