HTML5ビデオの再生開始位置と再生時間

Question

HTML5を使用して制作したい動画（13分）があります。私たちはユーザーが再生したいビデオの部分を制御して選択できるようにしたいと考えています。好ましくは、この制御は2つの入力フィールドを介して行われる。最初のボックスで開始時間（秒）を入力し、2番目のボックスで再生する時間（秒）を入力します。たとえば、10秒間ビデオを開始して15秒間再生したい場合があります。これを行うために必要なJavascriptに関する提案やガイダンスはありますか？

注：は、私は次の認められません：

• Start HTML5 video at a particular position when loading?

しかし、それだけで特定の時間に開始アドレス、および時間の指定された長さのためにビデオを再生すると、何も。

Answer 1

timeupdateイベントリスナーを使用できます。

開始時刻と継続時間をloadedmetadataイベントの後の変数に保存します。

// Set video element to variable 
var video = document.getElementById('player1'); 

var videoStartTime = 0; 
var durationTime = 0; 

video.addEventListener('loadedmetadata', function() { 
    videoStartTime = 2; 
    durationTime = 4; 
    this.currentTime = videoStartTime; 
}, false); 

現在の時刻が開始時刻プラス継続時間を超える場合は、動画を一時停止します。

video.addEventListener('timeupdate', function() { 
    if(this.currentTime > videoStartTime + durationTime){ 
    this.pause(); 
    } 
}); 

Answer 2

Paul Shamが提案したjavascriptソリューションを使用する場合、多くのニュアンスがあります。はるかに簡単な方法は、Media Fragment URI Specを使用することです。それはあなたが再生するより大きいオーディオやビデオファイルの小さなセグメントを指定することができます。これを使用するには、ストリーミングするファイルのソースを変更し、#t=start,endを追加します。ここで、startは開始時間（秒）で、endは終了時間（秒）です。例えば

：

var start = document.getElementById('startInput').value; 
var end = document.getElementById('endInput').value; 

document.getElementById('videoPlayer').src = 'http://www.example.com/example.ogv#t='+start+','+end; 

これは、指定した時刻に指定された時刻と終了時にソースビデオを開始するためにプレーヤーを更新します。ブラウザのメディアフラグメントもサポートされているので、HTML5をサポートするすべてのブラウザで動作するはずです。

Answer 3

ビデオURLの設定中にビデオの開始時間と終了時間を設定できる場合は、 あなたはそれが第50秒に20秒から再生されます

src="future technology_n.mp4#t=20,50" 

のようなURL自体に開始時間と終了時間を指定することができます。

Answer 4

マイケル・ハノンに拡張コメント： IEはbuffered.length = 0とseekable.length = 0.を返します。ビデオは再生されません。だから、解決策：

SRC = "video.mp4＃T = 10,30"

はIEで動作しません。あなたがIEの唯一の方法をサポートしたい場合は、JavaScriptを使用して0秒から開始した直後にビデオを探すことです。