実際のフロントエンド開発への行き方：HTML5のビデオとオーディオ

理論的には、HTML5の<オーディオ>と<映像>要素を導入し、単純に<IMG>要素を使用します。HTMLドキュメントにオーディオとビデオを埋め込む（フラッシュのような）プラグインの必要性を排除するHTML5ブラウザのサポート：

<audio src="background_music.mp3"'>
<video src="news.mov" width=320 height=240>

実際には、これらの要素を使用している場合は、より巧妙であることを。様々なブラウザのメーカーのためには、<ソース>要素には、メディアソースの異なるフォーマットを指定するために使用されて使用することが多いので、オーディオとビデオのエンコーディングをサポートするための標準に同意する必要が失敗しました：

<audio id="music">
    <source src="music.mp3" type="audio/mpeg">
    <source src="music.ogg" type='audio/ogg;codec="vorbis"'>
</audio>

人気のメディアイベント
<オーディオ>と<映像>要素は、（最も重要な方法の遊びである）と、メディアの開始を制御し、メディアの再生を一時停止するために使用されている（）メソッドを、一時停止します。
例えばオーディオ、：

<audio id="music">
    <source src="music.mp3" type="audio/mpeg">
    <source src="music.ogg" type='audio/ogg;codec="vorbis"'>
</audio>
let audio = document.getElementById('music')
//开始播放音频
audio.play()
//暂停播放音频
audio.pause()
    //监听暂停播放事件
    audio.addEventListener('pause', function (e) {
    console.log('暂停播放啦')
 })
//监听开始播放事件
audio.addEventListener('pause', function (e) {
    console.log('开始播放啦')
})
//监听媒体数据已经加载完成事件
audio.addEventListener('loadedmetadata', function (e) {
    console.log('音频时长：'+e.target.duration）
});
//监听currentTime属性发生改变了
audio.addEventListener('timeupdate', function (e) {
    console.log('剩余播放时长：'+（e.target.duration - e.target.currentTime)）
}, false);   
audio.addEventListener('ended', function (e) {
    console.log('播放完成啦')
}, false);

一般的なメディア属性
CURRENTTIMEを：この属性は、プレイヤーが（秒）スキップ時間を果たすべき指定する
（ミュート）0〜1（最大音量）の間で、この属性は、再生音量を示しています。ボリュームが
ミュート：この属性は、あるかどうかを示しますサイレントモードに設定します。それはサイレントモードに入りますtrueの場合、偽の前に指定されている場合は再生を続行するには、ボリュームを復元します。
playbackRate：この属性は、メディアの再生速度を指定するために使用されます。1.0 1より大きい場合、それは0と1の間の値を示す、「早送り」を示し、通常の速さを表す「遅いです」。
コントロール：この属性は、ブラウザで再生コントロールを表示するかどうかを指定します。trueの場合、コントロールを表示する場合は、それ以外のコントロールを隠されました。
ループ：このプロパティは、メディアがループ再生に必要かどうかを指定します。真は、ループの必要性を表明した場合は、逆にそれが最後の停止にプレーすることを意味します。
proload：ユーザーが事前に負荷をする必要があるかどうか、どのくらいのメディアコンテンツ、メディアの再生を開始する前にこの属性を指定します。

“none”：表示不需要预加载数据
“metadata”：表示诸如时长、比特率、帧大小这样的元数据需要加载。（浏览器默认加载这些数据。）
“auto”：浏览器应当预加载它认为适量的媒体内容

自動再生：この属性は、十分には、メディアコンテンツをキャッシュされたときに自動的に再生を開始するかどうかを指定します。プロパティがtrueに設定されている、あなたは、メディアコンテンツのニーズをプリロードするブラウザを言っています。

一般的なメディア状態

期間：このプロパティは、秒単位で、メディアの長さを指定
果たし：このプロパティは、一定の期間が果たしてきましたが返されます。
バッファリング：このプロパティは、現在の期間がバッファリングされている返します。
シーク：このプロパティは、プレイヤーにジャンプするのに必要な電流の時間を返します。
バッファリングされ、演奏、timeRangeはオブジェクトがシーク可能です。各オブジェクトはlengthプロパティを有し、開始（）と現在の期間を返し端（）メソッドは、現在の期間を表す前者は、時刻を開始し、時間の終点（両方秒）。
readyStateのは：このプロパティは、即応の現在の状態のオーディオ/ビデオを返します。

定数	値	説明
何もありません	0	オーディオ/ビデオについての情報はありませんすることは準備ができています
HAVE_METADATA	1	オーディオ/ビデオの初期化
HAVE_CURRENT_DATA	2	データはすでに再生（現在の位置をロードされている）が、次のフレームのコンテンツデータを再生することはできません
HAVE_FUTURE_DATA	3	電流および少なくともデータの次のフレームが利用可能である（データすなわち少なくとも二つのフレーム）
HAVE_ENOUGH_DATA	4	速度が保証されている場合は、ビデオが最後に演奏されている可能性 - 使用可能なデータは、再生を開始するのに十分です

networkState：物件取得は、Web上のメディアの現在の状態を表します

定数	値	説明
NETWORK_EMPTY	0	データなし。そして、readyStateのがHAVE_NOTHINGされます。
NETWORK_IDLE	1	HTMLMediaElementは有効で、リソースを選択しました,,が、ネットワークを使用していません。
NETWORK_LOADING	2	HTMLMediaElementブラウザは、データをダウンロードしています。
NETWORK_NO_SOURCE	3	私はHTMLMediaElement srcを見つけることができませんでした。

エラー：説明ロードメディアプレーヤーやメディアエラー処理。エラーがヌルと比較して、発生しない場合、逆に、オブジェクトがエラーコード配列を記述する属性が含まれていました。同時に、オブジェクトのエラーの説明も可能エラーコード定数の数を定義します。

定数	値	説明
MEDIA_ERR_ABORTED	1	メディアコンテンツのロードを停止するには、ユーザーの要件ブラウザ
MEDIA_ERR_NETWORK	2	メディアが正しく入力するが、エラーが発生したネットワークは、ロードに失敗しました
MEDIA_ERR_DECODE	3	メディアの種類は正しいですが、コーディングエラーのためには、適切にデコードして再生することはできません
MEDIA_ERR__NOT_SUPPORTED	4	サポートされていないメディアファイルブラウザのsrc属性で指定された再生することはできません

誰もがあなたが乱雑フルスタックエンジニアによるフロントエンドエンジニア、さらには道になるため大量のリソースを共有するために、簡単で効率的かつ無料の学習に役立つために。私たちは、フロントエンドのフルスタック学習バックルqunをお勧めするためにここにいる：784783012は、交流と共通の進捗状況を学習し、×××議論に流入へようこそ。
学習の本当の始まりは、必然的に開始する場所がわからないだろう場合は、非効率につながる学習を継続する自信に影響を与えます。
しかし、最も重要なことは、私がキーテクノロジーを習得する必要があるかわからないで、頻繁に、ピット学習を強化多くの時間を無駄に終わる、それが効果的か、必要な資源です。

実際のフロントエンド開発への行き方：HTML5のビデオとオーディオ

おすすめ