怎么理解HTML5中的音频和视频媒体播放元素

本篇文章给大家分享的是有关怎么理解HTML5中的音频和视频媒体播放元素，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

音频和视频的编码/解码器是一组算法，用来对一段特定的音频或视频流进行编码和解码，以便音频和视频能够播放。原始的媒体文件体积非常大，假如不对其进行编码，那么构成一段视频和音频的数据可能会非常庞大，以至于在因特网上传播需耗费无法忍受的时间。若没有解码器的话，接收方就不能把编码过的数据重组为原始的媒体数据。编解码器可以读懂特定的容器格式，并且对其中的音频轨道和视频轨道解码。
理解媒体元素
1、基本操作：声明媒体元素

XML/html Code复制内容到剪贴板

1. <audio controls src="Adele-Set Fire To The Rain.mp3">  

2. 您所使用的浏览器不支持HTML5 audio   

3. </audio>  

代码中的controls 特性是告诉浏览器显示通用的用户控件，包括开始、停止、跳播以及音量控制。如果不指定controls属性，用户将无法播放页面上的音频。
2、使用source元素
最简单的情况下，src属性直接指向媒体文件就可以了，但是，万一浏览器不支持相关容器或者编码器呢？这就需要用到备用声明了。备用声明中可以包含多种来源，浏览器可以从这么多的来源中进行选择：

XML/HTML Code复制内容到剪贴板

1. <audio controls>  

2. <source  src="Adele-Set Fire To The Rain.mp3" >  

3. <source  src="Adele-Set Fire To The Rain.ogg" >  

4. </audio>  

对于来源，浏览器会按照声明顺序判断，如果支持的不止一种，那么浏览器会选择支持的第一个来源。
3、媒体的控制
在audio元素或video元素中通过设置特性autoplay,不需要任何用户交互，音频或视频文件就会在加载完成后自动播放。
常用的控制函数

只读的媒体特性

可脚本控制的特性值

3.1使用audio和video元素
HTML5 video元素同audio元素非常类似，只是比audio元素多了一些特性。

提示：当canvas使用视频作为绘制来源时，画出来的只是当前播放的帧。

以上就是怎么理解HTML5中的音频和视频媒体播放元素，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网html频道。