vue disabled 什么意思?_用Vue做个简易的播放器组件

还是按照惯例先上效果图

基本功能有

1. 播放视频
2. 鼠标移入时显示控制器，移出时隐藏
3. 显示进度
4. 拖动进度条
5. 拖动音量

这次我选用Vue来实现播放器的封装，取名ForcePlayer，给你三秒钟，猜猜看为什么叫这个名字。

First Thing First

首先最重要的就是去熟悉一下<video>元素啦，常用的属性和事件是必须的。<video>还有个头大的现实就是兼容性问题，特别是在移动端，更特别是在Android操作系统上，各大厂商都在<video>上动了点手脚。而流量入口之王的微信里内置浏览器的<video>也是自己的实现，没有调用系统原生的控件。不过好在兼容性不是本文的重点。仍然还是推荐去MDN上查看<video>元素的说明。

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video​developer.mozilla.org

拖动条组件

浏览器内置的<input type="range">元素实在是太丑了，

虽然丑，但是很温柔

没办法，只能自己做一个出来。新建一个文件，取名Track.vue。

实际过程中，其实一直在不停的迭代修改，即便到了开发后期，也会时不时的跑回来修改这个组件。行文至此，必须再盗一张图啊。

模板部分很简单，分别由背景、进度、手柄组成，不需要多余部分。

<

<script>里设定了进度的范围是在0 ~ 100之间，并没有放开配置。有个disable属性，主要用做于一些特殊场合，比如在线教育，是不允许用户拖动进度观看的，这里使用的CSS属性point-event来做到禁用事件交互。

export 

有一点是从其他组件源码里学来的，就是只在开始拖动的时候才把mousemove和mouseup加上，在拖动结束的时候，把这两个事件给移除，避免了一些出错的可能和浪费，我觉得是一项有效的best practice。我一开始的做法是通过标记避免执行mousemove和mouseup内部代码，略显笨笨的。

这里缺少的是

1. 步进，拖动条范围只在100以内，进度不是一个0 ~ 100的整数，而是浮点数，在拖动条比较长的情况下，没有步进的赶脚
2. 没有做debounce，假设有个用户不停的在拖动，那就没有性能上的优化，如果对于在线播放这种场景，性能上的浪费会比较明显
3. 没有做tooltip显示，没别的理由，就是因为懒

播放器模板

一层层的剥开啊，最外面是一个包裹的容器

<

鼠标进入和移出可以显示/隐藏控制器。

接下来是

<

这个是播放前的封面，播放后把它挪走，用了一张尤达大师的动图来做封面。

<video>主体很简单

<

之所以需要<slot>是因为有可能<video>里要设定视频的多种格式。

上部的标题也很简单

<

下部的控制器

<

分三个部分，左边是播放控制和时间进度的显示，中间的进度条，右边是声音大小的控制和全屏按钮。

播放器代码

需要传入的组件就是刚才写的Track.vue了

export 

传入的属性

props

其中影片URL是通过<slot>传入的，没在这里列出。

内部数据如下

data

在载入DOM完成时，要把<video>上监听的事件都给加上去

mounted

剩下的就是方法和监视器了

methods

一些代码都没有考虑兼容性哈，比如开启全屏的，也是因为懒。

这里所做的其实主要就是处理好进度条、Vue、<video>这三者之间的联动关系，高内聚低耦合，把脏活累活都隐在了组件的内部。

手表能算高内聚的典范吧

在外层调用的时候

<

代码放到交友中心上了

swordrain/force-player​github.com