32 
<video controls="controls" poster="http://gifs.gifbin.com/1233925271_8be9acc.gif" style="width:800px;">

与上述; 在 HTML5<video>标签内，我可以添加一张海报；图像或动画 .gif 的效果很好，并在“播放”实际视频之前播放/运行。

现在，我如何添加图像；特别是在视频播放后将运行的 .gif（动画 .gif 与海报一起使用）？

4

10 回答 10

39

一种直接的方法：

<script>
var video = document.querySelector('video');       
video.addEventListener('ended', function() {
  video.load();     
});
</script>

实际上，在更改视频标签的 src 时，您会隐式调用 load() 。

此方法需要再次请求媒体 URL，并且根据缓存设置，它可能会重新下载完整长度的媒体资源，从而导致客户端不必要的网络/CPU 使用。

解决此问题的更合适的方法是在视频标签顶部使用叠加图像/div，并在视频开始时将其隐藏。当结束事件触发时，只需再次显示叠加图像。

于 2014-04-10T06:15:15.270 回答
12

这是我在视频播放完毕后看到海报时所做的：

# Show poster at the end of the video
$('video').on('ended',->
  $('video')[0].autoplay=false
  $('video')[0].load()
)
于 2015-08-08T13:52:16.843 回答
7

简而言之：您需要在自定义 JavaScript 中添加 video.addEventListener('ended',function() {})和触发video.load()。

这是播放视频后重定向的相关帖子，您可以相应地对其进行修改-播放后重定向html5视频。

查找详细信息的参考资料：

于 2013-01-09T20:46:45.740 回答
5

尝试这个

var video=$('#video_id').get(0);        
video.play();
video.addEventListener('ended',function(){
    v=video.currentSrc;
    video.src='';
    video.src=v;            
});
于 2014-04-04T11:16:52.757 回答
3

最后我得到了解决方案：视频将首次自动播放，在视频结束时，您将看到海报图片：

<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script>
<script type="text/javascript">
 document.observe('dom:loaded', function(evt){
    $('#myVideo').each(function(elm){
        elm.play();
        var wrapper = elm.wrap('span');
        var vid = elm.clone(true);
        elm.observe('ended', function(){
          wrapper.update(vid);
       });
    });
 });
</script>

<video id="myVideo" poster="1.png" >
    <source src="1.mp4" type="video/mp4" />
</video>
于 2017-05-31T09:02:01.920 回答
2

这对我有用。

var video=$('#video_id').get(0);        
video.play();
video.addEventListener('ended',function(){
    v=video.currentSrc;
    video.src='';
    video.src=v; 
    video.pause();          
});
于 2018-08-02T11:31:25.333 回答
1

如果你想要一张海报，这是唯一的要求，那么我会说只需在视频文件中添加一个结束帧作为该海报并跳过加载不必要的 JS。当视频结束时，您将看到现在是您添加的海报的结束帧。

如果您想在最后显示视频海报，或者换句话说重新加载视频，请使用 EL Yusubov 如上所示的自定义事件

于 2019-01-29T07:27:33.460 回答
1

我看到两种方法可以解决您的问题。

第一个将在视频结束后将当前帧设置为位置 0（第一帧）。你可以设置任何你喜欢的框架。建议使用此解决方案。

<video controls id="myVideo" poster="test.jpg">
  <source src="test.mp4" type="video/mp4" />
</video>
<script>
let myVideo = document.getElementById("myVideo");
myVideo.onended = function() {
  myVideo.currentTime = 0;
};
</script>

下一个将重新加载视频源，因此海报将再次出现。根据 in 的规范，poster它video只会显示到视频开始一次。之后，再次获得海报的唯一方法 - 重新加载视频src和一个poster，只是为了确保。重新加载后会更稳定一些poster。

<video controls id="myVideo" poster="test.jpg">
  <source src="test.mp4" type="video/mp4" />
</video>
<script>
let myVideo = document.getElementById("myVideo");
myVideo.onended = function() {
  myVideo.poster = "test.jpg"
  myVideo.src = "test.mp4"
};
</script>
于 2020-06-06T18:50:05.437 回答
0

我有同样的目标，并找到了一个解决方案，方法是使用 jQuery 在结束时将视频源重置为自身。现在我得到了我在播放前后的动画 gif 海报。这是一个简单的 javascript 播放函数和 jQuery 代码。

function play()
    {
    movie_ID.play(); 

    $(document).ready(function(){
         $("#movie_ID").bind("ended", function() {
        $('#movie_ID').attr('src', 'movie_ID.src');
            });
         });   
     }
于 2013-08-04T20:45:20.503 回答
0

通过在视频本身的末尾添加 1 个额外的帧（海报）来解决，因为网站不支持插入 javascripts

于 2016-01-06T11:03:47.100 回答