从零实现一个自定义html5播放器

写在最前

本次的分享是一个基于HTML5<vedio>标签实现的一个自定义视频播放器。其中实现了播放暂停、进度拖拽、音量控制及全屏等功能。
欢迎关注我的博客，不定期更新中——

效果预览

点我查看源码仓库。

核心思路

我相信一定会有些没有接触过制作自定义播放器的童鞋对于<vedio>标签的认识会停留在此。

<video controls="controls" autoplay="autoplay">
  <source src="movie.ogg" type="video/ogg" />
</video>

其中controls属性经过设定，会在界面中显示一个浏览器自带的控制条。如果对于UI没有要求的需求，其内置控制器已经可以满足大部分的需求。当然了如果是这样你们也不会看到这篇分享了=。=

隐藏控制条并模拟

那么实现一个自定义功能的播放器关键就在于，我们不使用原生的控制