📌  相关文章
📜  video js 切换播放暂停 - Javascript (1)

📅  最后修改于: 2023-12-03 15:21:00.542000             🧑  作者: Mango

Video.js 切换播放暂停 - Javascript

在开发视频播放器Web应用时，Video.js是一款非常流行的HTML5视频播放器库。当用户点击视频的播放按钮时，我们需要切换播放和暂停的状态。本文将介绍如何在Javascript中使用Video.js库来实现这一功能。

步骤1：导入Video.js

首先，我们需要将Video.js库导入我们的HTML文档中。可以通过CDN或者本地导入来实现，这里我们以CDN方式为例： 

<head>
  <link href="https://vjs.zencdn.net/7.14.3/video-js.css" rel="stylesheet" />
  <script src="https://vjs.zencdn.net/7.14.3/video.min.js"></script>
</head>
步骤2：创建Video.js实例

我们需要使用Video.js库创建一个视频实例，并将其附加到HTML5 <video> 标签上。这里我们以具有 id="my-video" 的视频为例：

<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264">
  <source src="my-video.mp4" type="video/mp4" />
</video>

const video = videojs('my-video');
步骤3：绑定事件

我们需要在 click 事件上绑定一个事件监听器，以便在点击播放按钮时切换播放和暂停状态。

const playButton = document.querySelector('.vjs-play-control');
playButton.addEventListener('click', function() {
  if (video.paused()) {
    video.play();
  } else {
    video.pause();
  }
});

这样，当用户点击播放按钮时，我们将进行以下操作：

  • 检查视频是否已暂停
  • 如果视频已暂停，则将其播放
  • 如果视频正在播放，则将其暂停
完整示例
<!DOCTYPE html>
<html>
  <head>
    <link href="https://vjs.zencdn.net/7.14.3/video-js.css" rel="stylesheet" />
    <script src="https://vjs.zencdn.net/7.14.3/video.min.js"></script>
  </head>
  <body>
    <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264">
      <source src="my-video.mp4" type="video/mp4" />
    </video>
    <script>
      const video = videojs('my-video');
      const playButton = document.querySelector('.vjs-play-control');
      playButton.addEventListener('click', function() {
        if (video.paused()) {
          video.play();
        } else {
          video.pause();
        }
      });
    </script>
  </body>
</html>
结论

通过使用Video.js和Javascript，我们可以实现在点击播放按钮时切换播放和暂停状态。记得检查视频是否已暂停，并相应地进行操作。