Question

我正在尝试在视频播放达到100％时触发事件。

当视频没有循环时，我得到（currentTime / duration * 100 === 100）为true。当视频循环播放时，我永远不会得到100。

有什么建议吗？

这是HTML。

<h3>Without Loop</h3>

<div>Current: <span id="console2"></span></div>
<div>Has hit 100%: <span id="hundredIsTrue2" class="red">No</span></div>
<video id="video2" autoplay>
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
    <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" />
</video>

<h3>With Loop</h3>

<div>Current: <span id="console"></span></div>
<div>Has hit 100%: <span id="hundredIsTrue" class="red">No</span></div>
<video id="video" autoplay loop>
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
    <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" />
</video>

这是JavaScript。

var video = document.getElementById('video'),
    console = document.getElementById('console'),
    hundred = document.getElementById('hundredIsTrue'),
    video2 = document.getElementById('video2'),
    console2 = document.getElementById('console2'),
    hundred2 = document.getElementById('hundredIsTrue2');

    video.addEventListener('timeupdate', function (e) {
        console.innerHTML = e.target.currentTime / e.target.duration * 100;

        if (e.target.currentTime / e.target.duration * 100 === 100) {
            hundred.className = 'green';
            hundred.innerHTML = 'Yes';
        }
    });

    video2.addEventListener('timeupdate', function (e) {
        console2.innerHTML = e.target.currentTime / e.target.duration * 100;

        if (e.target.currentTime / e.target.duration * 100 === 100) {
            hundred2.className = 'green';
            hundred2.innerHTML = 'Yes';
        }
    });

这是CSS。

.red {
    background-color: red;
}
.green {
    background-color: green;
}

Answer 1

计算出的值从90秒移回0而没有达到确切的值100。会有类似下面的帮助吗？这个价值的可能性也没有达到99。设置较小的值，例如＆＃39; 95＆＃39;可能适用于你想要达到的目标。

if (e.target.currentTime / e.target.duration * 100 > 99) {
        hundred.className = 'green';
        hundred.innerHTML = 'Yes';
    }

Answer 2

timeupdate事件实际上并不在每一帧上运行。它大约每250毫秒或1/4秒运行一次。所以看起来这里发生的事情是，最后一个timeupdate事件在视频结束前不到250毫秒触发，然后视频结束并在开始之前重新开始，之后可能会有另一个{{1}触发事件。因此，触发的下一个timeupdate事件会将timeupdate报告为零或接近零。

因此，如果您想让视频自动循环，您可以采取一些措施来检测结果。一种选择是寻找足够接近的时间，比如在结束前0.5秒。另一种选择是等待currentTime事件，该事件应该在视频结束时触发并寻求回零，但如果您还允许用户手动搜索视频，那么这将无济于事。

第三个选项是禁用自动循环并侦听seeked事件。视频到达时会触发ended，但前提是ended属性/属性未启用。收到活动后，您可以触发活动，将loop设置回0并再次致电currentTime。

HTML5视频循环永远不会达到100％的持续时间

2 个答案: