目次 [1] HTML 要素 オーディオ ビデオ ソース [2] API メソッド 属性 イベント オーディオ 独自仕様 前の言葉 HTML5 では、開発者がどのタグにも依存する必要がないように、2 つの新しいメディア関連タグが追加されました。プラグイン。Web ページにクロスブラウザーのオーディオおよびビデオ コンテンツを埋め込みます。これらの 2 つのタグは と であり、IE8 ブラウザーではサポートされていません ビデオ ファイルを例に挙げると、次のものが含まれます。オーディオトラック、ビデオトラック、およびその他のメタデータ (カバー、タイトル、サブタイトル、サブタイトルなど) HTML 要素 これら 2 つの要素を使用するには、少なくともタグに src 属性を含めます。ブラウザがこれら 2 つのメディア要素をサポートしていない場合、開始タグと終了タグの間にあるものはすべてフォールバックとして表示されます autoplay 自动播放controls 显示控件loop 循环播放preload 音频在页面加载时进行加载，并预备播放(若使用autoplay,则忽略该属性)src 要播放的音频的URL ログイン後にコピー ログイン後にコピー <プレゼンテーションボックス>対応する属性値をクリックしてくださいデモを実行するには、以下をクリックしてください autoplay 自动播放controls 显示控件height 播放器高度width 播放器宽度loop 循环播放preload 视频在页面加载时进行加载，并预备播放(若使用autoplay,则忽略该属性)preload="none"//当页面加载后不载入视频preload="auto"//当页面加载后载入整个视频preload="meta"//当页面加载后只载入元数据src 要播放的视频的URLposter 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像 ログイン後にコピー ログイン後にコピー デモを実行するには、以下の対応する属性値をクリックしてください < source> と のメディア リソースを提供します media 规定媒体资源的类型(没有浏览器支持)src 规定媒体文件的URLtype 规定媒体资源的MIME类型ログイン後にコピー 一般的なタイプ Video[1]video/ogg [2]video/mp4 [3]video/webm Audio[1] ]audio/ogg [2]audio/mpeg と をタグに含めてください。ブラウザーがこれら 2 つのメディア要素をサポートしていない場合、開始タグと終了タグの間にあるものはすべてフォールバックとして表示されます。すべてのブラウザーがすべてのメディア形式をサポートしているわけではないため、いくつかの異なるメディア ソースを指定できます。これを行うには、タグ内で src 属性を指定する代わりに、1 つ以上の 要素を使用します。より良い解決策は、代替コンテンツを用意することです video player not available.ログイン後にコピー audio player not available.ログイン後にコピー API HTML5 DOM は、 要素と 要素のメソッド、プロパティ、およびイベントを提供します(1 )canPlayType () ブラウザが指定されたオーディオまたはビデオの種類を再生できるかどうかを検出します。戻り値は次のいずれかです: video player not available.ログイン後にコピー audio player not available.ログイン後にコピー ログイン後にコピー (2)load() オーディオまたはビデオをリロードするsrc ソースまたはその他の設定を変更した後にオーディオまたはビデオ要素を更新するために使用される要素 ログイン後にコピー (3)play() オーディオまたはビデオの再生を開始します (4)pause() 現在の再生を一時停止します オーディオ またはvideo 'probable':浏览器最可能支持该类型'maybe':浏览器也许支持该类型'':浏览器不支持该类型ログイン後にコピー 下の対応する属性値をクリックしてデモを行ってください Attributes [注] すべての属性のうち、videoWidth と videoHeight のみがすぐに使用可能になります。ビデオのメタデータが読み込まれています <読み取り専用> (1)buffered //常用值video/oggvideo/mp4video/webmaudio/mpegaudio/oggaudio/mp4video/ogg;codecs="theora,vorbis"video/mp4;codecs="avc1.4D401E,mp4a.40.2"video/webm;codecs="vp8.0,vorbis"audio/ogg;codecs="vorbis"audio/mp4;codecs="mp4a.40.5"ログイン後にコピー var audio = document.getElementById('audio');//probablyconsole.log(audio.canPlayType('video/ogg;codecs="theora,vorbis"'));ログイン後にコピー (2)currentSrc 現在のオーディオまたはビデオの URL を返します りー(3 )ended オーディオまたはビデオが終了したかどうかを返します var audio = document.getElementById('audio'); audio.src = 'myocean.mp3'; audio.load();ログイン後にコピー (4)duration 現在のオーディオまたはビデオの長さを秒単位で返します。設定されていない場合は、NaNを返します 播放暂停 ログイン後にコピー (5) )networkState オーディオまたはビデオの現在のネットワークステータスを返します buffered.length//获取已缓冲范围的数量buffered.start(index)//获取某个已缓冲范围的开始位置buffered.end(index)//获取某个已缓冲范围的结束位置buffered.end(0)//获取当前已缓冲的秒数ログイン後にコピー 获取缓冲时间var oBtn = document.getElementsByTagName('button')[0];oBtn.onclick = function(){ alert(audio.buffered.end(0));} ログイン後にコピー (6)paused オーディオまたはビデオが一時停止されているかどうかを返します var audio = document.getElementById('audio');//http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3setInterval(function(){ console.log(audio.currentSrc); },1000); ログイン後にコピー document.onclick = function(){ console.log(audio.ended);} ログイン後にコピー (7)再生しました 再生範囲とは、音声または映像の時間範囲を指します。ユーザーがオーディオまたはビデオにジャンプすると、複数の再生範囲が得られます //NaNconsole.log(audio.duration);//317.022041setTimeout(function(){ console.log(audio.duration);},1000);</pre><div class="contentsignin">ログイン後にコピー</div></div> </p> <p class="sycode"> [注] 最初の再生範囲の添字は 0 です</p> <p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui">networkState:0(尚未初始化)networkState:1(已选取资源，但并未使用网络)networkState:2(正在下载数据)networkState:3(未找到资源来源)</pre><div class="contentsignin">ログイン後にコピー</div></div> </p> <p>(8)readyState</p> <p> 返回音频或视频的当前就绪状态</p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui">readyState:0(没有关于音频或视频是否就绪的信息)readyState:1(关于音频或视频就绪的元数据)readyState:2(关于当前播放位置的数据是可用的，但没有足够的数据来播放下一帧)readyState:3(当前及至少下一帧的数据是可用的)readyState:4(可用数据足以开始播放)</pre><div class="contentsignin">ログイン後にコピー</div></div> </p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui"><audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio><script>//0console.log(audio.readyState);//4document.onclick = function(){ console.log(audio.readyState);} ログイン後にコピー (9)seekable 返回可寻址范围，可寻址范围是指用户在视频或音频中可寻址(移动播放位置)的时间范围。对于流视频，通常可以寻址到视频中的任何位置，即使其尚未完成缓冲 seekable.length(获得音频或视频中可寻址范围的数量)seekable.start(index)(获得可寻址范围的开始位置)seekable.end(index)(获得可寻址范围的结束位置)ログイン後にコピー document.onclick = function(){ console.log(audio.seekable.end(0));}ログイン後にコピー (10)seeking seeking:true(用户正在寻址)seeking:false(用户没有在寻址)ログイン後にコピー audio.onseeking = function(){ console.log(audio.seeking); } ログイン後にコピー <可读写> (1)autoplay autoplay:false(默认，不自动播放)autoplay:true(自动播放)ログイン後にコピー (2)controls controls:false(默认，不显示控件)controls:true(显示控件)ログイン後にコピー (3)crossOrigin 设置或返回CORS设置 (4)currentTime 设置或返回音频或视频的当前位置(以秒计) var audio = document.getElementById('audio');document.onclick = function(){ console.log(audio.currentTime); audio.currentTime = 5; console.log(audio.currentTime);}; ログイン後にコピー (5)defaultMuted(只有chrome支持) defaultMuted:true(初始静音)defaultMuted:false(默认，初始不静音)ログイン後にコピー audio.defaultMuted = true;ログイン後にコピー (6)muted muted:true(静音)muted:false(不静音)ログイン後にコピー 音量开关ログイン後にコピー (7)defaultPlaybackRate defaultPlaybackRate:1(正常速度)defaultPlaybackRate:0.5(半速)defaultPlaybackRate:2(倍速)defaultPlaybackRate:-1(向后正常速度)defaultPlaybackRate:-0.5(向后半速)ログイン後にコピー var audio = document.getElementById('audio');setTimeout(function(){ audio.defaultPlaybackRate = 0.5; audio.load(); },1000);ログイン後にコピー (8)playbackRate playbackRate:1(正常速度)playbackRate:0.5(半速)playbackRate:2(倍速)playbackRate:-1(向后正常速度)playbackRate:-0.5(向后半速)ログイン後にコピー var array = [-1,-0.5,0.5,1,2];var i = 0;var audio = document.getElementById('audio');document.onclick = function(){ audio.playbackRate = array[i]; console.log(audio.playbackRate); i++; i=i%5;}</pre><div class="contentsignin">ログイン後にコピー</div></div> </p> <p>(9)loop</p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui">loop:true(循环播放)loop:false(默认，不循环播放)</pre><div class="contentsignin">ログイン後にコピー</div></div> </p> <p>(10)preload</p> <p> 设置或返回是否在页面加载后立即加载音频或视频</p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui">preload:auto;(一旦页面加载，则开始加载音频或视频)preload:metadata;(当页面加载后仅加载音频或视频的元数据)preload:none;(页面加载后不加载音频或视频)</pre><div class="contentsignin">ログイン後にコピー</div></div> </p> <p> [注意]当设置autoplay时，该属性无效</p> <p>(11)src</p> <p> 设置或返回音频或视频的当前来源</p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui"><audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio><script>console.log(audio.src);document.onclick = function(){ console.log(audio.src); audio.src = 'http://7xpdkf.com1.z0.glb.clouddn.com/song.mp3'; audio.load(); console.log(audio.src);} ログイン後にコピー (12)volume 设置或返回音频或视频的当前音量 volume(取得为0-1，0为静音，1为最大，默认为1) ログイン後にコピー 增大音量减小音量ログイン後にコピー 事件 当音频或视频正在加载过程中，会依次发生以下事件： loadstart:提示浏览器开始寻找指定的音频或视频progress:提示浏览器正在下载指定的音频或视频durationchange:提示音频或视频的时长已改变loadedmetadata:提示音频或视频的元数据已加载loadeddata:提示音频或视频的当前帧已加载，但没有足够数据播放下一帧canplay:提示浏览器能够开始播放指定的音频或视频canplaythrough:提示音频或视频能够不停顿地一直播放progress:提示浏览器正在下载指定的音频或视频ログイン後にコピー audio.onloadstart = function(){ console.log('loadstart');}audio.ondurationchange = function(){ console.log('durationchange');} audio.onloadedmetadata = function(){ console.log('loadedmetadata');} audio.onloadeddata = function(){ console.log('loadeddata');} audio.onprogress = function(){ console.log('progress');} audio.oncanplay = function(){ console.log('canplay');} audio.oncanplaythrough = function(){ console.log('canplaythrough');} ログイン後にコピー 影响音频或视频数据加载的事件有以下几个： abort:在音频或视频终止加载时触发error:在音频或视频加载发生错误时触发stalled:在浏览器尝试获取媒体数据，但数据不可用时触发suspend:在音频或视频数据被阻止加载时触发(可以是完成加载后触发，或者因为被暂停)empted:在发生故障并且文件突然不可用时触发ログイン後にコピー setTimeout(function(){ video.src='';},2000); video.onabort = function(){ console.log('abort');}video.onerror = function(){ console.log('error');} video.onstalled = function(){ console.log('stalled');} video.onsuspend = function(){ console.log('suspend');} video.onemptied = function(){ console.log('emptied');}ログイン後にコピー 音频或视频控制按钮发生改变时触发以下事件: play:音频或视频文件已经就绪可以开始播放时触发playing:音频或视频已开始播放时触发ended:音频或视频文件播放完毕后触发pause:音频或视频文件暂停时触发ratechange:播放速度改变进触发seeked:指示定位已结束时触发seeking:正在进行指示定位时触发timeupdate:播放位置改变时触发[注意:播放和调整指示定位时都会触发]volumechange:音量改变时触发waiting:需要缓冲下一帧而停止时触发ログイン後にコピー var i = 1;document.onclick = function(){ i+=0.1; audio.playbackRate = i;}audio.onended = function(){ console.log('ended');}audio.onpause = function(){ console.log('pause');} audio.onplay = function(){ console.log('play');} audio.onplaying = function(){ console.log('playing');} audio.onratechange = function(){ console.log('ratechange');} audio.onseeked = function(){ console.log('seeked');} audio.onseeking = function(){ console.log('seeking');} audio.ontimeupdate = function(){ console.log('timeupdate');} audio.onvolumechange = function(){ console.log('volumechange');} audio.onwaiting = function(){ console.log('waiting');} ログイン後にコピー audio专有 元素在一个原生的javascript构造函数Audio，可以在任何时候播放音频。Audio和Image很像，但Audio不用像Image那样必须插入到文档中，只要创建一个新实例，并传入音频源文件即可 var audio = new Audio('test.mp3'); ログイン後にコピー var audio = new Audio('http://7xpdkf.com1.z0.glb.clouddn.com/honey.mp3');audio.oncanplaythrough = function(){ audio.controls = true; document.body.appendChild(audio);}ログイン後にコピー
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
