video.js实现鼠标移入播放鼠标移出暂停__vue鼠标移入移出切换事件

相关文章推荐

怕老婆的大熊猫 · 习近平总书记：产业链、供应链在关键时刻不能掉链子· 4 月前 ·

痴情的鸡蛋 · 数据库邮件日志和审核 - SQL ...· 1 年前 ·

失落的饭卡 · 【实操指南】处理电镜图片别焦虑，DM干货手把 ...· 2 年前 ·

害羞的海龟 · Nuxt ...· 2 年前 ·

咆哮的牛肉面 · How to Solve Python ...· 2 年前 ·

效果如下:
video.js实现鼠标移入播放鼠标移出暂停_前端

<html>
<head>
  <link href="video-js/video-js.css" rel="stylesheet" />

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>

<body>
  <video
    id="my-video1"
    class="video-js"
    controls
    preload="auto"
    width="640"
    height="264"
    poster="MY_VIDEO_POSTER.jpg"
    data-setup="{}"

  >
    <source src="MY_VIDEO.mp4" type="video/mp4" />
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a
      >
    </p>
  </video>

  <p></p>
  <p></p>
  <video
          id="my-video2"
          class="video-js"
          controls
          preload="auto"
          width="640"
          height="264"
          poster="MY_VIDEO_POSTER.jpg"




    

          data-setup="{}"

  >
    <source src="MY_VIDEO.mp4" type="video/mp4" />
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank"
      >supports HTML5 video</a
      >
    </p>
  </video>

  <script src="video-js/video-js.js"></script>

  <script>

      var options = {
          muted: true, //默认情况下将使所有音频静音
          controls:false
      };

      function onPlayerReady() {
          videojs.log('播放器已经准备好了!');

          // In this context, `this` is the player that was created by Video.js.<br>  // 注意，这个地方的上下文， `this` 指向的是Video.js的实例对像player
          // this.play();

          //监听视频结束
          // How about an event listener?<br>  // 如何使用事件监听？
          this.on('ended', function() {
              videojs.log('播放结束了!');
          });

          let that=this;
          //监听鼠标点击事件
          this.on('click',function() {
              videojs.log('click!');
          })

          //
          this.on('mouseover',function() {
              videojs.log('mouseover!');
              that.play();
          });

          this.on('mouseout',function() {
              videojs.log('mouseout!');
              that.pause();
          })
      }
      var player = videojs('my-video1', options,onPlayerReady );
      var player2 = videojs('my-video2', options,onPlayerReady );




  </script>
</body>
</html>

将代码放到网站的根目录就可以看到效果了
完整代码下载