vue实现自定义H5视频播放器的方法步骤-创新互联

前言

创新互联服务项目包括桥东网站建设、桥东网站制作、桥东网页制作以及桥东网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，桥东网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到桥东省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

前段时间基于vue写了一个自定义的video播放器组件,踩了一些小坑, 这里做一下复盘分享出来,避免日后重复踩坑...

设计阶段

这里就直接放几张完成后的播放状态图吧,界面布局基本就是flex+vw适配一把梭,也比较容易.

需要实现的几个功能基本都标注出来了; 除了还有一个视频加载失败的...下面就这届上代码了;刚开始构思的时候考虑了一下功能的实现方式: 一是用原生的DOM操作,获取video元素后,用addEventListener来监听; 二是用vue的方式绑定事件监听; 最后图方便采用了两者结合的方式,但是总感觉有点乱, 打算后期再做一下代码格式优化.

video组件实现过程

组件模板部分

主要是播放器的几种播放状态的逻辑理清楚就好了, 即: 播放中,缓存中,暂停,加载失败这几种情况,下面按功能分别说一下

本文名称：vue实现自定义H5视频播放器的方法步骤-创新互联
标题来源：http://shouzuofang.com/article/dcigog.html