视频播放然后 onended() 被带有链接的静止图像覆盖

Question

我是 HTML5 的新手，所以我试图找到在 HTML5 中播放来自 Adobe After Effects 的预制视频的最简单方法，然后用静止图像替换最后一帧具有可点击图标的图像。

1) 我尝试了很多 JS，JQuery 示例，效果很好，但我不能用其他东西替换视频，因为我不能让它们相互叠加。 2) 我想在 Adobe Animate CC 或 ActionScript 中制作一个完整的 SWF，最后将是可点击的链接，但过程太复杂了。

关于JS/JQuery方法有什么想法吗？

更新@jms我已经实现了你的想法：

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<script src=
"http://ajax.googleapis.com/ajax/
 libs/jquery/1.11.2/jquery.min.js">
</script>
<body>
<script>
document.querySelector('#videoPlayer').addEventListener('progress', 
function(evt) {
if(evt.total-evt.loaded <= 1) {
    evt.target.pause();
    document.querySelector('.over-buttons').classList.add('show-icons');
} 
}</script>


<div class="video-container">
<video id="videoPlayer" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
</video>
<div class="over-buttons">YOUR ELEMENTS THAT WILL BE SHOWED IN THE LAST 
SECOND </div>
</div>

</body>
</html>

Answer 1

一个你可以尝试的选项，我不知道它是否适合你。您可以尝试将您的播放器放在另一个元素中，并将一些事件附加到您的播放器以便在最后一秒暂停它，然后在您的父元素中显示其他元素，您应该将其定位在您的视频上。像

<div class="video-container">
    <video id="videoPlayer" src="resource_url"></video>
    <div class="over-buttons"><!--YOUR ELEMENTS THAT WILL BE SHOWED IN THE LAST SECOND --></div>
</div>

然后，您可以将事件 progress 附加到视频元素，以及最后一秒的时间（例如与视频属性 duration 或 loaded 属性事件），然后您可以暂停视频并添加一个 class 显示 over-buttons div

document.querySelector('#videoPlayer').addEventListener('progress', function(evt) {
    if(evt.total-evt.loaded <= 1) {
        evt.target.pause();
        document.querySelector('.over-buttons').classList.add('show-icons');
    } 
}

编辑1：我举了一个小例子。我检查过一些导航器没有正确发出进度事件，因此最好手动检查间隔当前视频位置。你可以在 jsfiddle https://jsfiddle.net/8mfwv0zc/1/

查看它

视频播放然后 onended() 被带有链接的静止图像覆盖

Video play then onended() overlayed by still image with links

html

javascript

jquery

html5-video

html5-canvas