video.js实现鼠标移入播放鼠标移出暂停

最新推荐文章于 2023-11-30 16:02:49 发布

reg183

最新推荐文章于 2023-11-30 16:02:49 发布

阅读量2.6k

点赞数 1

分类专栏：前端文章标签： HTML5 video.js 视频播放器事件监听 JavaScript

本文链接：https://blog.csdn.net/chendongpu/article/details/122257424

版权

前端专栏收录该内容

255 篇文章 3 订阅

订阅专栏

效果如下:
请添加图片描述

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