html5视频及音频元素video和audio的基本语法

video和audio标签是html5的新标签,它是双标签 成对出现 如:<video></video> <audio></audio>

video基本语法

<video src="视频路径" controls="controls"></video>

这里的src 属性填写视频的路径,controls是视频的控件,控制播放、暂停、音量等,另外还可以用width 和 height来设置视频的宽度和高度。

如果浏览器不支持video 元素,那么可以在 video 元素中间插入一段文字用于提示,这样,旧的浏览器就可以显示这段文字给用户。如:

<video src="音频路径" controls="controls">您的浏览器不支持 video 标签</video>

虽然可以用src属性来链接视频的路径,但是只能链接一种格式,如果这样这个格式不被浏览器支持那不就完了,只能链接一种格式这很难让每种浏览器都支持这种格式啊。于是就出现了source元素,这样就可以解决这个问题了,source元素嵌套在video里,并且是可以多次出现的,每个source元素对应一种格式视频。这样一来,浏览器就会从这些格式中选择可以识别的格式来播放。写法如下:

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

用source元素来链接到不同的视频文件,这样浏览器会自动选择一个可以识别的格式来播放。最后附上主流浏览器支持格式


视频格式\浏览器 IE Firefox Opera Chrome Safari
Ogg 不支持 3.5+ 10.5+ 5.0+ 不支持
MPEG4 9.0+
不支持
不支持
5.0+ 3.0+
WebM 不支持
4.0+ 10.6+ 6.0+ 不支持


audio基本的语法

其实视频和音频的语法及使用方法都是一样的 audio也是这样写

<audio src="音频路径" controls="controls"></audio>

为了友好提示也可以在 audio 元素中间插入一段文字用于提示

<audio src="音频路径" controls="controls">您的浏览器不支持 audio 标签</audio>
浏览器不支持某种音频格式,这个时候也可以这样写
<audio controls="controls">
	您的浏览器不支持 audio 标签
	<source src="music\music.mp3">
	<source src="music\music.wav">
</audio>
同样也是用source元素来链接到不同的音频文件,这样浏览器会自动选择第一个可以识别的格式来播放。最后附上主流浏览器的支持音频格式


音频格式\浏览器 IE Firefox Opera Chrome Safari
Ogg 不支持 3.5+ 10.5+ 3.0+
不支持
MP3 9.0+ 22+
不支持
3.0+
3.0+
WAV 不支持
4.0+ 10.6+ 不支持
3.0+


分享

上一篇:没有了

发表评论

提交评论

清空信息
关闭评论

评论列表

av atar
苏晨 2018-10-20 09:26:08
回复
@前端共享博客 :不错不错,整理的挺好的
老实说,用到的地方并不多,所以赶紧记录一下,以免忘记哈哈。
 Windows 7   Chrome 68.0.3440.84
av atar
前端共享博客 2018-10-19 13:57:48
回复
不错不错,整理的挺好的
 Windows 10   Chrome 65.0.3325.181