HTML5技术向网页嵌入视频和音频

2021-07-20 15:58发布

网站中如果只有图片和文字是不够的,现在的网站中还会使用到视频和音频,HTML5 中提供了展示视频和音频的标签,可以轻松实现视频与音频的展示哦。

向网页嵌入视频可以使用<video> 标签,而嵌入音频可以使用<audio>标签。这两个标签都是 html 5 中新增的标签,我们一起来熟悉一下吧!

一、如何向网页中嵌入视频

<video> 标签可以用于定义视频,且提供了播放、暂停、音量控件来控制视频。

<video src="" controls></video>

根据上面这条语法,我们可以看到video是一个双标签,我们通过<video>标签成功向网页中插入了一个视频, 其中 src 属性用于引入要播放的视频的 URL,注意视频地址一定要正确,如果地址错误,视频是不能显示的。

另外,我们还设置了 controls 属性,如果我们没有设置这个属性,视频将会显示一个静止的画面,并且不管怎么点击都是没有反应的。

然后可以看到,视频上还显示了播放、调整音量等控件,当我们点击播放按钮时,视频就会开始播放。

常用属性

当然,video标签除了src和controls属性之外,还有一些其他常用的属性,我们也一起来看一看下面这张表:

同学们可以动手试试以上这些属性添加以后的效果,这样印象会更深刻哦!

video标签使用起来非常简单,但是一定要注意它的兼容情况,有些比较老的浏览器可能不支持 <video>标签,例如 IE8 及以下的浏览器不支持,所以我们在使用时可以在 <video>标签中放置一些提示的文本内容,这样当某个浏览器不支持此标签时,就可以显示提示内容:

<video src="1.mp4" controls> 您的浏览器不支持 video 标签</video>

这样用户就会知道,是因为浏览器不支持所以加载视频不成功,可以换一个浏览器,对于用户的体验感会更好哦。

视频的格式

像我们平时看到的视频格式有很多种,例如常见的有 mp4、AVI、mov、rmvb、Ogg 等等, 目前 video 元素支持的视频格式有下面三种:Ogg、MP4、WebM。

这三种视频格式,在不同的浏览器中兼容性不同,例如 MP4 格式不支持 Firefox 和 Opera 浏览器,Ogg 格式不支持IE、Safari 浏览器,WebM 格式不支持IE、Safari 浏览器等。


二、向网页中嵌入音频

刚才我们了解到向网页中嵌入视频,接下来我们来看看如何嵌入音频。

<audio src="" controls></audio>

向网页中嵌入音频可以使用<audio>标签,看这条语法好像和video标签有一些相似,比如它们都会用到src和controls这两个属性。但是插入视频是有画面的,我们也可以调整视频的宽和高等,而插入音频是没有画面的。

<audio controls src="./3.mp3">您的浏览器不支持 audio 标签</audio>

常用属性

audio 元素中的常用属性和 video 元素差不多,但是 audio 元素中没有 width、height 等属性。

音频的格式

audio元素支持的音频格式有下面三种:Ogg、MP3、WAV。其中Ogg不支持safari和低版本ie浏览器,WAV不支持ie低版本浏览器

我们在实际使用中,一般提供ogg和mp3格式,就可以支持所有主流浏览器了。


三、source标签

刚才通过我们的了解发现视频和音频的格式中对于浏览器的支持情况可能不同,那么如果需要在不同浏览器中使用不同的格式,我们怎么办呢?

这时候 <source> 标签就可以帮我们解决这个问题,<source> 标签可以为媒体元素定义媒介资源,例如 video 和 audio 元素。

<video> 标签中可以包含多个 <source> 标签,<source> 标签可以链接不同的视频文件,浏览器将使用第一个可识别的格式。

<video controls width="500">            
    <source src="./1.mp4" type="video/mp4">            
    <source src="./2.ogg" type="video/ogg">            
    您的浏览器不支持 video 标签        
</video>

上述代码中,如果是 Safari 浏览器就会选择第一个源文件,如果是 Firefox 浏览器则会选择第二个源文件,如果是IE低版本浏览器则会显示下面这条提示信息"您的浏览器不支持video标签"。

上面这段代码中大家应该注意到source标签也有自己常用的一些属性,其中src属性用来规定媒体文件的URL;type属性用来规定媒体资源的MIME类型,常用的MIME类型有video/ogg、video/mp4、video/webm、audio/mpeg、audio/ogg、audio/wav。


四、小结

向网页中嵌入视频和音频其实很简单,要注意 video 元素 和 audio 元素支持的视频、音频格式类型,如果插入的视频格式不支持,则视频或音频不会显示。还得额外留意视频和音频的URL地址是否正确哦!