多媒体标签的使用(video&audio)

坑军之王

2021-11-15

187

在H5规范之前，如果想在网页上播放音频、视频，通常需要借助第三方插件：如flash；就算不使用Flash，也是需要专门开发相应的插件，其结果也是需要下载第三方插件，其安全性存在不足，且安装插件的过程繁琐。

H5出现的新标签：<vedio>和<audio>两个标签支持音频、视频的插入。且只要是浏览器支持H5，都能简单的实现相关资源（音频、视频）在网页中的插入。

1.Vedio和Audio元素的使用

在HTML文件中直接使用<vedio>和<audio>即可完成使用。

实例1 video元素的使用

<body>

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

</body>

图1 vedio标签展示效果

在video标签内需要加入control属性加入视频控件,否则视频将无法正常播放。国内的视频网站对于视频控件来说基本上都是自行编写样式的。对于自行编写样式并能完成视频插件的正常使用的部分，需要对JavaScript进行学习后进行实践。

实例2 audio标签的使用

<body>

<audio src="music/G.K%20-%20MACHINES%20ARE%20TALKING.mp3" controls>您的浏览器不支持audio标签</audio>

</body>

图2 audio标签展示效果

audio标签和video标签实际上都是对媒体资源的引用，使用的方法也是一样的，只是audio是针对于音频标签，video是针对于视频的标签，下面将简单叙述这两个标签的属性。

属性	说明
src	完成对资源的引入
autoplay	资源在加载完成后自动播放
controls	在标签引入资源是使用H5自带的播放控件
loop	使资源循环播放
preload	选择是否预加载资源，有三个属性： auto：预加载资源 Metadata：只加载资源的元数据，如资源的播放时间、字节数、第一帧等属性 None：不对资源进行加载如果加载了autoplay属性，本属性则会被忽视。
poster	只对video属性生效，指定一张图片的地址，用于决定视频下载之后播放前的封面展示。
width	只对video属性生效，指定视频播放器的宽度
height	只对video属性生效，指定视频播放器的高度

由于视频、音频资源的格式众多，且部分格式设计厂家的独有专利，故浏览器不支持这些特别的格式，如腾讯视频的.qlv，优酷视频的.kux。这里的视频格式暂且不谈，由于不同的浏览器对视频的转码方式不同，故在标签内使用标签使用src引入资源，让浏览器从上往下自行选择浏览器支持的视频文件。