H5学习笔记（八）音视频

1、html5音视频标签

<video src&＃61;"resource/video/test.mp4" controls width&＃61;"500" height&＃61;"500"></video><audio src&＃61;"resource/audio/test.mp3" controls></audio>


2、video标签的属性

width :视频显示区域的宽度&＃xff0c;单位是CSS像素
height :视频展示区域的高度&＃xff0c;单位是CSS像素
poster :一个海报帧的URL&＃xff0c;用于在用户播放或者跳帧之前展示src : 要嵌到页面的视频的URL
controls : 显示或隐藏用户控制界面
autoplay : 媒体是否自动播放
loop : 媒体是否循环播放
muted : 是否静音
preload : 该属性旨在告诉浏览器作者认为达到最佳的用户体验的方式是什么none: 提示作者认为用户不需要查看该视频&＃xff0c;服务器也想要最小化访问流量&＃xff1b;换句话说就是提示浏览器该视频不需要缓存。metadata: 提示尽管作者认为用户不需要查看该视频&＃xff0c;不过抓取元数据&＃xff08;比如&＃xff1a;长度&＃xff09;还是很合理的。auto: 用户需要这个视频优先加载&＃xff1b;换句话说就是提示&＃xff1a;如果需要的话&＃xff0c;可以下载整个视频&＃xff0c;即使用户并不一定会用它。空字符串&＃xff1a;也就代指 auto 值。


3、audio标签的属性

src
controls
autoplay
loop
muted
preload


音视频兼容性写法&＃xff1a;

<video controls width&＃61;"300" height&＃61;"300"><source src&＃61;"resource/video/OUTPUT.mp4" type&＃61;"video/mp4"></source><source src&＃61;"resource/video/OUTPUT.ogv" type&＃61;"video/ogg"></source><source src&＃61;"resource/video/OUTPUT.webm" type&＃61;"video/webm"></source>当前浏览器不支持&＃xff0c;点击下载&＃xff1a;<a href&＃61;"resource/video/OUTPUT.mp4">下载视频</a></video><audio controls><source src&＃61;"resource/audio/OUTPUT.mp3" type&＃61;&＃39;audio/mpeg&＃39;></source><source src&＃61;"resource/audio/OUTPUT.aac" type&＃61;&＃39;audio/acc; codecs&＃61;"acc"&＃39;></source><source src&＃61;"resource/audio/OUTPUT.ogg" type&＃61;&＃39;audio/ogg; codecs&＃61;"vorbis"&＃39;></source>当前浏览器不支持&＃xff0c;点击下载&＃xff1a;<a href&＃61;"resource/audio/OUTPUT.mp3">下载音频</a></audio>


4、音视频js相关属性

duration : 媒体总时间(只读)
currentTime : 开始播放到现在所用的时间(可读写)
muted : 是否静音(可读写,相比于volume优先级要高)
volume : 0.0-1.0的音量相对值(可读写)
paused : 媒体是否暂停(只读)
ended : 媒体是否播放完毕(只读)
error : 媒体发生错误的时候&＃xff0c;返回错误代码 (只读)
currentSrc : 以字符串的形式返回媒体地址(只读)视频多的部分:poster : 视频播放前的预览图片(读写)width、height : 设置视频的尺寸(读写)videoWidth、 videoHeight : 视频的实际尺寸(只读)


5、音视频js相关函数

play() : 媒体播放
pause() : 媒体暂停
load() : 重新加载媒体


var video &＃61; document.querySelector("video");var audio &＃61; document.querySelector("audio");video.play();audio.play();setTimeout(function(){video.pause();audio.pause();},5000)


6、js相关事件&＃xff08;addEventListener)

视频:abort 在播放被终止时触发,例如, 当播放中的视频重新开始播放时会触发这个事件。canplay 在媒体数据已经有足够的数据&＃xff08;至少播放数帧&＃xff09;可供播放时触发。这个事件对应CAN_PLAY的readyState。canplaythrough 在媒体的readyState变为CAN_PLAY_THROUGH时触发&＃xff0c;表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕。注意&＃xff1a;手动设置currentTime会使得firefox触发一次canplaythrough事件&＃xff0c;其他浏览器或许不会如此。durationchange 元信息已载入或已改变&＃xff0c;表明媒体的长度发生了改变。例如&＃xff0c;在媒体已被加载足够的长度从而得知总长度时会触发这个事件。emptied 媒体被清空&＃xff08;初始化&＃xff09;时触发。ended 播放结束时触发。error 在发生错误时触发。元素的error属性会包含更多信息。参阅Error handling获得详细信息。loadeddata 媒体的第一帧已经加载完毕。loadedmetadata 媒体的元数据已经加载完毕&＃xff0c;现在所有的属性包含了它们应有的有效信息。loadstart 在媒体开始加载时触发。mozaudioavailable 当音频数据缓存并交给音频层处理时pause 播放暂停时触发。play 在媒体回放被暂停后再次开始时触发。即&＃xff0c;在一次暂停事件后恢复媒体回放。playing 在媒体开始播放时触发&＃xff08;不论是初次播放、在暂停后恢复、或是在结束后重新开始&＃xff09;。progress 告知媒体相关部分的下载进度时周期性地触发。有关媒体当前已下载总计的信息可以在元素的buffered属性中获取到。ratechange 在回放速率变化时触发。seeked 在跳跃操作完成时触发。seeking 在跳跃操作开始时触发。stalled 在尝试获取媒体数据&＃xff0c;但数据不可用时触发。suspend 在媒体资源加载终止时触发&＃xff0c;这可能是因为下载已完成或因为其他原因暂停。timeupdate 元素的currentTime属性表示的时间已经改变。volumechange 在音频音量改变时触发&＃xff08;既可以是volume属性改变&＃xff0c;也可以是muted属性改变&＃xff09;.。waiting 在一个待执行的操作&＃xff08;如回放&＃xff09;因等待另一个操作&＃xff08;如跳跃或下载&＃xff09;被延迟时触发音频:abort 在播放被终止时触发,例如, 当播放中的视频重新开始播放时会触发这个事件。canplay 在媒体数据已经有足够的数据&＃xff08;至少播放数帧&＃xff09;可供播放时触发。这个事件对应CAN_PLAY的readyState。canplaythrough 在媒体的readyState变为CAN_PLAY_THROUGH时触发&＃xff0c;表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕。注意&＃xff1a;手动设置currentTime会使得firefox触发一次canplaythrough事件&＃xff0c;其他浏览器或许不会如此。durationchange 元信息已载入或已改变&＃xff0c;表明媒体的长度发生了改变。例如&＃xff0c;在媒体已被加载足够的长度从而得知总长度时会触发这个事件。emptied 媒体被清空&＃xff08;初始化&＃xff09;时触发。ended 播放结束时触发。error 在发生错误时触发。元素的error属性会包含更多信息。参阅Error handling获得详细信息。loadeddata 媒体的第一帧已经加载完毕。loadedmetadata 媒体的元数据已经加载完毕&＃xff0c;现在所有的属性包含了它们应有的有效信息。loadstart 在媒体开始加载时触发。mozaudioavailable 当音频数据缓存并交给音频层处理时pause 播放暂停时触发。play 在媒体回放被暂停后再次开始时触发。即&＃xff0c;在一次暂停事件后恢复媒体回放。playing 在媒体开始播放时触发&＃xff08;不论是初次播放、在暂停后恢复、或是在结束后重新开始&＃xff09;。progress 告知媒体相关部分的下载进度时周期性地触发。有关媒体当前已下载总计的信息可以在元素的buffered属性中获取到。ratechange 在回放速率变化时触发。seeked 在跳跃操作完成时触发。seeking 在跳跃操作开始时触发。stalled 在尝试获取媒体数据&＃xff0c;但数据不可用时触发。suspend 在媒体资源加载终止时触发&＃xff0c;这可能是因为下载已完成或因为其他原因暂停。timeupdate 元素的currentTime属性表示的时间已经改变。volumechange 在音频音量改变时触发&＃xff08;既可以是volume属性改变&＃xff0c;也可以是muted属性改变&＃xff09;.。waiting 在一个待执行的操作&＃xff08;如回放&＃xff09;因等待另一个操作&＃xff08;如跳跃或下载&＃xff09;被延迟时触发