向⽹页中嵌⼊视频
<video> 标签可以⽤于定义视频，且提供了播放、暂停、⾳量控件来控制视频。举个例⼦，像我们侠课岛⽹站上，课程视频播放，就是通过 <video> 标签来实现的。下⾯我们来看⼀下如何向⽹页中嵌⼊⼀个视频。 ⽰例：
⾸先我们准备⼀个视频，例如⼀个 test.mp4，然后使⽤ <video> 标签嵌⼊视频，如下所⽰：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5学习(9xkd)</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 元素中的常⽤属性如下所⽰：
属性描述
src将要播放的视频的 URL
controls如果设置该属性，则向⽤户显⽰控件，例如播放按钮，⾳量按钮等
autoplay如果设置该属性，则视频在就绪后马上播放，设置了 autoplay 后会忽略属性 preload
width设置视频播放器的宽度
height设置视频播放器的⾼度
loop如果设置该属性，则当媒介⽂件完成播放后再次开始播放
muted设置视频的⾳频输出应该被静⾳
poster规定视频下载时显⽰的图像，或者在⽤户点击播放按钮前显⽰的图像
preload如果设置该属性，则视频在页⾯加载时进⾏加载，并预备播放
有些⽐较⽼的浏览器可能不⽀持 <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 元素⽀持的视频格式有下⾯三种：
视频格式描述
Ogg带有 Theora 视频编码和 Vorbis ⾳频编码的 Ogg ⽂件
MPEG 4（MP4）带有 H.264 视频编码和 AAC ⾳频编码的 MPEG 4 ⽂件
WebM带有 VP8 视频编码和 Vorbis ⾳频编码的 WebM ⽂件
这三种视频格式，在不同的浏览器中兼容性不同，例如 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)</title>
</head>
<body>
<video controls="controls" width="700px" height="400px">
<source src="./test.mp4" type="video/mp4">
<source src="./" type="video/ogg">
您的浏览器不⽀持 video 标签
</video>
</body>
</html>
像上述代码中，如果是 Safari 浏览器就会选择第⼀个源⽂件，如果是 Firefox 浏览器则会选择第⼆个源⽂件。
<source> 标签有三个属性：
属性描述
src⽤于规定媒体⽂件的 URL
media⽤于规定媒体资源的类型，供浏览器决定是否下载
type⽤于规定媒体资源的 MIME 类型，常⽤的 MIME 类型有 video/ogg、video/mp4、video/webm
向⽹页中嵌⼊⾳频
向⽹页中嵌⼊⾳频可以使⽤ <audio> 标签，此标签的使⽤和 <video> 标签类似。插⼊视频是有画⾯的，我们也可以调整视频的宽和⾼等，⽽插⼊⾳频是没有画⾯的。
audio 元素⽀持的格式和 video 元素也有⼀点区别：
⾳频格式MIME类型
MP3audio/mpeg
Ogg audio/ogg
Wav audio/wav
⽰例：
例如我们插⼊⼀段⾳频，在浏览器中可以看到，是没有画⾯的，只有声⾳：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5学习(9xkd)</title>
</head>
<body>
<audio controls="controls">
<source src="./test.mp4" type="audio/mpeg">
<source src="./" type="audio/ogg">
您的浏览器不⽀持 audio 标签
</audio>
</body>
</html>
在浏览器中的演⽰效果：
向⽹页中嵌⼊⾳频时，也可以通过 <source> 标签来指定两个源⽂件，<source> 标签允许规定两个视频或者⾳频⽂件供浏览器根据它对媒体类型或者编解码器的⽀持进⾏选择。
audio 元素中的常⽤属性和 video 元素差不多，但是 audio 元素中没有 width、height 等属性。
常⽤属性如下所⽰：
属性描述
src要播放的⾳频的 URL
controls如果设置该属性，则向⽤户显⽰控件，例如播放按钮
autoplay如果设置该属性，则⾳频在就绪后马上播放
loop如果设置该属性，则每当⾳频结束时重新开始播放
muted规定⾳频输出应该被静⾳
preload如果设置该属性，则⾳频在页⾯加载时进⾏加载，并预备播放
总结
向⽹页中嵌⼊视频和⾳频其实很简单，要注意 video 元素和 audio 元素⽀持的视频、⾳频格式类型，如果插⼊的视频格式不⽀持，则视频或⾳频不会显⽰。
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议