HTML5视频/结束视频海报

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

与上面的;在HTML5 <video>标签中，我可以添加海报;一个图像或动画的。gif只是很好，并播放/运行之前，实际的视频'播放'。

现在，我如何添加图像;特别是一个。gif(动画。gif作品与海报)，将运行后的视频已经播放完毕?

一个简单的方法:

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

当改变视频标签的src时，你隐式地调用load()。

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

解决这个问题的一个更合适的方法是在视频标签上使用覆盖图像/div，并在视频开始时隐藏它。当结束的事件触发时，只需再次显示覆盖图像。

在视频播放结束后，我最终看到了一张海报:

# Show poster at the end of the video
$('video').on('ended',->
  $('video')[0].autoplay=false
  $('video')[0].load()
)

总之:你需要的是在你的自定义JavaScript中添加video.addEventListener('ended',function() {})和触发video.load()。

这是一个相关的帖子，视频播放后重定向，你可以相应地修改它-重定向html5视频播放后

参考查找详细信息:

所有你需要知道的HTML5视频和音频
可以绑定的媒体事件

try this

var video=$('#video_id').get(0);        
video.play();
video.addEventListener('ended',function(){
    v=video.currentSrc;
    video.src='';
    video.src=v;            
});

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

<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>

这对我很有用。

var video=$('#video_id').get(0);        
video.play();
video.addEventListener('ended',function(){
    v=video.currentSrc;
    video.src='';
    video.src=v; 
    video.pause();          
});

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

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

我认为有两种方法可以解决你的问题。

第一个将在视频结束后将当前帧设置为位置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>

下一个将重新加载视频源，因此海报将再次出现。根据video中poster的规定，它只会显示一次，直到视频开始。在那之后，再次获得海报的唯一方法-重新加载视频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>

我也有同样的目标，并找到了一个解决方案，即使用jQuery将视频的源重置为自己。现在我得到了游戏前后的gif动画海报。下面是一个简单的javascript播放函数和jQuery代码。

function play()
    {
    movie_ID.play(); 
    $(document).ready(function(){
         $("#movie_ID").bind("ended", function() {
        $('#movie_ID').attr('src', 'movie_ID.src');
            });
         });   
     }

的解决方法是在视频的末尾添加1帧(海报)，因为网站不支持插入javascript

相关内容

最新更新

热门标签：