滚动时，HTML5和JavaScript会暂停所有video

我跟着HTML5和Javascript播放video只有在可见时 – 它在第一个video上运行得很好，但是我的网站上的第二个video也暂停了，当第一个是第一个video时播放（当滚动所有video时）到顶部的方式）。 第二个video只应播放，当它滚动到并以0.1的一小部分可见时（就像在第一个video上一样）。

我的HTML：

 ...  

这是我的JS：

 var videos = document.getElementsByTagName("video"), fraction = 0.1; function checkScroll() { for(var i = 0; i  fraction) { video.play(); } else { video.pause(); } } } window.addEventListener('scroll', checkScroll, true); window.addEventListener('resize', checkScroll, false); 

所以看起来所有video（因为getElementByTagName）只是在滚动到顶部时播放。 我想在video的0.1分之一可见时播放video。

希望这是有道理的。 谢谢 ：）

Answer 1

我把分数改为0.8，对我来说效果很好。 希望这可以帮助

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