滚动到以下位置时播放HTML5视频
滚动到以下位置时播放HTML5视频
提问于 2013-03-14 04:35:24
只有当用户在浏览器视区中有视频(或一定比例的视频)时，才能自动播放HTML5视频吗？
回答 4
Stack Overflow用户
发布于 2014-10-22 21:03:58
简而言之
假设我们的浏览器窗口W当前滚动到y位置scrollTop和scrollBottom
我们的视频将不会播放，当它的位置是V1或V2，如下面的快照。
代码详细信息
$(document).ready(function() {
// Get media - with autoplay disabled (audio or video)
var media = $('video').not("[autoplay='autoplay']");
var tolerancePixel = 40;
function checkMedia(){
// Get current browser top and bottom
var scrollTop = $(window).scrollTop() + tolerancePixel;
var scrollBottom = $(window).scrollTop() + $(window).height() - tolerancePixel;
media.each(function(index, el) {
var yTopMedia = $(this).offset().top;
var yBottomMedia = $(this).height() + yTopMedia;
if(scrollTop < yBottomMedia && scrollBottom > yTopMedia){ //view explaination in `In brief` section above
$(this).get(0).play();
} else {
$(this).get(0).pause();
}
});
//}
}
$(document).on('scroll', checkMedia);
});Stack Overflow用户
发布于 2014-04-03 16:25:34
希望这能帮上忙，但我之前已经回答过了
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);Stack Overflow用户
发布于 2013-03-14 05:35:28
您可以使用window.pageXOffset和window.pageYOffset检查浏览器窗口的垂直和水平滚动距离。将它们与window.innerWidth和innerHeight结合使用，并使用一些基本的几何数学来计算可见页面与视频本身的重叠程度。将所有这些都放在一个函数中，您可以将该函数附加到window对象上的scroll和resize事件，以便在每次滚动发生变化时运行检查。
下面是一些示例代码：
var video = document.getElementById('video'),
info = document.getElementById('info'),
fraction = 0.8;
function checkScroll() {
var x = video.offsetLeft,
y = video.offsetTop,
w = video.offsetWidth,
h = video.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
) {
info.innerHTML = '0%';
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);
info.innerHTML = Math.round(visible * 100) + '%';
if (visible > fraction) {
video.play();
} else {
video.pause();
}
}
window.addEventListener('scroll', checkScroll, false);
window.addEventListener('resize', checkScroll, false);
//one time at the beginning, in case it starts in view
checkScroll();
//as soon as we know the video dimensions
video.addEventListener('loadedmetadata', checkScroll, false);还有一台working example。
这段代码假设页面布局非常简单。如果你的视频绝对定位在另一个设置了" position : relative“的元素中，那么你需要做更多的工作来计算视频的正确位置。(如果视频已使用CSS变换进行了移动，情况也是如此。)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15395920
复制相关文章
相似问题