vue项目中视频video的运用，实现鼠标移入自动播放，移出暂停，点击可以进入跳转详情页面

如果你尝试在vue中自己直接使用video标签，会发现无法调用play和pause方法，
具体可参考jq插件http://www.jq22.com/jquery-info404
插件描述：Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。（要支持ie低版本请下载5.4.3版 ）

这段代码我在跑的过程中，是可以的，可是当我回到自己家里再跑又不行了，直接会报错 “uncaugh(in promise) DOMException”

刷新刷新，时而可以时而不可以，最后排查是在公司可以稳定实现不报错的原因是，mac连接着外接显示器，声音默认是关闭了，浏览器对于加载的视频不进行限制了？

于是又去阅读了video.js的包的说明，自己打印出 videojs(‘my-player’) 获取video对象的属性和方法，查阅相应的资料，在video上添加muted可以解决上述问题。
标签内添加muted
id=“my-player”
class=“video-js”
preload=“auto”
poster="//vjs.zencdn.net/v/oceans.png"
@mouseenter=“play”
@mouseleave=“pause”
ref=“myPlayer”
muted
@click=“directToDetail(id)”
>

函数变成如下

play(){
	videojs('my-player'+id).tagAttributes.muted=false
     videojs('my-player').play();
 },
 pause(){
 	videojs('my-player'+id).tagAttributes.muted=true
    videojs('my-player').pause();
 },

到此可以说基本实现功能，可是当时在项目中使用的时候，发现，鼠标首次移入并不能播放，第二次移入是可以播放，这里对于原因没有找到，但是第一想法是用定时器去解决，事实也确实有效。

小tip:
关于为什么我的定时器使用的是20ms，因为想到动画一帧大约在16ms的细节。此处亲测有效，ms过小无效。

    play(){
	        videojs('my-player'+id).tagAttributes.muted=false;
	        let timer = setTimeout(()=>{
	              videojs('my-player').play();
	              clearTimeout(timer);
	    	 },20);
     },
     pause(){
     	videojs('my-player'+id).tagAttributes.muted=true;
     	 let timer = setTimeout(()=>{
     	 	 videojs('my-player').pause();
     	 	 clearTimeout(timer);
     	 },20);
     },

欢迎转载，请注明出处，原创实践分享，如有错误，欢迎大神指正。