HTML5ビデオが最初のフレームで再生されるときを検出するにはどうすればよいですか？

Question

3時に正確な再生時間にオーバーレイ画像を表示したいので、この質問をします。

したがって、「再生」イベントをバインドして、画像を表示するためにsetTimeout(...,18000)と状態を設定しました。

しかし、setTimeoutが早すぎるようです。画像が予想以上に速く表示されます。私は、ビデオが準備される前に "プレイ"イベントが発砲されると、私は理解できません。

私はまた、 "loadeddata"と "playing"イベントをバインドしようとしました。しかし、今回は、イメージが予想よりも遅く表示されます。

また、画像は「ランダムなやり方で」表示されているようです（必ずしも同じ時間にいくつかのテストで表示されるわけではなく、少し異なります）。

正確な時刻に画像を表示するためにsetTimeoutを使用できるイベントがありますか？または、単純な方法で、ビデオ上の画像を正確な時間で表示するにはどうすればいいですか？

Answer 1

これを行うには、currentTimeを使用し、ビデオが変更されるたびに関数を定義する別の方法があります。 currentTimeが3〜4秒の場合、HTML5ビデオ要素の上にdivを設定し、その要素を変更します。

サンプル・コードは次のようになります。

HTML：

<div id="wrap_video"> 

<div id="video_box"> 
    <div id="video_overlays"></div> 
    <div> 
     <video id="myVideo" width="320" height="176" controls autoplay> 
    <source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4"> 

    Your browser does not support HTML5 video. 
     </video> 
    </div> 
</div> 

</div> 

CSS：

#video_box{ 
    position:relative; 
} 
#video_overlays { 
    position:absolute; 
    width:160px; 
    min-height:100px; 
    background:transparent; 
    z-index:300000; 
    bottom:50px; 
    left:10px; 
    text-align:center; 
} 

はJavaScript：

var vid = document.getElementById("myVideo"); 

// Assign an ontimeupdate event to the video element, and execute a function if the current playback position has changed 
vid.ontimeupdate = function() {myFunction()}; 

function myFunction() { 
    //if currentTime is greater than 3 but less than 4, as in second 3+, go into if statement, otherwise go to else statement 
    if (vid.currentTime > 3 && vid.currentTime < 4) { 
     document.getElementById("video_overlays").innerHTML = '<p>Image Here</p>'; 
    } 
    else { 
     document.getElementById("video_overlays").innerHTML = ''; 
    } 
} 

することができます最初のif文ポーズ内部そのビデオを再生してから画像を表示してから、ビデオが一定のタイムアウト後に再び開始されるようにしてください。これがあなたの意図だったのであれば、このコードは本質的にそのようなことをするスケルトンです。

作業サンプル：http://jsfiddle.net/l33tstealth/wgcbcf1t/10/