我想调整我在http://jsfiddle.net/jAsDJ/找到的代码 . 这几乎是我所需要的，除了我希望视频只播放一次 . 即使在取消视频标签上的循环属性后，上面链接中的代码也会在滚动时播放 .
在http://jsfiddle.net/duya0ntw/1/你可以看到我做了什么：添加了JS第4行，第23-26行和第34-38行 . 我正在尝试创建一个功能来确定视频是否已播放全长并仅在视频未播放时播放 .
以下是JS . 任何帮助将不胜感激 . 我一直在搞乱几个小时而没有运气 . （非常新手用JS）
var videos = document.getElementsByTagName("video"), fraction = 0.8;
var once = new Array(videos.length);
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) {
if (once[i] == false) {
video.play();
once[i] = true;
}
}
else {
//video.pause();
}
}
}
$(document).ready(function () {
for (var i = 0; i < videos.length; i++) {
once[i] = false;
}
});
1 回答
更改：
至：
这样你的视频就不会循环 - 只有播放头还没有播放时才能播放 .
JSFiddle：https://jsfiddle.net/jAsDJ/218/
这里是the reference I used to construct this answer，这可能会有所帮助 .