Question

我问这个是因为我想像3点一样在准确的播放时间上显示叠加图像。

因此，我把'＃34; play＆＃34;事件和状态setTimeout(...,18000)以显示图像。

然而，似乎setTimeout太早了。显示的图像比预期的要快。我可以作为＆＃34; play＆＃34;事件在视频准备好之前被解雇。

所以我也尝试绑定＆＃34; loadeddata＆＃34;和＆＃34;玩＆＃34;事件。但这一次，图像显示的速度比预期慢。

此外，图像似乎以随机方式显示＆＃34; （并不总是在同一时间显示一些测试，有点不同）。

是否有可以使用setTimeout在确切时间显示图像的事件？或者简单来说，如何在视频上准确显示图像？

Answer 1

还有另一种方法可以使用currentTime并在每次视频更改时定义一个函数。在HTML5视频元素之上设置div，并在currentTime介于3到4秒之间时修改该元素。

示例代码如下所示：

HTML：

<div id="wrap_video">

<div id="video_box">
    <div id="video_overlays"></div>
    <div>
        <video id="myVideo" width="320" height="176" controls autoplay>
  <source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">

  Your browser does not support HTML5 video.
       </video>
    </div>
</div>

</div>

CSS：

#video_box{
    position:relative;
}
#video_overlays {
    position:absolute;
    width:160px;
    min-height:100px;
    background:transparent;
    z-index:300000;
    bottom:50px;
    left:10px;
    text-align:center;
}

JavaScript的：

var vid = document.getElementById("myVideo");

// Assign an ontimeupdate event to the video element, and execute a function if the current playback position has changed
vid.ontimeupdate = function() {myFunction()};

function myFunction() {
    //if currentTime is greater than 3 but less than 4, as in second 3+, go into if statement, otherwise go to else statement
    if (vid.currentTime > 3 && vid.currentTime < 4) {
        document.getElementById("video_overlays").innerHTML = '<p>Image Here</p>';
    }
    else {
        document.getElementById("video_overlays").innerHTML = '';
    }
}

你可以在第一个if语句中暂停视频，然后显示一个图像，然后在一定的超时后再次启动视频，如果这是你的意图，但这段代码实际上就是做这样的事情的骨架。

工作样本：http://jsfiddle.net/l33tstealth/wgcbcf1t/10/

如何检测第一帧播放HTML5视频的时间？

1 个答案: