Question

我对HTML5还是很陌生，所以我试图找到最简单的方法来播放HTML 5中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附加到video元素，以及事件的最后一秒（例如，与事件的duration或video属性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/

上进行检查

视频播放然后在带有链接的静止图像上覆盖onended（）

1 个答案: