HTML中音视频的实现

在网页中,除了文字和图片,也经常需要添加音频、视频等多媒体文件来提升用户体验。在HTML5出现之前,HTML4.0插入多媒体文件需要使用插件的方式,使用标签定义一个嵌入对象。HTML5中直接提供了音频标签和视频标签,使音频和视频元素真正成为网页的基本元素。

音频元素

。标签中的文字“您的浏览器不支持audio标签”。在高版本浏览器中不会显示,只有不支持

1、src

src属性是必要属性,用来指定需要嵌入到网页中的音频文件的地址,这个属性和标签中的src属性相同。

2、controls

controls属性用来设置是否显示播放控制条。这是一个可选属性,如果没有这个属性网页运行时不会出现音乐播放控制条,可以通过javascript代码控制音频的播放。controls属性是一个布尔型属性,通常设置属性值为“controls”,但实际上这个值可以是任意值,也可以只有属性名,不赋值。只要这个属性出现,音频 元素就会显示播放控制条。

3、autoplay

autoplay属性用来设置网页加载时音频是否马上开始播放。这也是一个布尔型属性,只要设置了该属性,音频就会自动播放。如果没有这个属性,网页加载时只会加载音频,但不播放,只有通过控制条播放按钮或JavaScript代码启动音频。

4、loop

loop属性用于规定当音频结束后将重新开始播放。这也是一个布尔型属性,如果不设置,那么音频播放一遍后自动结束。

如果我们想要给网页设置一个循环播放的背景音乐,打开网页时即可开始播放,不需要显示控制条。音频文件存放在网站根目录下。

视频元素

视频元素是

HTML中音视频的实现_第1张图片

 

1、width和height

视频需要一个播放区域,

2、poster

poster属性用于设置视频下载时显示的图片,或者在用户单击播放按钮前显示的图片,属性值是图片的URL地址。

mp4,支持使用H264视频编解码器和AAC音频编解码器的MPEG4文件,

WebM,支持使用VP8视频编解码器和Vorbis音频编解码器的WebM文件,

ogg,支持使用Theora 视频编解码器和Vorbis音频编解码器的ogg文件。

3、元素

不同的浏览器支持音频和视频格式不同,HTML中通过标签解决这一问题,标签可以嵌套在

HTML中音视频的实现_第2张图片

type属性用于规定媒体资源的MIME类型。用于视频的常用MIME类型有:video/ogg、video/mp4、video/WebM.用于音频的常用MIME类型有:audio/ogg、audio/mpeg.浏览器会尝试按标签的顺序依次找mp4、ogg、WebM来播放视频,只要有一种格式文件被支持,就可以播放。

你可能感兴趣的:(音视频,html,html5)