标签：CSS3 视频 多媒体 音频 HTML HTML5 播放 页面

多媒体技术

• HTML5多媒体的特性

HTML5多媒体的特性

在HTML5出现之前并没有将视频和音频嵌入到页面的标准方式，多媒体内容在大多数情况下都是通过第三方插件或集成在Web浏览器的应用程序置于页面中。
运用HTML5中新增的video标签和audio标签可以避免这样的问题。

视频和音频编解码器
视频编解码器
视频编解码器定义了多媒体数据流编码和解码的算法。其中编码器主要是对数据流进行编码操作，用于存储和传输。

音频编解码器
音频编解码器定义了音频数据流编码和解码的算法。与视频编解码器的工作原理一样，音频编码器主要用于对数据流进行编码操作，解码器主要用于对音频文件进行解码。

多媒体格式
运用HTML5的video和audio标签可以在页面中嵌入视频或音频文件，如果想要这些文件在页面中加载播放，还需要设置正确的多媒体格式。
视频格式包含视频编码、音频编码和容器格式。
音频格式是指要在计算机内播放或是处理音频文件。

嵌入视频和音频
在HTML5中嵌入视频
在HTML5中，video标签用于定义播放视频文件的标准。
基本语法格式：
<video src="视频文件路径" controls="controls"></video>
contrlos属性为播放，暂停和音量控件

				常用属性值
属性				值				描述
autoplay		autoplay		当页面载入完成后自动播放视频。
loop			loop			视频结束时重新开始播放。
preload			preload			如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
poster			url				当视频缓冲不足时，该属性值链接一个图像，并将该图像按照一定的比例显示出来。

在HTML5中嵌入音频
在HTML5中，audio标签用于定义播放音频文件的标准。
基本语法：
<audio src="音频文件路径" controls="controls"></audio>
contrlos属性为播放，暂停和音量控件

				常用属性值
属性				值			描述
autoplay		autoplay	当页面载入完成后自动播放音频。
loop			loop		音频结束时重新开始播放。
preload			preload		如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

音视频中的source元素
基本语法：
<source src="音频文件地址" type="媒体文件类型/格式">

调用网页多媒体文件
在网页中调用多媒体文件的方法主要有两种：
调用本地多媒体文件
调用指定url地址的互联网多媒体文件

多媒体的支持条件
支持视频和音频的浏览器

CSS控制视频的宽高
在HTML5中，经常会通过为video元素添加宽高的方式给视频预留一定的空间，这样浏览器在加载页面时就会预先确定视频的尺寸，为其保留合适的空间，使页面的布局不产生变化。

标签：CSS3,视频,多媒体,音频,HTML,HTML5,播放,页面
来源： https://blog.csdn.net/weixin_51227348/article/details/123106650

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。