HTML5中的音频和视频媒体播放元素小结
(编辑:jimmy 日期: 2024/11/11 浏览:3 次 )
音频和视频的编码/解码器是一组算法,用来对一段特定的音频或视频流进行编码和解码,以便音频和视频能够播放。原始的媒体文件体积非常大,假如不对其进行编码,那么构成一段视频和音频的数据可能会非常庞大,以至于在因特网上传播需耗费无法忍受的时间。若没有解码器的话,接收方就不能把编码过的数据重组为原始的媒体数据。编解码器可以读懂特定的容器格式,并且对其中的音频轨道和视频轨道解码。
理解媒体元素
1、基本操作:声明媒体元素
- <audio controls src="Adele-Set Fire To The Rain.mp3">
- 您所使用的浏览器不支持HTML5 audio
- </audio>
代码中的controls 特性是告诉浏览器显示通用的用户控件,包括开始、停止、跳播以及音量控制。如果不指定controls属性,用户将无法播放页面上的音频。
2、使用source元素
最简单的情况下,src属性直接指向媒体文件就可以了,但是,万一浏览器不支持相关容器或者编码器呢?这就需要用到备用声明了。备用声明中可以包含多种来源,浏览器可以从这么多的来源中进行选择:
- <audio controls>
- <source src="Adele-Set Fire To The Rain.mp3" >
- <source src="Adele-Set Fire To The Rain.ogg" >
- </audio>
对于来源,浏览器会按照声明顺序判断,如果支持的不止一种,那么浏览器会选择支持的第一个来源。
3、媒体的控制
在audio元素或video元素中通过设置特性autoplay,不需要任何用户交互,音频或视频文件就会在加载完成后自动播放。
常用的控制函数
只读的媒体特性
可脚本控制的特性值
3.1使用audio和video元素
HTML5 video元素同audio元素非常类似,只是比audio元素多了一些特性。
提示:当canvas使用视频作为绘制来源时,画出来的只是当前播放的帧。
下一篇:整理HTML5的一些新特性与Canvas的常用属性