我对 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>
最佳答案
您可以尝试的一个选项，我不知道它是否适合您。您可以尝试将播放器放入另一个元素中，并将一些事件附加到播放器，以便在最后一秒暂停它，然后在父元素中显示其他元素，您应该将其放置在视频上。类似的东西
<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 事件的属性)，然后您可以暂停视频并添加一个显示 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/ 上查看。
关于javascript - 视频播放，然后 onend() 覆盖带有链接的静态图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52554029/