JS 音/视频
HTML5 DOM为<audio>和<video>元素提供了方法、属性和事件。
[ 方法 ]
01. canPlayType() 检测浏览器是否能播放指定的音频或视频类型，返回值为下列之一：
'probable':浏览器最可能支持该类型
'maybe':浏览器也许支持该类型
'':浏览器不支持该类型
|
1 2 3 4 5 6 7 8 9 10 11 12 |
常用值 video/ogg video/mp4 video/webm audio/mpeg audio/ogg audio/mp4 video/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" |
|
1 2 3 4 5 6 |
<audio id="audio" src="song.mp3"></audio> <script> var audio = document.getElementById('audio'); //probably console.log(audio.canPlayType('video/ogg;codecs="theora,vorbis"')); </script> |
02. load() 重新加载音频或视频元素，用于在更改src来源或其他设置后对音频或视频元素进行更新。
|
1 2 3 4 5 6 |
<audio id="audio" src="song.mp3" autoplay controls></audio> <script> var audio = document.getElementById('audio'); audio.src = 'myocean.mp3'; audio.load(); </script> |
03. play() 开始播放音频或视频。
04. pause() 暂停当前播放的音频或视频。
|
1 2 3 |
<button onclick = 'audio.play();'>播放</button> <button onclick = 'audio.pause();'>暂停</button> <audio id="audio" src="myocean.mp3" controls></audio> |
[ 属性 ]
所有属性中，只有videoWidth和videoHeight是立即可用的，在音视频的元数据加载后，其他属性才可用。
[1] 只读
01. buffered
|
1 2 3 4 |
buffered.length 获取已缓冲范围的数量 buffered.start(index) 获取某个已缓冲范围的开始位置 buffered.end(index) 获取某个已缓冲范围的结束位置 buffered.end(0) 获取当前已缓冲的秒数 |
|
1 2 3 4 5 6 7 8 |
<button>获取缓冲时间</button> <audio id="audio" src="https://webpiece.cn/myocean.mp3" controls></audio> <script> var oBtn = document.getElementsByTagName('button')[0]; oBtn.onclick = function(){ alert(audio.buffered.end(0)); } </script> |
02. currentSrc 返回当前音频或视频的URL。
|
1 2 3 4 5 6 7 8 |
<audio id="audio" src="https://demo.xiaohuochai.site/myocean.mp3" controls></audio> <script> var audio = document.getElementById('audio'); //https://demo.xiaohuochai.site/myocean.mp3 setInterval(function(){ console.log(audio.currentSrc); },1000); </script> |
03. ended 返回音频或视频是否已结束。
|
1 2 3 4 5 6 |
<audio id="audio" src="https://webpiece.cn/myocean.mp3" controls></audio> <script> document.onclick = function(){ console.log(audio.ended); } </script> |
04. duration 返回当前音频或视频的长度(以秒计)，如果未设置则返回NaN。
|
1 2 3 4 5 6 7 8 |
<audio id="audio" src="https://webpiece.cn/myocean.mp3" controls></audio> <script> //NaN console.log(audio.duration); //317.022041 setTimeout(function(){ console.log(audio.duration); },1000); |
05. networkState 返回音频或视频当前网络状态。
|
1 2 3 4 |
networkState:0(尚未初始化) networkState:1(已选取资源，但并未使用网络) networkState:2(正在下载数据) networkState:3(未找到资源来源) |
|
1 2 3 4 5 6 7 8 9 |
<audio id="audio" src="https://webpiece.cn/myocean.mp3" controls></audio> <script> //3 console.log(audio.networkState) //1 document.onclick = function(){ console.log(audio.networkState); } </script> |
06. paused 返回音频或视频是否已暂停。
|
1 2 |
paused:true;(已暂停) paused:false;(未暂停) |
|
1 2 3 4 5 6 7 |
<audio id="audio" src="https://webpiece.cn/myocean.mp3" controls></audio> <script> console.log(audio.paused) document.onclick = function(){ console.log(audio.paused); } </script> |
07. played 已播范围是指音频或视频的时间范围。如果用户在音频或视频中跳跃，会获得多个播放范围。
|
1 2 3 |
played.length(获得音频或视频已播放范围的数量) played.start(index)(获得某个已播范围的开始位置) played.end(index)(获得某个已播范围的结束位置) |
// 首段已播范围的下标是0
|
1 2 3 4 5 6 |
<audio id="audio" src="https://webpiece.cn/myocean.mp3" controls></audio> <script> document.onclick = function(){ console.log(audio.played.end(0)); } </script> |
08. readyState 返回音频或视频的当前就绪状态。
|
1 2 3 4 5 |
readyState:0(没有关于音频或视频是否就绪的信息) readyState:1(关于音频或视频就绪的元数据) readyState:2(关于当前播放位置的数据是可用的，但没有足够的数据来播放下一帧) readyState:3(当前及至少下一帧的数据是可用的) readyState:4(可用数据足以开始播放) |
|
1 2 3 4 5 6 7 8 9 |
<audio id="audio" src="https://webpiece.cn/myocean.mp3" controls></audio> <script> //0 console.log(audio.readyState); //4 document.onclick = function(){ console.log(audio.readyState); } </script> |
09. seekable 返回可寻址范围，可寻址范围是指用户在视频或音频中可寻址(移动播放位置)的时间范围。
对于流视频，通常可以寻址到视频中的任何位置，即使其尚未完成缓冲。
|
1 2 3 |
seekable.length(获得音频或视频中可寻址范围的数量) seekable.start(index)(获得可寻址范围的开始位置) seekable.end(index)(获得可寻址范围的结束位置) |
|
1 2 3 4 5 6 |
<audio id="audio" src="https://webpiece.cn/myocean.mp3" controls></audio> <script> document.onclick = function(){ console.log(audio.seekable.end(0)); } </script> |
10. seeking
|
1 2 |
seeking:true(用户正在寻址) seeking:false(用户没有在寻址) |
|
1 2 3 4 5 6 |
<audio id="audio" src="https://webpiece.cn/myocean.mp3" controls></audio> <script> audio.onseeking = function(){ console.log(audio.seeking); } </script> |
[2] 可读写
01. autoplay
|
1 2 |
autoplay:false(默认，不自动播放) autoplay:true(自动播放) |
02. controls
|
1 2 |
controls:false(默认，不显示控件) controls:true(显示控件) |
03. crossOrigin 设置或返回CORS设置。
04. currentTime 设置或返回音频或视频的当前位置(以秒计)。
|
1 2 3 4 5 6 7 8 9 |
<audio id="audio" src="https://webpiece.cn/myocean.mp3" controls></audio> <script> var audio = document.getElementById('audio'); document.onclick = function(){ console.log(audio.currentTime); audio.currentTime = 5; console.log(audio.currentTime); }; </script> |
05. defaultMuted（只有chrome支持）
|
1 2 |
defaultMuted:true(初始静音) defaultMuted:false(默认，初始不静音) |
|
1 |
audio.defaultMuted = true; |
06. muted
|
1 2 |
muted:true(静音) muted:false(不静音) |
|
1 2 |
<button onclick="audio.muted = !audio.muted">音量开关</button> <audio id="audio" src="https://webpiece.cn/myocean.mp3" controls></audio> |
07. defaultPlaybackRate
|
1 2 3 4 5 |
defaultPlaybackRate:1(正常速度) defaultPlaybackRate:0.5(半速) defaultPlaybackRate:2(倍速) defaultPlaybackRate:-1(向后正常速度) defaultPlaybackRate:-0.5(向后半速) |
|
1 2 3 4 5 |
var audio = document.getElementById('audio'); setTimeout(function(){ audio.defaultPlaybackRate = 0.5; audio.load(); },1000); |
08. playbackRate
|
1 2 3 4 5 |
playbackRate:1(正常速度) playbackRate:0.5(半速) playbackRate:2(倍速) playbackRate:-1(向后正常速度) playbackRate:-0.5(向后半速) |
|
1 2 3 4 5 6 7 8 9 10 11 |
<audio id="audio" src="https://webpiece.cn/myocean.mp3" controls></audio> <script> 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; } |
09. loop
|
1 2 |
loop:true(循环播放) loop:false(默认，不循环播放) |
10. preload 设置或返回是否在页面加载后立即加载音频或视频。 // 另，当设置autoplay时，该属性无效。
|
1 2 3 |
preload:auto;(一旦页面加载，则开始加载音频或视频) preload:metadata;(当页面加载后仅加载音频或视频的元数据) preload:none;(页面加载后不加载音频或视频) |
11. src 设置或返回音频或视频的当前来源。
|
1 2 3 4 5 6 7 8 9 10 |
<audio id="audio" src="https://webpiece.cn/myocean.mp3" controls></audio> <script> console.log(audio.src); document.onclick = function(){ console.log(audio.src); audio.src = 'https://demo.xiaohuochai.site/song.mp3'; audio.load(); console.log(audio.src); } </script> |
12. volume 设置或返回音频或视频的当前音量。
|
1 |
volume(取得为0-1，0为静音，1为最大，默认为1) |
|
1 2 3 |
<button onclick = "if(audio.volume<=0.9)audio.volume+=0.1;">增大音量</button> <button onclick = "if(audio.volume>=0.1)audio.volume-=0.1;">减小音量</button> <audio id="audio" src="https://webpiece.cn/myocean.mp3" controls></audio> |
[ 事件 ]
当音频或视频正在加载过程中，会依次发生以下事件：
|
1 2 3 4 5 6 7 8 |
loadstart:提示浏览器开始寻找指定的音频或视频 progress:提示浏览器正在下载指定的音频或视频 durationchange:提示音频或视频的时长已改变 loadedmetadata:提示音频或视频的元数据已加载 loadeddata:提示音频或视频的当前帧已加载，但没有足够数据播放下一帧 canplay:提示浏览器能够开始播放指定的音频或视频 canplaythrough:提示音频或视频能够不停顿地一直播放 progress:提示浏览器正在下载指定的音频或视频 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<audio id="audio" src="https://webpiece.cn/myocean.mp3" controls></audio> <script> 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'); } </script> |
影响音频或视频数据加载的事件有以下几个：
|
1 2 3 4 5 |
abort:在音频或视频终止加载时触发 error:在音频或视频加载发生错误时触发 stalled:在浏览器尝试获取媒体数据，但数据不可用时触发 suspend:在音频或视频数据被阻止加载时触发(可以是完成加载后触发，或者因为被暂停) empted:在发生故障并且文件突然不可用时触发 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<video id="video" src="https://webpiece.cn/movie.mp4" controls></video> <script> 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'); } </script> |
音频或视频控制按钮发生改变时触发以下事件:
|
1 2 3 4 5 6 7 8 9 10 |
play:音频或视频文件已经就绪可以开始播放时触发 playing:音频或视频已开始播放时触发 ended:音频或视频文件播放完毕后触发 pause:音频或视频文件暂停时触发 ratechange:播放速度改变进触发 seeked:指示定位已结束时触发 seeking:正在进行指示定位时触发 timeupdate:播放位置改变时触发[注意:播放和调整指示定位时都会触发] volumechange:音量改变时触发 waiting:需要缓冲下一帧而停止时触发 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<audio id="audio" src="/honey.mp3" controls></audio> <script> 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'); } </script> |
[ audio专有 ]
audio元素在一个原生的JavaScript构造函数Audio，可以在任何时候播放音频。audio和img很像，但audio不用像img那样必须插入到文档中，只要创建一个新实例，并传入音频源文件即可。
|
1 |
var audio = new Audio('test.mp3'); |
|
1 2 3 4 5 6 7 |
<script> var audio = new Audio('https://webpiece.cn/honey.mp3'); audio.oncanplaythrough = function(){ audio.controls = true; document.body.appendChild(audio); } </script> |