【HTML5学习笔记】9：音频和视频的嵌入

最新推荐文章于 2022-03-25 13:34:50 发布

大桔骑士v

最新推荐文章于 2022-03-25 13:34:50 发布

阅读量1k

点赞数 1

分类专栏： HTML 文章标签： HTML5 audio video WebM MP4

本文链接：https://blog.csdn.net/shu15121856/article/details/71242801

版权

HTML 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

这节主要是通过两个原生的媒体函数向HTML页面中嵌入音频和视频，先要知道几个概念。

容器：音频和视频文件都是一个容器文件，如视频文件包含了音频轨道、视频轨道和其它一些元数据。视频播放的时候音频轨道和视频轨道是绑在一起的。元数据包含了视频的标题、封面、子标题、字幕等。

编解码器：视频和音频编码/解码其实是一组算法，由于原始的媒体文件体积巨大，要对它进行编码让它小一点然后在网络上传播，传播之后再对接收过来的进行解码，还原成原始的媒体文件。

现在的浏览器一般至少支持这三种容器格式中的一种：WebM，OGG，MPEG-4，在未来WebM很可能成为主流。在现在的话还不能一种格式让所有浏览器都可以，不过只要实现WebM和MPEG-4这两种基本就可以了(所以常要准备两个文件)。

HTML5的<video>元素不需要借助flash插件就可以实现视频播放，有以下常用属性。

视频的URL为src，视频的宽度width，视频的高度height，autoplay设置后表示立刻开始播放视频，preload设置后表示预先载入视频，controls设置后表示显示播放控件，loop设置后表示反复播放视频，muted设置后表示视频处于静音状态，poster指定视频数据载入时显示的图片。

其中的preload属性有三个值：none表示什么都不加载，metadata表示只能加载元数据(宽高、第一帧视频等信息)，auto表示请求浏览器尽快下载整个视频。

如果要保证多个浏览器都能放视频，因为不同浏览器所能支持的容器格式可能不同，所以把src属性拿走，写在<video>的子标签<source>里，就能写事先准备好的多个不同格式的URL。

如果在IE9以下，则还需要写个<object>双标签来实现flash插件。

<audio>用来嵌入音频内容，属性只有src，autoplay，preload，controls。用法都一样。

还有一些功能，如前面后面加广告之类的要用JavaScript控制，后面会学到。

*以上例子的使用

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<title>音频和视频</title>
	<meta charset="utf-8">
</head>
<body>
	<!-- <video src="test.mp4" width="800" height="600" controls loop poster="tx.jpg" preload="auto"></video> -->
	<video width="800" height="600" controls loop poster="tx.jpg" preload="auto">
		<source src="test.webm">
		<source src="test.mp4">
		<source src="test.ogg">
		<object>实现flash插件的播放，如果屏蔽IE9以下，则不需要</object>
	</video>
	<audio controls>
		<source src="test.mp3">
		<source src="test.m4a">
		<source src="test.wav">
	</audio>
</body>
</html>

运行结果：

注意音频如果不加controls就相当于背景音乐了。