HTML5 が登場する前は、オンライン オーディオとビデオは Flash またはサードパーティ ツールの助けを借りて実現されていましたが、現在 HTML5 ではこの機能もサポートされています。 HTML5 をサポートするブラウザでは、プラグインをインストールせずに音声とビデオを再生できます。オーディオとビデオのネイティブ サポートにより、HTML5 に大きな開発の可能性が注入されます。
HTML への音声埋め込み（従来の方法）：この方法は実装可能ですが、ブラウザが Flash をサポートしている必要があり、制御できないため、実装は非常に面倒です。
<object height=200 width=200 data=2_1.swf ></object><embed src=2_1.mp4 type=>
つまり、HTML5 には互換性という大きな問題があるということになります。オーディオ
HTML5 でサポートされている音声形式:ビデオビデオ形式:
上記のことから、HTML5 はいくつかの形式をサポートしていることがわかります。そのため、HTML5 を使用しているときに音声とビデオが表示されない場合は、その形式がサポートされていないことが問題になるはずです。注: MP4 には、mpg4(xdiv)、mpg4(xvid)、avc(h264) の 3 つのエンコーディングがあります。h264 のみが MP4 標準エンコーディングとして認識されます (私もここで騙されました。他の形式は音声のみで画像はありません)。このような問題が発生した場合は、ビデオ形式コンバーターを使用して形式を変換するだけで問題ありません。
オーディオの実装は非常に簡単です。ここでのツールバーはブラウザのデフォルトのツールバーを使用します。
<audio src=htmls/1.mp3controls=controlsloop=loop preload=auto >お使いのブラウザは video 要素をサポートしていません</audio>
動画ではブラウザのデフォルトを使用できますが、個人的なカスタマイズはできないため、技術的な観点から見ると、機能を実装する独自のツールを作成する方法を学ぶ必要があります（音声でもこの方法を参照できます）。
オーディオビデオ.html
<!DOCTYPE html><html><head><meta charset=UTF-8><title>Web ページにビデオを配置する</title><style type=text/css></style><script type=text/javascript src= js/ControlBar.js></script></head><body><audio src=htmls/1.mp3 コントロール=コントロール ループ=ループ プリロード=自動>お使いのブラウザは video 要素をサポートしていません</audio><video id=myPlayer width=600 height=400 src=htmls/2_1.mp4 Controls=controls loop=loopposter=3.jpg>お使いのブラウザは audio 要素をサポートしていません<!-- MP4 には、mpg4(xdiv)、mpg4(xvid)、avc(h264)、の 3 つのエンコーディングがあります。 h264 のみが認識される MP4 標準エンコーディングです --></video><div id=progress></div><!-- ボリューム コントロール --><input id=volume type=range min=0 max=1 step = 0.1 onchange=Volume(this)><!-- レートと時間の進行情報--><span id=rate>1</span>fps <span id=info></span><button onclick=Play(this) id=btn1>再生</button><button onclick=Fast()>早送り</button><button onclick=Slow()>遅送り</button><button onclick=Prev() >戻る</button><button onclick=Next()>進む</button><button onclick=Muted(this)>ミュート</button></body></html>
表示(html)と機能実装(js)を分離し、外部からインポートします。
コントロールバー.js
//スクリプトを使用してブラウザ タグのサポートを検出します var support = !!document.createElement(audio).canPlayType;if (!support) {alert(お使いのブラウザはこのビデオの再生をサポートしていません);}//グローバル Video オブジェクトを定義しますvar e1 = null;window.addEventListener(load, function() {e1 = document.getElementById(myPlayer);});/*転送: 1 分*/function Next() {e1.currentTime+=10; //currentTime プロパティを設定し、10 秒早送りします}/*巻き戻し: 1 分*/function Prev() {e1.currentTime-=10; //currentTime プロパティを設定し、10 秒戻します}/ *再生/一時停止*/機能再生(e) {if(e1.paused){e1.play();document.getElementById(btn1).innerHTML=pause}else{e1.pause();document.getElementById(btn1).innerHTML=play}}/*スローフォワード: 1 以下の場合は、毎回 0.2 ずつ遅くなります。1 より大きい場合は、毎回 1 ずつ減少します。 Slow(){if(e1.playbackRate<=1){e1.playbackRate-=0.2;}else{e1.playbackRate-=1;}document.getElementById(rate).innerHTML=fps2fps(e1.playbackRate);}/ *スローフォワード: 1 以下の場合、毎回 0.2 だけ遅くなります。1 より大きい場合、毎回 1 ずつ減少します。 Fast(){if(e1.playbackRate<1){e1.playbackRate+=0.2;}else{e1.playbackRate+=1;}document.getElementById(rate).innerHTML=fps2fps(e1.playbackRate);}関数 fps2fps(fps ){if(fps<1){return fps.toFixed(1);}else{return fps;}}/*ミュート*/function Muted(e){if(e1.muted){e1.muted=false;e.innerHRML=X;document.getElementById(volume).value=e1.volume;}else{e1.muted=true;e.innerHRML= x;document.getElementById(volume).value=0;}}/*音量を調整*/function Volume(e){if(e1.muted==true){e1.muted=false;}e1.volume=e.value;}/* 進行状況情報: 進行状況バーを制御し、進行状況を表示します*/function Progress( ) {var p1=document.getElementById(progress);p1.style.width=(e1.currentTime/e1.duration)*720+px;document.getElementById(info).innerHTML=s2time(e1.currentTime)+/+s2time(e1 .duration);}関数 s2time(s){var m=parseFloat(s/60).toFixed(0);s=parseFloat(s%60).toFixed(0);return (m<10? 0+m:m)+:+(s<10?0+ s:s);}/* Web ページが読み込まれたら、ビデオ オブジェクトの timeupdate イベントに進行状況処理関数を追加します*/window.addEventListener(load,function(){e1.addEventListener(timeupdate,Progress);});/*進行状況をwindow.onload イベント処理関数 */window.addEventListener(load,Progress);実装された機能: 再生、一時停止、早送り、スロー送り、早送り、巻き戻し、音量調節、プログレスバー、時間表示。オーディオまたはビデオのプロパティとメソッドを通じて、より複雑な機能を実現できることがわかります。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。