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

この記事では、主にオーディオとビデオの詳細な制御、H5 の新しい属性 (推奨) を紹介します。これは一定の参考価値があり、興味のある学生はそれについて学ぶことができます。

この記事では、H5 の新しい属性であるオーディオとビデオの制御について次のように説明します。

1. オーディオ (音声)

<audio controls="controls">
<source src="这里面放入音频文件路径"></source>
</audio>

2. ビデオ (ビデオ)

 <video controls="controls" loop="loop" autoplay="autoplay" id="video">
<source src="这里面放入视频文件路径"></source>
</video>
<button>静音</button>
 <button>打开声音</button>
 <button>播放</button>
 <button>停止播放</button>
 <button>全屏</button>

以下はビデオファイルの制御です

javascript 抽出。

<script>
var myVideo=document.getElementById("video");
var btn=document.getElementById("button");
btn[0].click=function(){
    myVideo.muted=true;(是否静音：是)
}
btn[1].click=function(){
    myVideo.muted=true;(是否静音：否)
}
btn[2].click=function(){
    myVideo.play();(播放)
}
btn[3].click=function(){
    myVideo.pause();(停止播放)
} 
btn[4].click=function(){
    myVideo.webkitrequestFullscreen();(全屏显示)
}  
</script>

3. プログレスバーとビデオ再生時間

を同時に設定する方法。

写真に示すように:

まずここで話させてください

(1)、ビデオの合計時間(継続時間)を取得し、それを進行状況の最大値に割り当てる必要があります。 bar, progress.max=video.duration;

(2) 現在のビデオ再生の現在の時間位置 (currentTime) を取得し、それを現在のプログレス バーの長さ、progress.value=video に割り当てる必要があります。 currentTime;

その後、ビデオの再生中に、プログレスバーの値、ビデオの長さと現在の再生時間の位置を時間内に取得できることを確認する必要があります。

タイマー setInterval(pro, 100); を開く必要があります。つまり、適時性を確保するために、1 ミリ秒ごとにビデオの値を取得し、それを進行状況バーに割り当てます。

このようにして、進行状況バーをビデオと正確に同期させることができます。

4. フォーム要素の range 属性を使用してビデオの音量を制御する方法。

1. まず、ビデオの音量を制御するには、範囲の値を取得してビデオの音量に割り当てる必要があります

range.value を取得し、

それを割り当てます。ビデオの audio 属性に追加します: video .volume=range.value/100;

これで、範囲をドラッグするだけでビデオの音量を制御できるようになります。

次に、前のサウンドがオフになっているかどうかも判断する必要があります。この 2 つは独立したイベントであるため、ドラッグ イベントでミュートされているかどうかを判断し、ミュートを false に設定する必要があります。

最終的に実装されたコードは次のとおりです。

<input type="range" min="0" value="50" max="100" id="range" />
var ran=document.getElementById("range");

以上がこの記事の全内容であり、その他の関連コンテンツについては、 に注目してください。 PHPの中国語サイトです！

関連する推奨事項:

WeChatとアプリでHTML5ページの音声とビデオの自動再生を実現する方法

HTML5とjQueryで検索インテリジェントマッチング機能を実現

以上がH5新属性オーディオとビデオの制御解析についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。