标签：javascript jquery html5 video html5-video
我在我的网站上使用html5视频.我希望它只在视野中播放,否则暂停.
我也使用javascript来播放/暂停按钮.
我能够轻松地在一个站点上使用这两个功能,视频是网站上的第一个元素.然而这次是第二个div
我觉得存在冲突是因为相同的元素被定位或出现了一些我似乎无法理解的错误
在这种情况下,当我打开网站时视频自动播放,当我滚动到实际视频时,它会停止(暂停)！谁能看到我做错了什么？
<script>
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);
</script>
我附上了一个小提琴
http://jsfiddle.net/5wZLL/12/
我在这个网站上使用过的其他插件：
Stellar.Js
FlexSlider
SmoothScroll
解决方法:
您在此处发布的代码大多数都很好,应该或多或少地正常工作,但这里有一些需要注意的事项：
>从视频元素中完全删除自动播放属性.将其设置为“0”不会将其关闭.自动播放的任何价值都将成为现实.
>您可能希望在页面加载时调用checkScroll一次以覆盖初始窗口状态,以防视频最初处于视图状态.否则,在您滚动至少一次之前它不会启动.
>此处的数学假设您的视频是静态定位的,没有将CSS位置设置为固定,相对或绝对的父元素.如果您需要这样做,您可能需要稍微修改位置计算.但这不是你发布的jsfiddle中的问题.
>根据分数的值,只有80％的视频可见时才会播放视频.如果浏览器窗口小于视频元素区域的80％,则无论您在何处滚动,它都不会播放.您可能希望调整与可见的值相比较的值,或者您可以将其保留原样.由你决定.
>确保视频实际正在加载.如果找不到文件或网络速度太慢,可能会设置播放状态,但您可能看不到播放状态.您可能希望使用播放和暂停事件以及暂停属性来获得播放状态的其他可视指示符.
>最后,如果您将要有一个单独的暂停/播放按钮,您将需要使用它来设置一些禁用滚动逻辑的外部变量,以便它们不会发生冲突.
根据您的描述,我怀疑您要密切关注1.和3.,因为它们可能会解决您的问题.
更新：
看起来您的问题是3.如果您的父元素没有静态定位,则offsetTop和offsetLeft不足以获取视频元素在页面中的位置.您需要遍历可能影响位置的所有祖先元素,如下所示：
parent = video;
while (parent && parent !== document.body) {
x += parent.offsetLeft;
y += parent.offsetTop;
parent = parent.offsetParent;
}
这是一个有效的例子：
http://jsbin.com/qekat/1/edit
标签：javascript,jquery,html5,video,html5-video 来源： https://codeday.me/bug/20191007/1867498.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。