HTML5ビデオタグ(プレーヤー)学習記(2)：再生制御_html5チュートリアルスキル

前の記事 では、html5 タグのビデオ (プレーヤー) を初期化するために必要な作業と、html5 プレーヤーを簡単かつ迅速に使用する方法を紹介しました。この記事では、JS の使用方法に焦点を当てます。これは、ビデオ タグを操作する方法であり、プレーヤーの再生と一時停止、ボリュームの読み取りと設定、その他の書き込み関連操作を含む、ビデオに対するいくつかの単純で基本的な操作を実行して、プレーヤーの拡張を開始する方法です。

この記事の目次:

1. ビデオの合計時間を取得します
2. 再生と一時停止
3. ビデオの再生時間を取得し、再生ポイントを設定します
4. 音量を取得して設定します

まず、ビデオの合計時間を取得します

プレーヤー (ビデオ) を操作するとき、最初に取得する必要があるのはビデオに関する情報です。そのうちの 1 つはコンテンツに加えて、合計再生時間も最初に表示されるものです。 。動画を操作する前に、video タグに ID を追加して、video 要素

コピーコード

を簡単に取得できるようにします。コードは次のとおりです。

ID を設定した後、操作を開始できます。合計時間を取得するには、ビデオのイベント (loadedmetadata) を使用する必要があります。このイベントのトリガーは、メタデータ (メディアの一部の基本情報) が含まれていることを示します。 addEventListener を使用してイベントをリッスンします

コードをコピーします

コードは次のとおりです:

var myVideo = document.getElementById( 'myVideo');//ビデオ要素を取得します
myVideo.addEventListener("loadedmetadata", function(){
//実行されるコード
});
さて、すでに視聴されています。次に行うことは、実際にはattribute-duration
var myVideo = document.getElementById('myVideo')//ビデオ要素を取得することです。 🎜>,tol = 0
;
myVideo.addEventListener("loadedmetadata", function(){
tol = myVideo.duration;//合計再生時間を取得します
});

なお、取得される合計時間の単位は秒であり、表示する際には必要に応じて換算する必要があります。

2 番目、再生、一時停止

プレーヤーの最も基本的な機能は再生と一時停止です。合計時間を取得した後、次の操作は再生と一時停止です。このときに使用されるビデオの 2 つの方法は再生と一時停止です

コードをコピーしますコードは次のとおりです:

var myVideo = document.getElementById('myVideo')//ビデオ要素を取得します
, tol = 0
;
myVideo.addEventListener("loadedmetadata", function() {
tol = myVideo.duration;//合計再生時間を取得します
});

//Play
関数 play(){
myVideo.play();
}

//Pause
function stop(){
myVideo.pause();
}

play メソッドは再生後に実行されることに注意してください。最初から再生されます。

第三に、ビデオの再生時間を取得し、再生ポイントを設定します

プレーヤーが再生および一時停止できるようになったら、次に確認する必要があるのは、ビデオの再生時間と再生された時点です。この操作は、合計時間を取得するのとよく似ています。イベントをリッスンして属性の値を取得する必要があります。次に、ビデオの timeupdate イベントと currentTime 属性を使用します。

コードをコピーコードは次のとおりです:

//再生時点が更新されたとき
myVideo.addEventListener("timeupdate" , function(){
var currentTime = myVideo.currentTime;//現在の再生時間を取得します
console.log(currentTime);//デバッガーで印刷します
});


実行後、コンソールに大量のデータが表示されます...

前回視聴してから 10 分経ったので、今回は 10 分から視聴したいというリクエストがよくあります。この時点で再生ポイントを設定する必要があります。 currentTime 属性は再生ポイントの設定に引き続き使用されますが、設定値の単位は秒であることに注意してください。再生ポイントが秒単位でない場合は変換する必要があります。

コードをコピーします コードは次のとおりです:

// 再生ポイントを設定します
function playBySeconds(num){
myVideo.currentTime = num;
}

4 番目、ボリュームの取得と設定

プレーヤーは、再生プロセス中に一時停止したり、再生中の位置を認識したり、特定の時点から再生を開始したりすることができます。これは 3 番目の点と同様ですが、ボリューム属性を使用してボリュームを取得することもできます。ただし、ここで紹介するのは、将来的には UI をカスタマイズする必要があることです。つまり、volumechange イベント

コードをコピーしますコードは次のとおりです:

/ /音量が変更されたとき
myVideo.addEventListener("volumechange" , function(){
var volume = myVideo.volume;//現在の音量を取得します
console.log(volume);//印刷デバッガー
});

コントロール バーを使用して音量を変更すると、デバッガーに大量のデータが表示されます。なお、音量の範囲は 0 ～ 1 で、UI では一般にパーセントが使用されるため、必要に応じて変換が必要です。
音量は、ボリューム属性

で設定される点を除けば、再生時点と同様に属性を変更することで設定できます。コードをコピーします コードは次のとおりです:

//ボリュームを設定します
function setVol(num){
myVideo.volume = num;
}

以下は完全なコードです:

コードをコピーしますコードは次のとおりです:

<ビデオ ID ="myVideo" コントロール preload="auto" width =300 height="165"
poster="http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg"
src=" http://www.w3cschool.cc/try /demo_source/mov_bbb.mp4">

<script><br>var myVideo = document.getElementById('myVideo')/ /ビデオ要素を取得します <br> ,tol = 0 //合計再生時間<br>;<br>myVideo.addEventListener("loadedmetadata", function(){<br> tol = myVideo.duration;//合計再生時間を取得します<br>}); <p>//Play<br>function play(){ <br> myVideo.play();<br>}</p> <p>//一時停止<br>function stop(){ <br> myVideo.pause();<br>}</p> <p>//再生時点が更新されたとき<br>myVideo.addEventListener("timeupdate", function(){<br> var currentTime = myVideo.currentTime;//現在の再生時間を取得します<br> コンソール。 log(currentTime );//デバッガで出力<br>}); <p>//再生ポイントを設定します<br>function playBySeconds(num){ <br> myVideo.currentTime = num;<br>}</p> <p>//音量が変更されたとき<br>myVideo.addEventListener("volumechange", function(){<br> var volume = myVideo.volume;//現在の音量を取得します<br> console.log(volume) ;/ /デバッガーで印刷<br>});</p> <p>// ボリュームを設定します<br>function setVol(num){ <br> myVideo.volume = num;<br>}<br></script>

< ;/html>

概要: これらの 4 つの手順を使用して、HTML5 タグのビデオ (プレーヤー) の基本的な操作を理解します。これらの操作は主に、ビデオ イベントを監視し、JS を介してビデオ属性を操作することです。これら 4 つのポイントを理解していれば、プレーヤーを柔軟に使用し、アプリケーションのシナリオに応じて調整することができます。