HTML5的video和audio

站长手记作者： 2024-08-28 01:10:01

HTML5引入的和元素，使用起来和元素一样简单。对于支持HTML5的浏览器，不再需要使用插件（像flash）来在HTML文档中嵌入音频和视频：实际上，使用这些元素的时候要更加巧妙。由于各家浏览器制造商未能在对标准音频和视频编码支持上达成一致

<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);

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

常量	值	描述
HAVE_NOTHING	0	没有关于音频/视频是否就绪的信息
HAVE_METADATA	1	音频/视频已初始化
HAVE_CURRENT_DATA	2	数据已经可以播放(当前位置已经加载) 但没有数据能播放下一帧的内容
HAVE_FUTURE_DATA	3	当前及至少下一帧的数据是可用的(换句话来说至少有两帧的数据)
HAVE_ENOUGH_DATA	4	可用数据足以开始播放-如果网速得到保障那么视频可以一直播放到底

常量	值	描述
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属性指定的媒体文件浏览器不支持，无法播放