Question

所以我试图激活视频，当他们滚动到视口并只是调用他们不同的ID，但它不起作用，不可否认我是非常新的（js / jquery）并且不是100％关于最新进展所以任何帮助会很好。

为了清楚我试图让每个视频在滚动到视图时单独播放，我有第一个视频工作但滚动时没有其他后续视频播放。

我创建了这个来帮助我看到我想要完成的事情http://jsfiddle.net/8TpN5/

更新：好的，这就是我希望它工作的方式http://jsfiddle.net/8TpN5/1/，但我怎么能让它工作而不重复代码？

var videoId = document.getElementById("video","videoTwo");
var playVideo = videoId,
fraction = 0.9;

function checkScroll() {
var x = playVideo.offsetLeft,
    y = playVideo.offsetTop,
    w = playVideo.offsetWidth,
    h = playVideo.offsetHeight,
    r = x + w, //right
    b = y + h, //bottom
    visibleX,
    visibleY,
    visible;

if (window.pageXOffset >= r || window.pageYOffset >= b || window.pageXOffset + window.innerWidth < x || window.pageYOffset + window.innerHeight < y) {
    return;
}

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) {
    playVideo.play();
} else {
    playVideo.pause();
}
}

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

Answer 1

这一行：

var videoId = document.getElementById("video","videoTwo");

应该是：

var videoOne = document.getElementById("video"), 
    videoTwo = document.getElementById("videoTwo");

getElementById只接受一个id作为参数并返回一个对象。

Answer 2

只需将getElementById更改为getElementsByTagName。

希望这会有所帮助：

http://jsfiddle.net/jAsDJ/

var videos = document.getElementsByTagName("video"),
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);

滚动到视图时如何播放视频文件

2 个答案: