HTML5 向网页嵌入视频和音频
南方iik
5
来源 | http://www.fly63.com/article/detial/9503
现在很多网站上都会使用到视频和音频，html5 中提供了展示视频和音频的标签。向网页嵌入视频可以使用 <video> 标签，而嵌入音频可以使用 <audio> 标签。这两个标签都是 html 5 中新增的标签，两个标签中的属性和方法也很类似，但也有些不同。其中 audio 元素用于定义声音，比如音乐， video 元素用于定义视频，如电影等。向网页中嵌入视频<video> 标签可以用于定义视频，且提供了播放、暂停、音量控件来控制视频。举个例子，像我们侠课岛网站上，课程视频播放，就是通过 <video> 标签来实现的。下面我们来看一下如何向网页中嵌入一个视频。示例：首先我们准备一个视频，例如一个 test.mp4，然后使用 <video> 标签嵌入视频，如下所示：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>HTML5学习(9xkd.com)</title> </head> <body> <video src="./test.mp4" controls="controls" width="700px" height="400px"></video> </body></html>在浏览器中的预览效果：
从上图中可以看到，我们通过 <video> 标签成功向网页中插入了一个视频， 其中 src 属性用于引入要播放的视频的 URL，注意视频地址一定要正确，如果地址错误，视频是不能显示的。然后我们通过 width、height 属性设置了视频的宽度为 700px ，高度为 400px。然后可以看到，视频上还显示了播放、调整音量等控件，当我们点击播放按钮时，视频就会开始播放。这是因为我们设置了 controls 属性，如果我们没有设置这个属性，视频将会显示一个静止的画面，并且不管怎么点击都是没有反应的。大家可以试一下，不设置 controls 属性然后在浏览器中查看演示效果，这里就不演示给大家看了。video 元素中的常用属性如下所示：
有些比较老的浏览器可能不支持 <video> 标签，例如 IE8 及以下的浏览器就不支持，而 IE9+、Firefox、Opera、Chrome、Safari 等浏览器都支持 <video> 标签。所以我们可以在 <video> 标签中放置文本内容，这样当某个浏览器不支持此标签时，就可以显示提示内容：<video src="./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> 标签。source标签<source> 标签可以为媒体元素定义媒介资源，例如 video 和 audio 元素。例如 <video> 标签中可以包含多个 <source> 标签，<source> 标签可以链接不同的视频文件，浏览器将使用第一个可识别的格式。示例：例如我们插入的视频播放器，带有两个源文件，浏览器会根据需要来选择源文件：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>HTML5学习(9xkd.com)</title> </head> <body> <video controls="controls" width="700px" height="400px"> <source src="./test.mp4" type="video/mp4"> <source src="./test.ogg" type="video/ogg"> 您的浏览器不支持 video 标签 </video> </body></html>像上述代码中，如果是 Safari 浏览器就会选择第一个源文件，如果是 Firefox 浏览器则会选择第二个源文件。<source> 标签有三个属性：
向网页中嵌入音频向网页中嵌入音频可以使用 <audio> 标签，此标签的使用和 <video> 标签类似。插入视频是有画面的，我们也可以调整视频的宽和高等，而插入音频是没有画面的。audio 元素支持的格式和 video 元素也有一点区别：
示例：例如我们插入一段音频，在浏览器中可以看到，是没有画面的，只有声音：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>HTML5学习(9xkd.com)</title> </head> <body> <audio controls="controls"> <source src="./test.mp4" type="audio/mpeg"> <source src="./test.ogg" type="audio/ogg"> 您的浏览器不支持 audio 标签 </audio> </body></html>在浏览器中的演示效果：
向网页中嵌入音频时，也可以通过 <source> 标签来指定两个源文件，<source> 标签允许规定两个视频或者音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。audio 元素中的常用属性和 video 元素差不多，但是 audio 元素中没有 width、height 等属性。常用属性如下所示：
总结向网页中嵌入视频和音频其实很简单，要注意 video 元素 和 audio 元素支持的视频、音频格式类型，如果插入的视频格式不支持，则视频或音频不会显示。
本文完~
相关文章
-
【CSDN编者按】现在我们谈前端，大多数谈框架，对于前端最基础的HTML你了解多少呢？本文作者用近两万字为你详解HTML的进化史，涉及前身SGML、到浏览器大战，HTML模块的详解、HTML5的进化-- HTML的前身SGML 战争驱动文明发展，互联网是美国军队为了快速传送情报而发明的。如果单纯传送文字，当时的电报就
喽啰兵77
8 0
0 条评论
-
建议先把视频看完 在后台回复书号或者作者名，可以下载完整的课件、源码和教学大纲 HTML5网页前端设计（零基础56课时版） 本教学大纲适用于零基础入门学习，适用于未曾学习过WEB前端设计的前置课程的班级。可以直接使用本教材完成Web网页前端设计的基础入门和后续HTML5技术的学习。本教材配合以《HT
袁友前
8 3
0 条评论
-
前些天，微信再次对外释放了强势进军移动办公的信号，微信将会推出企业版微信，试图让用户彻底将工作与生活区分开。无独有偶，就在企业微信发布后不久，中国信息通信研究院技术与标准研究所、微软、云适配、英特尔、华为、科大讯飞、金山等多家全球知名企业及研究机构筹备发起了"中国企业级HTML5产业联盟(简称H5联盟)"，同时国内H
ayang229
5 3
0 条评论
-
在这个时间开始学习移动开发真是最好不过了，每个人应该都有一些移动应用的创意，而且你并不需要任何的原生应用编程经验，你只需要一些HTML的相关知识，懂一些CSS和JavaScript就够了。如果你总听别人说HTML5的移动应用太慢，我只能告诉你应该有一些主见，首先HTML5会越来越好，移动端的硬件也会越来越强，怎么说呢，
fengjing74
8 1
0 条评论
-
作者：伯乐在线专栏作者-葡萄城控件 链接：http://web.jobbole.com/87908/ 如何提升Web页面的性能，很多开发人员从多个方面来下手如JavaScript、图像优化、服务器配置，文件压缩或是调整CSS。 很显然HTML已经达到了一个瓶颈，尽管它是开发Web界面必备的核心语言。HTML页面的负载也
爱xtzlk830
3 0
0 条评论
-
（给前端大学加星标，提升前端技能.） 来自：csdn翻译 如果我在用HTML+CSS编程，那么，我能算是名开发人员吗？ 以下为译文： 有好多次，别人说我算不上程序员，因为我在用HTML+CSS编程。我非常伤心，因为别人都不认为我是开发人员。我们讨论了好几个小时，网上也有很多关于这个话题的讨论。但仍然还有人否认这一点，
谨言Ruby
5 0
0 条评论
-
介绍 我是一个ASP.NETMVC的开发者，最近在我找工作的时候被问到很多与HTML5相关的问题和新特性。所以以下近40个重要的问题将帮助你复习HTML5相关的知识。 这些问题不是你得到工作的高效解决方案，但是可以在你想快速复习相关主题的时候有所帮助。 快乐地找工作。 01、SGML（标准通用标记语言）和HTML（超
奡1980
8 0
0 条评论
-
选自Floydhub 作者：EmilWallner 机器之心编译 如何用前端页面原型生成对应的代码一直是我们关注的问题，本文作者根据pix2code等论文构建了一个强大的前端代码生成模型，并详细解释了如何利用LSTM与CNN将设计原型编写为HTML和CSS网站。 项目链接：https://github.com/emil
一个南瓜
3 0
0 条评论
-
来源|http://www.fly63.com/article/detial/9503 现在很多网站上都会使用到视频和音频，html5中提供了展示视频和音频的标签。向网页嵌入视频可以使用<video>标签，而嵌入音频可以使用<audio>标签。这两个标签都是html5中新增的标签，两个标签中的
南方iik
5 3
0 条评论
-
你想要的都有了！ 本书提供PPT课件，源码，习题答案，教学大纲，期末试卷，20小时微课视频。 请先花一些时间看一下视频（全书配套20小时教学视频） 一、课程简介 网页设计课程是高等院校计算机、信息管理、电子商务和其他相关专业的一门重要的基础课程，也是一门实践性和技能性要求很强的学科。课程涵盖HTML基本元素、CSS样
桐崎千棘我的愛
7 0
0 条评论
