< audio > 与< video>标签
浏览器支持:
浏览器 | 是否支持 |
---|---|
IE | IE 9+ |
Firefox | √ |
Chrome | √ |
Safari | √ |
Opera | √ |
提示:IE8 以及 IE8- 不支持 audio 标签。
定义与使用:
- < audio >定义声音,比如音乐或其他音频流。
- < audio >支持的格式:mp3、wav、ogg
- 浏览器支持的文件格式:
浏览器 | mp3 | wav | ogg |
---|---|---|---|
IE 9+ | √ | ||
Firefox 3.5 | √ | √ | |
Chrome 3.0 | √ | √ | |
Safari 3.0 | √ | √ | |
Opera 10.5 | √ | √ |
- < video >定义视频,比如电影片段或其他视频流
- < video >支持的格式:mp3、wav、ogg
- 浏览器支持的文件格式:
浏览器 | mp4 | WebM | Ogg |
---|---|---|---|
IE | 9.0+ | × | × |
Firefox | × | 4.0 | 3.5+ |
Chrome | 5.0+ | 6.0+ | 5.0+ |
Safari | 3.0+ | × | × |
Opera | × | 10.6+ | 10.5+ |
实例
可以在 < audio > 和 < / audio > 之间放置文本内容,放置的文本内容在浏览器版本不支持< audio >的时候显示出来。
< source >多个source标签,浏览器会从第一个开始识别,如果第一个不被识别,则会继续识别第二个;如果第一个识别成功,则会直接播放第一种格式视频
<audio src="https://m3.8js.net:99/20200306/62_yongqimianzi.mp3" controls></audio> 写法一
<audio controls> 写法二 在source中选择一个可以播放的文件
<source src="https://m3.8js.net:99/20200306/62_yongqimianzi.mp3"></source>
<source src="https://m3.8js.net:99/20200306/62_yongqimianzi.ogg"></source>
您的浏览器版本过低,请使用谷歌浏览器!------ 文本在浏览器不支持时显示
</audio>
<video src="123456789.mp4" autoplay controls height='500px' width='280px' loop muted> </video> 写法一
<video controls>写法二 在source中选择一个可以播放的文件
<source src="123456.mp4"></source>
<source src="123456.ogg"></source>
您的浏览器版本过低,请使用谷歌浏览器!------ 文本在浏览器不支持时显示
</video>
audio可选属性:
可选属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 音频在就绪后马上播放 |
controls | controls | 显示操作控件,如播放按钮 |
loop | loop | 循环播放 |
muted | muted | 静音 |
preload | preload | 页面加载时进行加载(预加载) |
src | url | 要播放的音频的 URL |
autoplay | autoplay | 音频在就绪后马上播放 |
video比audio多了
属性 | 值 | 描述 |
---|---|---|
poster | url | URL 视频正在下载时显示的图像,直到用户点击播放按钮 |
autobuffer | autobuffer | 设置为浏览器缓冲方式,不设置autoply才有效 |
width | Pilex | 设置视频的宽度 |
height | Pilex | 设置视频的高度 |
以audio为例子:
//注意:谷歌需要静音才能自动播放
<audio src="https://m3.8js.net:99/20200306/62_yongqimianzi.mp3"
autoplay
controls
loop
muted> </audio>
video/audio常用属性:
例子:ele.playbackRate
属性 | 描述 |
---|---|
currentSrc | 视频地址 |
duration | 视频总时长(秒) |
currentTime | 视频当前时间(可以设置)秒 |
volume | 当前音量(可以设置)百分比 |
buffered | 当前缓冲量(videoObj.buffered.end(0)) |
paused | 是否暂停 |
ended | 是否结束 |
muted | 是否静音 |
playbackRate | 视频播放速率(可以设置) |
video audio API常用方法:
ele.play()
方法 | 说明 |
---|---|
load() | 加载 |
play() | 播放 |
pause() | 暂停 |
audio video事件API:
<body>
<audio src="https://m3.8js.net:99/20200306/62_yongqimianzi.mp3" controls ></audio>
<button>二倍速</button>
</body>
<script>
var ado = document.getElementsByTagName('audio')[0]
var btn = document.getElementsByTagName('button')[0]
var falg = false
btn.onclick = function(){
//用于触发onratechange事件
falg ? ado.playbackRate = 1 : ado.playbackRate = 2
falg ? this.innerHTML = '二倍速' : this.innerHTML = '正常'
falg = !falg
}
ado.onloadstart = function() {
console.log('onloadstart -- 在浏览器开始寻找指定视频/音频(audio/video)触发。')
}
ado.ondurationchange= function(){
console.log('ondurationchange -- 当指定视频/音频(audio/video)的时长数据发生变化时触发')
}
ado.onloadedmetadata = function() {
console.log('onloadedmetadata -- 事件在指定视频/音频(audio/video)的元数据加载后触发。')
}
ado.onloadeddata = function(){
console.log('onloadeddata -- 在当前帧的数据加载完成且还没有足够的数据播放视频/音频(audio/video)的下一帧时触发')
}
ado.onprogress = function(){
console.log('事件在浏览器下载(缓冲完毕)指定的视频/音频(audio/video)时触发。')
}
ado.oncanplay = function(){
console.log('oncanplay -- 可以开始播放时触发')
}
ado.oncanplaythrough = function(){
console.log('oncanplaythrough -- 缓冲完成时触发')
// e.target.src = '' // 这里这个空的是模拟地址发生故障 触发下面的 onerror onemptied
}
ado.onended = function() {
console.log('感谢光看')
}
ado.onemptied = function(){
console.log('onemptied -- 发生故障并且文件突然不可用时触发(比如连接意外断开时)。')
}
ado.onerror = function(){
console.log('onerror -- 在文件加载期间发生错误时运行的脚本。')
}
ado.onpause = function(){
console.log('onpause -- 暂停时候触发(如点击暂停)')
}
ado.onplay = function(){
console.log('onplay -- 开始播放时触发(如点击播放)')
}
ado.onplaying = function(){
console.log('onplaying -- 暂停或者在缓冲后准备重新开始播放时触发。')
}
ado.onratechange = function(){
console.log('onratechange -- 播放速度发生改变时触发')
}
ado.ontimeupdate = function(){
console.log('ontimeupdate -- 播放位置改变时触发 (如拖动进度条) 注意:在没暂停的情况下进度条动一下就触发一下' )
}
ado.onvolumechange = function(){
console.log('onvolumechange -- 音量发生改动时触发(包括静音)')
}
</script>