中年|HTML5 向网页嵌入视频和音频
现在很多网站上都会使用到视频和音频 ， HTML5 中提供了展示视频和音频的标签 。 向网页嵌入视频可以使用
向网页中嵌入视频
示例：
首先我们准备一个视频 ， 例如一个 test.mp4 ， 然后使用
html>
<html> <head> <meta charset="utf-8"> <title>HTML5学习(9xkd.com)title> head> <body> <video src="http://news.hoteastday.com/a/test.mp4" controls="controls" width="700px" height="400px">video> body>html> 在浏览器中的预览效果：
本文插图
从上图中可以看到 ， 我们通过
然后可以看到 ， 视频上还显示了播放、调整音量等控件 ， 当我们点击播放按钮时 ， 视频就会开始播放 。 这是因为我们设置了 controls 属性 ， 如果我们没有设置这个属性 ， 视频将会显示一个静止的画面 ， 并且不管怎么点击都是没有反应的 。 大家可以试一下 ， 不设置 controls 属性然后在浏览器中查看演示效果 ， 这里就不演示给大家看了 。
video 元素中的常用属性如下所示：
本文插图
有些比较老的浏览器可能不支持
所以我们可以在
<video src="http://news.hoteastday.com/a/test.mp4" controls="controls" width="700px" height="400px"> 您的浏览器不支持 video 标签video>
这样用户就会知道 ， 是因为浏览器不支持所以加载视频不成功 ， 可以换一个浏览器 。
视频的格式 像我们平时看到的视频格式有很多种 ， 例如常见的有 mp4、AVI、mov、rmvb、Ogg 等等 ，目前 video 元素支持的视频格式有下面三种：
这三种视频格式 ， 在不同的浏览器中兼容性不同 ， 例如 MP4 格式不支持 Firefox 和 Opera 浏览器 ， Ogg 格式不支持IE、Safari 浏览器 ， WebM 格式不支持IE、Safari 浏览器等 。
所以我们可能需要在不同的浏览器中使用不同的视频格式 ， 这需要用到标签 。
source标签标签可以为媒体元素定义媒介资源 ， 例如 video 和 audio 元素 。
例如
示例：
例如我们插入的视频播放器 ， 带有两个源文件 ， 浏览器会根据需要来选择源文件：
html>
<html> <head> <meta charset="utf-8"> <title>HTML5学习(9xkd.com)title> head> <body> <video controls="controls" width="700px" height="400px"> <source src="http://news.hoteastday.com/a/test.mp4" type="video/mp4"> <source src="http://news.hoteastday.com/a/test.ogg" type="video/ogg"> 您的浏览器不支持 video 标签 video> body>html>
像上述代码中 ， 如果是 Safari 浏览器就会选择第一个源文件 ， 如果是 Firefox 浏览器则会选择第二个源文件 。
标签有三个属性：
向网页中嵌入音频 向网页中嵌入音频可以使用标签 ， 此标签的使用和
【中年|HTML5 向网页嵌入视频和音频】audio 元素支持的格式和 video 元素也有一点区别：
示例：
例如我们插入一段音频 ， 在浏览器中可以看到 ， 是没有画面的 ， 只有声音：
html>
<html> <head> <meta charset="utf-8"> <title>HTML5学习(9xkd.com)title> head> <body> <audio controls="controls"> <source src="http://news.hoteastday.com/a/test.mp4" type="audio/mpeg"> <source src="http://news.hoteastday.com/a/test.ogg" type="audio/ogg"> 您的浏览器不支持 audio 标签 audio> body>html> 在浏览器中的演示效果：
本文插图
向网页中嵌入音频时 ， 也可以通过标签来指定两个源文件 ，标签允许规定两个视频或者音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择 。
audio 元素中的常用属性和 video 元素差不多 ， 但是 audio 元素中没有 width、height 等属性 。
常用属性如下所示：
本文插图
总结 向网页中嵌入视频和音频其实很简单 ， 要注意 video 元素 和 audio 元素支持的视频、音频格式类型 ， 如果插入的视频格式不支持 ， 则视频或音频不会显示 。
推荐阅读
- 9月，走出逆境，迈向辉煌，3个星座人生大红大紫！
- 湖北武汉|武汉新增917家医保定点医药机构 近9成面向基层
- 减肥|JAMA：减肥要趁早，25岁就该开始预防中年期肥胖
- 漏洞|华为称继续向预装Google Play手机提供更新；Mac纳入苹果独立维修商维修范围；三星智能手机生产
- 轻风细雨|一个家庭走向兴旺的三个征兆，有一个，就很了不起！
- 疫情大冲击下，美政客作出重大误判，基辛格向全球发出警告
- |江苏盐城一面包车内发现女性尸体，警方向广大群众征集线索
- 环球时报|印度向中印边境地区增兵20万，印媒：不好……
- 央视网|蒙古国捐赠的3万只羊，去向明确了
- 人民日报海外版|中国医师节——向抗疫的白衣卫士致敬！