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版）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link href="//vjs.zencdn.net/7.3.0/video-js.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="//vjs.zencdn.net/7.3.0/video.min.js"></script>

</head>
<body>
  <div id="app">
      <video
      id="my-player"
      class="video-js"
      preload="auto"
      poster="//vjs.zencdn.net/v/oceans.png"
      @mouseenter="play"
      @mouseleave="pause"
      ref="myPlayer"
      @click="directToDetail(1)"
      >
    <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
  </video>
  </div>
  <script>
  var app = new Vue({
    el: '#app',
    data: {
    },
    methods: {
     play(){
         videojs('my-player').play();
     },
     pause(){
        videojs('my-player').pause();
     },
     directToDetail(id){
     //	此处可以传入相应的id进行点击传递跳转到详情页面
       console.log(3,id)
     }
    },
  })
</script>
</body>
</html>

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

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

于是又去阅读了video.js的包的说明，自己打印出 videojs(‘my-player’) 获取video对象的属性和方法，查阅相应的资料，在video上添加muted可以解决上述问题。
标签内添加muted
<video
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);
     },

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

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_44329718/article/details/88807151
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2021-05-31 10:14:43
阅读 ( 899 )
分类：前端

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

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看