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の読み込みをスキップします。ビデオが終了すると、追加したポスターである終了フレームが表示されます。

最後にビデオポスターを表示したい場合、つまりビデオをリロードしたい場合は、ELYusubovによる上記のカスタムイベントを使用してください

于 2019-01-29T07:27:33.460 に答える
1

私はあなたの問題を解決する2つの方法を見ます。

最初のものは、ビデオが終了した後、現在のフレームを位置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>

次のものはビデオソースをリロードするので、ポスターが再び表示されます。posterの仕様によるとvideo、ビデオが1回開始するまでのみ表示されます。その後、ポスターを再度取得する唯一の方法は、念のために、ビデオ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ポスターが表示されます。簡単なjavascriptplay関数と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

ウェブサイトはJavaScriptの挿入をサポートしていなかったため、ビデオ自体の最後に1つの余分なフレーム（ポスター）を追加することで解決しました

于 2016-01-06T11:03:47.100 に答える