只有当用户在浏览器视口中拥有视频(或一定比例的视频)时,才有权自动播放HTML5视频吗?滚动时播放HTML5视频到
回答
您可以使用window.pageXOffset和window.pageYOffset来检查浏览器窗口的垂直和水平滚动距离。使用window.innerWidth
和innerHeight
以及一些基本的几何数学来计算可见页面与视频本身的重叠程度。将这些全部放入一个函数中,您可以将其附加到窗口对象上的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);
此代码假设一个非常简单的页面布局。如果您的视频完全位于另一个具有“位置:相对”设置的元素中,那么您需要做更多的工作来计算视频的正确位置。 (这同样如果视频已被移动与CSS变换。)
我假设问题是一旦下载了一定比例的视频,就播放。我没有仔细阅读,我猜 – 2013-03-13 21:38:38
嗯看起来不错。有没有办法用jQuery做到这一点? – jp89 2013-03-14 00:03:23
是的。您可以使用'$'而不是getElementById和$('#video')。bind(...'而不是addEventListener。如果需要,可以使用“.offset()”。 – brianchirls 2013-03-14 00:41:52
希望这可以帮助,但它已经回答了前
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);
简单
比方说,我们的浏览器窗口W
当前滚动到y位置scrollTop
和scrollBottom
O如果您的视频位置为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);
});
请解释您的答案,而不是发布一段代码 – Gary 2014-10-22 13:29:51
Mikkel的解决方案在已注释的文本中进行了解释,它的优雅性和它的工作原理,以及我喜欢它使用jQuery的方式,谢谢Mikkel! – soulphysics 2014-11-23 16:24:19
我确实为@MikkelJensen添加了解释很好的答案 – 2016-08-09 09:25:58
没有针对此方案中的新API,被称为Intersection_Observer_API,这 铬51 +和15+的边缘已经支持。
var options = {
root: document.querySelector('.scroll-container'),
rootMargin: '0px',
threshold: 1.0 // trigger only when element comes into view completely
};
var ob = new IntersectionObserver((entries, observer) => {
entries[0].target.classList.toggle('red');
}, options);
// observe all targets, when coming into view, change color
document.querySelectorAll('.target').forEach((item) => {
ob.observe(item);
});
下面是一个简单的演示: https://codepen.io/hectorguo/pen/ybOKEJ
- 1. html5视频//自动播放
- 2. 只有在网页上滚动到html5视频才能播放html5视频?
- 3. HTML5视频播放一次滚动到视图中。
- 4. 播放视频HTML5
- 5. HTML5动画 - 播放时滚动到
- 6. 播放HTML5视频时滚动到,然后播放,直到完成,只播放一次
- 7. 同时播放HTML5视频和音频
- 8. 通过滚动鼠标滚轮来播放html5视频
- 9. HTML5视频 - 测量播放
- 10. HTML5视频无法播放
- 11. 播放视频HTML5和Apache
- 12. Cordova播放html5视频
- 13. HTML5视频不能播放
- 14. html5 mp4视频播放器
- 15. HTML5视频播放不会
- 16. html5视频播放器
- 17. HTML5视频视频播放列表
- 18. 如何在用户滚动到HTML5时开始播放我的视频?
- 19. 自动全屏html5视频播放?
- 20. html5视频自动播放延迟safari
- 21. iPhone上的HTML5视频自动播放
- 22. HTML5视频自动播放不fullPage.js
- 23. HTML5视频 - 播放活动未触发
- 24. 在Fancybox中自动播放HTML5视频
- 25. 使用html5自动播放mp4视频
- 26. 如何停止播放视口时播放html5视频?
- 27. ASP.NET和HTML5视频播放时间
- 28. 点击按钮时播放HTML5视频
- 29. HTML5视频未播放,NAN时长
- 30. 自动滚动视频播放
你可以有显示没有一个div ...如果这个人的年龄是正确的,那么用在div视频源添加视频标签并改变显示屏阻止....如果这是你想我可以帮你...简单地告诉我你想要检索访问者的年龄的方式,就是这样xD – Hackerman 2013-03-13 20:37:17