HTML5ビデオタグの操作動画を詳しく解説-htmlチュートリアル-php.cn

HTML5ビデオタグの操作動画を詳しく解説

php中世界最好的语言

リリース： 2018-04-19 16:52:48

オリジナル

4049 人が閲覧しました

今回は、HTML5ビデオタグの操作ビデオの詳細な説明をお届けします。HTML5ビデオタグ操作ビデオの注意事項は何ですか。以下は実際のケースです。見てみましょう。

現在のウェブサイト制作の研究において、各界の人々が利用を止めずに継続的に研究を続けている中でも、HTML5の利用はまだ多くの人が利用していない大きな進歩だと思います。 HTML5の再生制御方法をご存知の方は、この記事で再生制御の具体的な方法を紹介しますので、興味のある方は一緒に学んでいきましょう。

この記事の内容:

1. 動画の合計時間を取得します

2. 再生、一時停止

3. 動画の再生時間を取得し、再生ポイントを設定します

4. ボリュームの取得と設定

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

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

コードをコピー

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

ID を設定した後、操作を開始できます。合計時間を取得するには、ビデオのイベント -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つです

コードをコピー

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

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 メソッドを実行すると、最初から再生が開始されることに注意してください。

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

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

が使用されます。コードをコピー

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

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

ログイン後にコピー

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

「最後に視聴してから 10 分が経過しました」というリクエストがよくありますが、今回は 10 分から再生ポイントを設定する必要があります。再生ポイントを設定します。 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);//在调试器中打印
})；

ログイン後にコピー

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




Video step2




<script>
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();
}</p> <p>//播放时间点更新时
myVideo.addEventListener(&quot;timeupdate&quot;, function(){
var currentTime = myVideo.currentTime;//获取当前播放时间
console.log(currentTime);//在调试器中打印
});</p> <p>//设置播放点
function playBySeconds(num){ 
myVideo.currentTime = num;
}</p> <p>//音量改变时
myVideo.addEventListener("volumechange", function(){
var volume = myVideo.volume;//获取当前音量
console.log(volume);//在调试器中打印
});</p> <p>//设置音量
function setVol(num){ 
myVideo.volume = num;
}
</script>