示例:
首先我们准备一个视频,例如一个 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 元素支持的视频、音频格式类型,如果插入的视频格式不支持,则视频或音频不会显示。
更多可以查看链接:https://www.9xkd.com/