html五编写视屏_打造自己的html5视频播放器

前段时间重新学习了一下html5的video部分，以前只是停留在标签的使用上，这一次决定深入了解相关的API，并运用这些API打造一个简单的视频播放器。所谓“打造自己的”，就是要自己重写video标签的控制栏部分，实现包括播放、暂停、进度和音量控制、全屏等功能，并自定义控制栏的样式。这是我自己的视频播放器的演示地址(请用chrome打开)：

下面我将逐步讲解打造自己的html5视频播放器的过程：

一、自定义控制栏涉及到的主要API

1、video播放相关API

只读属性：

video.duration：整个媒体文件的播放时长，单位s

video.paused ：如果媒体文件被暂停，则返回true；如果还没开始播放，默认返回true

video.ended ：如果媒体文件播放完毕，则返回true

可写属性：

video.currentTime：以s为单位返回从开始播放到现在所用的时间。在播放过程中，设置currentTime来进行搜索，并定位到媒体文件的特定位置

video.volume ：在0.0到1.0之间设置音频音量的相对值，或者查询当前音量相对值

video.muted ：检测当前是否为静音，是则为true；为文件设置静音或消除静音

控制函数：

video.play() ：播放视频文件

video.pause() ：暂停处于播放状态的视频文件

video.canPlayType() ：测试video元素是否支持给定MIME类型的文件

监听事件：

ontimeupdate ：当video.currentTime发生改变时触发该事件

2、全屏控制API

说明：这里只给出webkit的全屏API，本代码没有做兼容性处理，主要应用了webkit的一些高级API和chrome的伪元素，所以前面请大家用chrome打开演示地址。

video.webkitRequestFullScreen()：全屏显示

document.webkitCancelFullScreen()：退出全屏

document.webkitIsFullScreen：如果当前处于全屏状态，则返回true,否则返回false

document.addEventListener('webkitfullscreenchange', handler)：当在全屏和非全屏状态切换时，触发该事件

3、本地文件读取API

说明：我的这个视频播放器支持从本地添加视频文件播放，支持的格式在webkit浏览器支持的html5视频播放标准范围内。本地文件读取API是html5的新标准。

window.URL.createObjectURL(file)：file为文件对象，该函数返回指向文件的对象URL，通过该URL可以访问文件。

video.src = window.URL.createObjectURL(file);

二、视频播放器控制栏的样式实现

为了图方便，布局上我使用 pure 来帮忙，一个很简洁的css框架，其实也没用到它多少。至于那些控制按钮