1、video标记及属性
video标记支持三种视频格式,分别是MP4、WebM、Ogg。其格式说明如下:
- Ogg:带有Theora视频编码和Vorbis音频编码的Ogg文件
- MPEG4:带有H.264视频编码和AAC音频编码的MPEG4文件。
- WebM:带有VP8视频编码和Vorbis音频编码的WebM文件。
Video标记提供了播放、暂停和音量控件来控制视频。
基本语法:
<video src="video.mp4" width="1280" height="720" controls="controls"></video>
属性说明:
注意:
如果浏览器不支持video标记,就在<video>
与</video>
标记之间插入相关提示信息。
video标记支持多个source标记。可以使用source标记为video标记和audio标记提供多个不同的音频、视频文件,以解决浏览器支持。如果浏览器支持将使用第一个可识别的格式。
用法例子:
<video width="1280" height="720" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持video标记
</video>
2、audio标记及属性
属性类型及属性说明大致可参考上面的。
用法例子:
<audio controls="controls">
<source src="music.ogg" type="video/ogg">
<source src="music.mp4" type="video/mpeg">
您的浏览器不支持audio标记(元素)
</audio>
补充:
播放、暂停、初始化、判断是否结束(利用js提供的方法)
目标节点.load()
初始化,通常用于音频切换下一首的时候,对上一首歌曲进行初始化。相当于让上一个回到刚开始的播放进度。
目标节点.play
播放,播放音频或视频
目标节点.pause()
暂停,暂停正在播放的音频或视频
目标节点.ended
判断是否结束,返回结果位布尔值,true为结束,false为还未结束,通常利用js可用于让音频或视频播放完后,继续下一首或下一个视频播放
值得注意的是,当你想用js控制音频的的播放和暂停时候,一般建议:
<audio src="./audio/1.mp3" preload="auto"></audio>
至于是preload="auto"
可以看上面,而不用autoplay
,如果还出现问题,建议往前看这些标签有哪些属性。