中年|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" 您的浏览器不支持 video 标签video>
这样用户就会知道 ， 是因为浏览器不支持所以加载视频不成功 ， 可以换一个浏览器 。
视频的格式 像我们平时看到的视频格式有很多种 ， 例如常见的有 mp4、AVI、mov、rmvb、Ogg 等等 ，目前 video 元素支持的视频格式有下面三种：
这三种视频格式 ， 在不同的浏览器中兼容性不同 ， 例如 MP4 格式不支持 Firefox 和 Opera 浏览器 ， Ogg 格式不支持IE、Safari 浏览器 ， WebM 格式不支持IE、Safari 浏览器等 。
所以我们可能需要在不同的浏览器中使用不同的视频格式 ， 这需要用到标签 。
source标签标签可以为媒体元素定义媒介资源 ， 例如 video 和 audio 元素 。
例如
示例：
例如我们插入的视频播放器 ， 带有两个源文件 ， 浏览器会根据需要来选择源文件：
html>
【中年|HTML5 向网页嵌入视频和音频】
<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 浏览器则会选择第二个源文件 。
标签有三个属性：
向网页中嵌入音频 向网页中嵌入音频可以使用标签 ， 此标签的使用和
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> 在浏览器中的演示效果：
推荐阅读
- 中年|北斗“一张网”可实现全天候、高精度、自主可控服务
- 中年|Python编程语言有什么独特的优势呢?
- 中年|谈一谈我的十年机械工作经历
- 中年|弹无虚发的背后，国产弹药质量把关人，精密机床都要自叹不如
- 中年|宿迁深圳招商再结硕果，签约项目19个，协议总投资158亿元
- 中年|苹果：已终止Epic Games开发者账号
- 中年|圆满的结局！苹果微信之间不用再二选一，美国政府还是做出让步
- 中年|国家能源集团成功研发矿用卡车能耗制动开关预警装置
- 中年|什么是余压监控系统？余压监控系统如何接线和安装？一篇文章搞懂
- 中年|上线供应链金融、搭建标准质量体系，三全产业伙伴卓越质量联盟正式启动