HTML5ビデオタグの再生制御-H5 チュートリアル-php.cn

HTML5ビデオタグの再生制御

不言

リリース： 2018-06-11 17:15:32

オリジナル

8944 人が閲覧しました

この記事では主にHTML5のvideoタグの再生制御について紹介し、動画の総再生時間の取得、再生、一時停止、再生時間の取得、再生ポイントの設定、音量の取得と設定、必要な友達は以下を参照してください

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

この記事の目次:

1. ビデオの合計時間を取得します
2. ビデオの再生経過時間を取得し、再生ポイントを設定します
4.音量

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

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

<video id="myVideo" controls 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">
    </video>

ログイン後にコピー

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

var myVideo = document.getElementById(&#39;myVideo&#39;);//获取video元素
myVideo.addEventListener("loadedmetadata", function(){
    //要执行的代码
});
     好了，已经监听了，那么接下来要做的就是获取总时长，其实就是一个属性-duration
var myVideo = document.getElementById(&#39;myVideo&#39;)//获取video元素
    ,tol = 0
;
myVideo.addEventListener("loadedmetadata", function(){
    tol = myVideo.duration;//获取总时长
});

ログイン後にコピー

取得される合計期間の単位は秒であることに注意してください。を表示するときに必要に応じて変換する必要があります。

2番目、再生と一時停止

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

var myVideo = document.getElementById(&#39;myVideo&#39;)//获取video元素
    ,tol = 0
;
myVideo.addEventListener("loadedmetadata", function(){
  tol = myVideo.duration;//获取总时长
 });</p>
<p> //播放
 function play(){ 
     myVideo.play();
 }</p>
<p> //暂停
 function pause(){ 
     myVideo.pause();
 }

ログイン後にコピー

なお、再生が完了してから play メソッドを実行すると、最初から再生されます。

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

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

前回の視聴から 10 分が経過したというリクエストをよく受けますが、今回は 10 分から視聴を開始したいと考えています。その後、再生ポイントをに設定する必要があります。今回も、 currentTime 属性は再生ポイントの設定に使用されます。再生ポイントが秒でない場合、設定値の単位は秒であることに注意してください。

//播放时间点更新时
myVideo.addEventListener("timeupdate", function(){
   var currentTime = myVideo.currentTime;//获取当前播放时间
   console.log(currentTime);//在调试器中打印
});

ログイン後にコピー

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

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

//设置播放点
function playBySeconds(num){ 
    myVideo.currentTime = num;
}

ログイン後にコピー

コントロールバーを使用してボリュームを変更すると、デバッガーに大量のデータがあることがわかります。なお、ボリュームの範囲値は 0 ～ 1 です。通常、UI ではパーセントが使用されるため、必要に応じて変換する必要があります。

音量は属性を変更することで設定できます。これは、音量が volume 属性で設定される点を除いて、再生時点と同様です

//音量改变时
myVideo.addEventListener("volumechange", function(){
   var volume = myVideo.volume;//获取当前音量
   console.log(volume);//在调试器中打印
});

ログイン後にコピー

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

//设置音量
function setVol(num){ 
   myVideo.volume = num;
}

ログイン後にコピー

要約: これら 4 つを通じて手順 html5 タグのビデオ (プレーヤー) の基本的な操作を理解します。これらの操作は主に JS を通じて実行され、ビデオイベントの監視とビデオ属性の読み書きが行われます。この 4 つのポイントを理解していれば、プレーヤーを柔軟に使用することができます。次に、アプリケーションシナリオに従って調整するだけです。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

HTML5 を使用する Canvasで三角形や四角形などの多角形を描く方法

H5新属性オーディオとビデオの制御解析について

以上がHTML5ビデオタグの再生制御の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。