HTML5多媒体

一、概述

在HTML5之前要在网页加入视频，必须使用object和embed元素并为其添加许多属性和参数，而且需要Flash插件。

而在HTML5中新增了<video></video>与<audio></audio>元素专门用于播放视频和音频。

1
2
3
4
5
6
7

<audio src="" autoplay="autoplay" preload="preload" loop="loop">
    此处内容为不支持audio元素的页面显示的[替代文字]
</audio>

<video src="">
    此处内容为不支持video元素的页面显示的[替代文字]
</video>

二、基本属性和详细使用方法

二者属性大致相同。

（一）音视频通用基本属性

• controls=""属性设置播放控制条的显示，值为空或任意字段都会生效，样式为浏览器预设样式。

  如果不添加该属性那么页面上将不显示任何内容，所以一般是必备属性，除非使用自定义控制条。

• width和height属性是video标签独有的，设置播放视频界面的宽和高，单位默认为像素可省略，值为空或非法值或auto时以poster的实际尺寸（优先）或视频实际尺寸显示。

• src属性设置音视频文件的URL地址。

• autoplay属性值为空或任意字段都会生效，用于设置该媒体是否在页面加载完成后自动播放。

• preload属性指定媒体文件是否预加载：

  • none：不进行预加载。
  • metadata：只预加载媒体的元数据（媒体字节数、第一帧、播放列表、持续数间等）。
  • auto：默认值，全部预加载。

• loop属性指定是否循环播放，属性值为空或任意字段都会生效。

• poster属性用于指定视频加载中、加载失败或未点击播放时显示的图像。

• muted：静音。

1
2
3
4
5
6
7

<audio src="media/杀死那个石家庄人.mp3" preload="auto" loop="" controls="" poster="./img/moon01.png">
	此处内容为不支持audio元素的页面显示的替代文字
</audio>

<video src="media/VID_20231105_124116.mp4" preload="auto" controls="" poster="./img/moon01.png" wid="" height="">
	此处内容为不支持video元素的页面显示的替代文字
</video>

（二）<track />标签

常用属性：

HTML5视频外挂字幕英文简称webVTT(Video Text Track)，是以.vtt为扩展名的纯文本文件，以UTF-8编码。

1
2
3

<video src="" width="" height="" >
	<track kind="subtitles" src="example.vtt" srclang="zh" />
</video>

三、上手

1、音乐播放器

2、视频播放器