HTML5无插件多媒体Media——音频audio与视频video

最新推荐文章于 2024-07-12 21:03:47 发布

刻刻帝丶

最新推荐文章于 2024-07-12 21:03:47 发布

阅读量5.1k

点赞数 10

CC 4.0 BY-SA版权

分类专栏： Web前端 HTML/H5 文章标签： html5 多媒体视频音频

本文为博主原创文章，转载请添加原文地址，需要大厂内推的+我脉脉哦：丛培森

本文链接：https://blog.csdn.net/q1056843325/article/details/60336226

tip：有问题或者需要大厂内推的+我脉脉哦：丛培森 ٩( ‘ω’ )و

【本文源址：http://blog.csdn.net/q1056843325/article/details/60336226 转载请添加该地址】

音频与视频现在已经变得越来越流行
各个网站为了保证跨浏览器的兼容性
仍然选择使用flash

（源码截自优酷）

#多媒体标签
##使用
HTML5增加了audio与video两个多媒体标签
兼容性还不错，低版本IE不支持
可以使我们不需要使用任何浏览器插件就能够插入音频与视频控件
而且非常的简单

（源码截自Bilibili）

元素用法如下:

<audio src="media/xi-Halcyon.mp3" id="demoAudio">不支持H5-audio</audio>
<video src="media/Animation.mp4" id="demoVideo">不支持H5-video</video>

标签中内容如果浏览器不支持该标签就会显示
当然使用这两个元素的时候
最起码要添加src属性，属性值就是资源的url

但是每个浏览器由于版权问题支持的媒体格式也不同
所以就可以使用下面的方式

<audio id="demoAudio">
	<source src="media/xi-Halcyon.mp3">
	<source src="media/xi-Halcyon.ogg">
	...
	不支持H5-audio
</audio>

<video id="demoVideo">
	<source src="media/Animation.mp4">
	<source src="media/Animation.webm">
	...
	不支持H5-video
</video>