您的浏览器不支持 video 标签_HTML5 之视频 video新标签

前言

在开始之前先来了解下几种常见的视频格式：

• ogg 带有theora视频编码和vorbis音频编码的ogg文件
• mpeg4 带有H.264 视频编码的和AAC音频编码的mpeg4文件
• webm 带有vp8视频编码和vorbis 音频编码的webm文件

使用方法：

ps：controls 属性供添加播放、暂停及音量控制

开始

有时候我们也会见到这种：

如上所示，video标签中有一段文字。注意此内容只会在不支持video元素时候在浏览器汇总显示。

有些时候你可能会遇到这样的问题，比如想要在多个浏览器中播放同一个视频，但是发现其中一个不支持当前格式。很尴尬！那此时我们就可以来了解下source这个元素了。我们先来了解下source元素有什么作用？source元素可以连接不同的视频文件。浏览器会使用第一个可识别的格式。那下面我们就来具体的看下该如何使用？

总结

• video 元素可以放多个source元素
• source 元素可以连接不同的视频版本
• video中的内容分在当前浏览器不支持video标签时才会显示
• controls 属性供添加播放、暂停、音量控件

其实在上述中我们只了解到了video标签的几个属性。比如：src、width、height、control现在我们来详细看下它还有哪些属性呢？

• autoplay 视频就绪后会马上播放，就像这个词语的意思一样自动播放
• loop 如果你在video中添加了该属性，它会在媒介文件完成播放后再次播放
• preload 如果你添加这个属性，视频会在页面加载的同时也会进行加载，并且预备播放。但是如果同时用了autoplay ,则会忽略该属性

拓展

其实之前有篇文章也有提到过，还是再了解下吧。

第一、浏览器支持

IE9+, Firefox, Opera, Chrome 以及 Safari 支持

第二、video元素支持的三种视频格式：

---