javascript - 滚动到时播放视频，但播放视频一次

Question

我想修改我在 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;
}
});

Answer 1

更改:

if (visible > fraction)

至:

if (visible > fraction && video.currentTime < video.duration)

这样您的视频就不会循环播放 - 仅当播放头尚未结束时它们才会播放。

JSFiddle:https://jsfiddle.net/jAsDJ/218/

这是the reference I used to construct this answer ，这可能会有所帮助。