h5 audio 和 video

html5音频和视频的用法

音频标签audio和视频标签video用法和其他html标签一样,如:

<audio controls src="johann_sebastian_bach_air.mp3"></audio>

但是由于各个浏览器支持的编解码器不一样,所以可以配合source来兼容,如:

<video controls>
    <source src="Intermission-Walk-in.ogv"></source>
    <source src="Intermission-Walk-in_512kb.mp4"></source>
</video>

上述代码的意思就是,如果浏览器支持ogv格式就用ogv格式的,不支持就用MP4。

audio和video中的媒体元素:

controls : 显示或隐藏用户控制界面

autoplay : 媒体是否自动播放

loop : 媒体是否循环播放

currentTime : 开始到播放现在所用的时间

duration : 媒体总时间(只读)

volume : 0.0-1.0的音量相对值

muted : 是否静音

autobuffer : 开始的时候是否缓冲加载,

autoplay的时候,忽略此属性

paused : 媒体是否暂停(只读)

ended : 媒体是否播放完毕(只读)

error : 媒体发生错误的时候,返回错误代码 (只读)

currentSrc : 以字符串的形式返回媒体地址(只读)

除了以上属性之外,video还有几个特性:

poster : 视频播放前的预览图片

width、height : 设置视频的尺寸

videoWidth、 videoHeight : 视频的实际尺寸(只读)

还有三个方法:

play() : 媒体播放

pause() : 媒体暂停

load() : 重新加载媒体(当改变了标签的src的时候,需要重新加载才能生效)

 

相关事件名称:(感觉用的也不多,只能用的时候再去查了)

loadstart  progress  suspend  emptied stalled play pause loadedmetadata loadeddata waiting playing canplay canplaythrough seeking seeked timeupdate ended ratechange durationchange volumechange

另外canvas的drawImage方法的第一个参数也可以是视频!

原文地址:https://www.cnblogs.com/toodeep/p/4780016.html