この記事では、H5 New属性オーディオオーディオとビデオのビデオの制御を示しています。
1。オーディオ（オーディオ）<udio controls = controls> <source src =オーディオファイルパスをITに配置> </source> </audio>2。ビデオ（ビデオ）
<ビデオコントロール=コントロールループ=ループオートプレイ= autoplay = autoplay id = video> <source src =ビデオファイルパスを入れます> </source> </video> <button> </button> on> sound < /button> <butth>再生</button> <butth>再生を停止</button> <butth>フルスクリーン</button>
以下はビデオファイルの制御です。
JavaScriptリード。
<Script> document.getElementById（ビデオ）; 1] .click = function（）{myvideo.muted = true; ;（再生を停止）} btn [4] = function（）{myvide.webkitrequestfulscreen（）} </script> 3。進捗状況の再生時間とビデオの再生時間を設定する方法同期。
図に示されているように：
まずここでそれについて話させてください
（1）、ビデオのビデオの総長さの最大値は、進行状況バーへのビデオ、Progress.max = video.duration;
（2）、現在の進行状況バーの長さまでの現在のビデオ再生の現在の位置の長さを取得する必要があります。
その後、ビデオの再生中に、進行状況バーの価値がビデオの持続時間と現在の再生時間のポジションを時間内に取得できるようにする必要があります。
タイマーを開く必要があります（Pro、100）; ::これは、タイムリーを確保するために、ビデオの値が1 millisecondでProgress Progress Barに割り当てられることを意味します。
このようにして、プログレスバーをビデオと正確に同期させることができます。
4.テーブル要素の範囲属性を使用してビデオのボリュームを制御する方法。1.まず、範囲の値値とビデオに与えられたボリュームを取得して、ビデオのボリュームを制御する必要があります。
<入力型=範囲min = 0値= 50 max = 100 id = range /> var ran = document.getElementById（range）;
range.valueを取得します、
ビデオに割り当てられたオーディオ属性：video.volume = range.value/100;
この時点で、単に範囲をドラッグしてビデオを制御するボリューム。
したがって、2つは独立したイベントであるため、音を閉じる必要があります。
最終コードは次のとおりです。
<！doctype html> <html> <body> <video controls = controls width = 400px> <source src = img/1.mp4> </video> <button = enablemute（）type =ボタン> close sound </button> <button onclick = disablemute（）type = button> sound </button> <button onclick = playvid（）inty = button> button> button> <button onclick = pauvid（）type = button> passing video </button> <button onclick = showfull（）type = button>フル画面</button> <span>進行状況：</span> <進行値= 0 max = 0 id = pro> </進行> <span> volume：</span> <入力タイプ=範囲min = 0 max = 100 value = 50 onchange = setValue（）id = ran/> </div> <script> var btn = document.getelementsbytagname（ボタン） var myvideo.getelementbyid（virace）; ] disabled = true; disabled = false;} } //ビデオ関数PlayVid（）{myvideo.play（）; funch setValue（）{）{）myvideo.volume = ran.value.muted = false;} </body> </html>上記は、この記事のすべての内容です。