滚动时,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。
希望这是有道理的。 谢谢 :)
我把分数改为0.8,对我来说效果很好。 希望这可以帮助
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);