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>

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

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

reg183

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值