< 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>
本文详细介绍了HTML5的<audio>和<video>标签在不同浏览器的兼容情况,列举了音频和视频的常见格式,并探讨了如何通过<source>标签实现格式选择。此外,文章还涵盖了音频和视频的API属性、方法及常用事件,适合开发者了解和优化多媒体内容的呈现。

被折叠的 条评论
为什么被折叠?



