blocks|key|402890|text|一种简单的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|402891|<script>
var+video+=+document.querySelector('video');+++++++
video.addEventListener('ended',+function()+{
++video.load();+++++
});
</script>|code-block|syntax|javascript|402892|实际上，当更改视频标记的src时，您隐式地调用了它的load()。|402893|此方法具有再次请求媒体URL的警告，并且根据缓存设置，它可能会重新下载完整长度的媒体资源，从而导致客户端不必要的网络/CPU使用。|402894|解决这个问题的一个更合适的方法是在视频标签上使用覆盖的image/div，并在视频开始时隐藏它。当ended事件触发时，只需再次显示覆盖图像。|402895|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>A straightforward way of doing this: </p>

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

<p>Indeed when changing the src of a video tag you implicitly call a load() on it. </p>

<p>This method has the caveat to request the media URL again and depending on caching settings it may re-download the full-length media resource causing unnecessary network/CPU usage for the client. </p>

<p>A more appropriate way to solve this issue is to use an overlay image/div on top the video tag and to hide it when video starts. When the ended event fires just show the overlay image again. </p>


blocks|key|402920|text|这就是我在视频播放结束后看到一张海报的结果：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|402921|#+Show+poster+at+the+end+of+the+video
$('video').on('ended',->
++$('video')[0].autoplay=false
++$('video')[0].load()
)|code-block|syntax|javascript|402922|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This is what I ended up doing to see a poster after the video finished playing:</p>

<pre><code># Show poster at the end of the video
$('video').on('ended',-&gt;
  $('video')[0].autoplay=false
  $('video')[0].load()
)
</code></pre>


blocks|key|402842|text|尝尝这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|402843|var+video=$('#video_id').get(0);++++++++
video.play();
video.addEventListener('ended',function(){
++++v=video.currentSrc;
++++video.src='';
++++video.src=v;++++++++++++
});++|code-block|syntax|javascript|402844|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>try this</p>

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


blocks|key|402997|text|最后，我得到了解决方案:视频将在第一次自动播放，在视频结束时，您将看到海报图像：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|402998|<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>|code-block|syntax|javascript|402999|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Finally I got the solution: video will autoplay first-time and at end of video you will see the poster image: </p>

<pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
 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);
       });
    });
 });
&lt;/script&gt;

&lt;video id="myVideo" poster="1.png" &gt;
    &lt;source src="1.mp4" type="video/mp4" /&gt;
&lt;/video&gt;
</code></pre>


blocks|key|403004|text|这对我很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|403005|var+video=$('#video_id').get(0);++++++++
video.play();
video.addEventListener('ended',function(){
++++v=video.currentSrc;
++++video.src='';
++++video.src=v;+
++++video.pause();++++++++++
});+|code-block|syntax|javascript|403006|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This works for me.</p>

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


blocks|key|184909|text|如果你想要一个海报在结尾，这是唯一的要求，那么我会说，只需在视频文件中添加一个结束帧作为该海报，并跳过加载不必要的JS。当视频结束时，您将看到结束帧，它现在是您添加的海报。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|184910|如果您想在最后显示视频海报，或者换句话说，重新加载视频，则使用上面EL+Yusubov所示的自定义事件|184911|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>If you want a poster at the end, and thats the only requirement, then i would say just add a ending frame in the video file as that poster and skip loading unnecessary JS. When the video ends you will see the end frame which is now the poster you added.</p>

<p>If you want to display the video poster at the end or in other words reload the video, then use custom event as shown above by EL Yusubov</p>


blocks|key|184947|text|我认为有两种方法可以解决你的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|184948|第一个会在视频结束后将当前帧设置到位置0(第一帧)。你可以设置任何你喜欢的框架。建议使用此解决方案。|184949|<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>|code-block|syntax|javascript|184950|下一个将重新加载视频源，因此海报将再次出现。根据video中的poster规范，它将一直显示到视频开始一次。在那之后，再次获得海报的唯一方法-重新加载视频src，以及一个poster，只是为了确保。在重新加载poster的情况下会更稳定一些。|offset|length|style|CODE|184951|<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>+|184952|entityMap^0|0|0|0|O|5|V|6|25|3|2D|6|2W|6|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@$K|W|L|X|M|N]|$K|Y|L|Z|M|N]|$K|10|L|11|M|N]|$K|12|L|13|M|N]|$K|14|L|15|M|N]]|9|@]|A|$]]|$1|O|3|P|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$]]

<p>I see two ways to solve your issue. </p>

<p>First one will set your current frame to position 0 (the very first frame) after the video will end. You can set any frame you like. This solution is recommended. </p>

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

<p>The next one will reload the video source, so the poster will appear again. According to specification of <code>poster</code> in <code>video</code> it will be displayed only until the video starts once. After that, the only way to get the poster again - reload the video <code>src</code>, and a <code>poster</code>, just to make sure. Will work a little bit more stable with <code>poster</code> reloading. </p>

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


blocks|key|184699|text|我也有同样的目标，并找到了一个解决方案，使用jQuery在结束时将视频的来源重置为自身。现在我得到了我的动画gif海报之前和之后的游戏。下面是一个简单的javascript播放函数和jQuery代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|184700|function+play()
++++{
++++movie_ID.play();+

++++$(document).ready(function(){
+++++++++$("#movie_ID").bind("ended",+function()+{
++++++++$('#movie_ID').attr('src',+'movie_ID.src');
++++++++++++});
+++++++++});+++
+++++}++|code-block|syntax|javascript|184701|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I had the same objective, and found a solution by using jQuery to reset the source of the video to itself on ended. Now I get my animated gif poster before and after play.
Here is a simple javascript play function and the jQuery code.</p>

<pre><code>function play()
    {
    movie_ID.play(); 

    $(document).ready(function(){
         $("#movie_ID").bind("ended", function() {
        $('#movie_ID').attr('src', 'movie_ID.src');
            });
         });   
     }  
</code></pre>


blocks|key|402953|text|通过在视频末尾添加一个额外的帧(海报)解决了问题，因为网站不支持插入javascripts|type|unstyled|depth|inlineStyleRanges|entityRanges|data|402954|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>solved by adding 1 extra frame (poster) at the end of the video itself, because website didnt support inserting of javascripts</p>


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

<p>With the above; within the HTML5 <code>&lt;video&gt;</code> tag, I can add a poster; of an image or animated .gif just fine and plays / runs before the actual video is 'played'.</p>

<p>NOW, how can I add an image; specifically a .gif (animated .gif works with poster) that will run AFTER the video has played through?</p>


HTML5 Video / End of a Video Poster

jQuery

HTML5

<video controls="controls" poster="http://gifs.gifbin.com/1233925271_8be9acc.gif" style="width:800px;">有了上面的；在HTML5的<video>标签中，我可以添加一个图像或动画.gif的海报；，并在实际的视频“播放”之前播放/运行。现在，我如何才能添加一个图像；特别是在视频播放后运行的.gif (

问HTML5视频/视频海报结束
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5视频/视频海报结束EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5视频/视频海报结束
EN