您的位置：首页 > Web前端 > HTML5

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

2017-05-05 20:34 211 查看

这节主要是通过两个原生的媒体函数向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就相当于背景音乐了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航