HTML5媒体元素

目录

一、视频元素

1.视频元素的基本语法

2.视频元素的应用

二、音频元素

1.音频元素的基本语法

2.音频元素的应用

三、自定义视频播放器

1.自定义视频播放器需要的属性和方法

2.自定义视频播放器的制作步骤

---

一、视频元素

Web上的视频播放从来没有一个固定的标准，多数视频都是通过像Flash这样的插件来播放的，不同的浏览器往往拥有不同的插件。HTML5中的video元素是现在播放视频的一种标准方法。

1.视频元素的基本语法

HTML5中的video元素是用来播放视频文件的，支持Ogg、MPEG4、WebM等视频格式，用法如下：

<video src="./sp1.mp4" ></video>

视频1

2.视频元素的应用

①control给视频添加控制条。

<video src="./sp1.mp4" controls></video>

<video controls>
			<source src="./sp1.mp4">
</video

②autoplay表示音频或视频能在页面加载时自动播放，不需要用户控制播放。 

<video src="./sp1.mp4" controls autoplay></video>
		

<video controls autoplay>
		<source src="./sp1.mp4" />
</video>

③loop属性表示音频或视频可以循环播放。

<video src="./sp1.mp4" controls autoplay loop></video>

<video controls autoplay loop>
		<source src="./sp1.mp4" />
</video>

④poster属性设置视频播放前的封面图片。

<video src="./sp1.mp4" controls autoplay loop poster="./tp1.jpg"></video>

<video controls autoplay loop poster="./tp1.jpg">
		<source src="./sp1.mp4" />
</video>

 ⑤preload属性规定是否在页面加载后再载入视频。

none：用户不需要对视频进行预先加载，这样可以减少网络流量。

metadata：告诉服务端，用户不想马上加载视频，但需要预先获得视频的元数据信息（例如文件的大小、时长等），视频网站上的视频文件在加载的时都会有时长显示，这可以这可以通过设置metadata属性值来设置。

auto：表示视频要实时播放，需要服务器向用户计算机连续、实时传送。通常在预先播放前要预先下载一段资料作为缓冲，用户不必等到整个文件下载