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

因此，当他们滚动到视口时，我试图激活视频，只是调用他们不同的ID，但它不起作用，我承认我对这一点非常陌生（js/jquery），我不是100%了解发生了什么，所以任何帮助都会很好

为了清楚起见，每当滚动到视图中时，我都会尝试让每个视频单独播放，我让第一个视频正常工作，但当滚动到视图中时，其他后续视频都不会播放

我创建这个是为了帮助了解我想要完成的事情

更新：好的，这就是我希望它工作的方式，但是我如何才能让它工作而不重复代码

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

var videoId=document.getElementById（“video”、“videoTwo”）；
var playVideo=videoId，
分数=0.9；
函数checkScroll（）{
var x=playVideo.offsetLeft，
y=playVideo.offsetTop，
w=播放视频。偏移网络宽度，
h=播放视频。离视，
r=x+w，//对
b=y+h，//底部
visibleX，
显而易见，
看得见的
如果（window.pageXOffset>=r | | window.pageYOffset>=b | | window.pageXOffset+window.innerWidth分数）{
playVideo.play（）；
}否则{
播放视频。暂停（）；
}
}
checkScroll（）；
window.addEventListener（'scroll'，checkScroll，false）；
window.addEventListener（'resize'，checkScroll，false）；

此行：

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

应该是：

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

---

getElementById

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

只需将getElementById更改为getElementsByTagName即可

希望这有助于：

var videos=document.getElementsByTagName（“视频”），
分数=0.8；
函数checkScroll（）{
对于（var i=0；i分数）{
video.play（）；
}否则{
video.pause（）；
}
}
}
window.addEventListener（'scroll'，checkScroll，false）；
window.addEventListener（'resize'，checkScroll，false）；

这不会同时获取两个元素，只获取第一个：

var videoId=document.getElementById（“video”、“videoTwo”）所以你在那里所做的实际上只是获取第一个元素“视频”。很抱歉，在看到你的评论之前我写了这么多。谢谢你的帮助，但是我该如何组合js的所有类似部分，这样我就不必每次想添加另一个视频时都重复我自己了。我更新了JSFIDLE，现在它可以按照我想要的方式工作了，但是如果可能的话，我想对它进行优化。非常感谢，我尝试用一种更复杂的方式来解决这个问题。for循环非常有意义。
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);