10分钟快速上手videojs

前言

最近有时间，就把videojs这个库简单翻译了下，有需要的小伙伴，可以看下，绝对比市面上其他videojs中文文档全。

videojs中文网|vidojs中文教程|videojs中文手册|video.js中文帮助文档 (moyutime.cn)

获取video.js

获取 video.js (注意不是videojs) 的方法有很多，这里我们以CDN为例，说明如何获取video.js。更多获取video.js的方法，请查看下一章教程安装。

CND

在 jsdelivr 和 bootcdn 上都可以找到video.js的cdn，我们以jsdelivr为例。

需要引入的js和css如下:

cdn.jsdelivr.net/npm/video.j…

引入video.js

最简单的使用video.js的方式是创建一个video标签，并且包含data-setup属性。data-setup属性可以包含video.js的各种配置。如果什么都不需要，可以传一个空对象"{}"

<video
  id="my-player"
  class="video-js"
  controls
  preload="auto"
  width="640"
  height="264"
  poster="http://vjs.zencdn.net/v/oceans.png"
  data-setup="{}"
>
  <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
  <p class="vjs-no-js">
    如果想使用video.js，请确保浏览器可以运行JavaScript，并且支持
    <a href="https://videojs.com/html5-video-support/" target="_blank"
      >HTML5 video</a>
  </p>
</video>

页面加载完成后，video.js会找到该video标签，然后启动一个播放器。

完整代码如下：

<head>
  <link href="https://cdn.jsdelivr.net/npm/video.js@7.10.2/dist/video-js.min.css" rel="stylesheet" />

  <!-- 如果要支持IE8，请使用v7之前的video.js，并且引入下面这个js链接。-->
  <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>
<body>
  <video
    id="my-player"
    class="video-js"
    controls
    preload="auto"
    width="640"
    height="264"
    poster="http://vjs.zencdn.net/v/oceans.png"
    data-setup="{}"
  >
    <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
    <p class="vjs-no-js">
      如果想使用video.js，请确保浏览器可以运行JavaScript，并且支持
      <a href="https://videojs.com/html5-video-support/" target="_blank"
        >HTML5 video</a>
    </p>
  </video>

  <script src="https://cdn.jsdelivr.net/npm/video.js@7.10.2/dist/video.min.js"></script>
</body>

js启动

如果不想自动启动播放器，可以移除video标签上的data-setup属性，然后使用js代码启动。

let player = videojs('my-player');

调用videojs函数的时候，也可以传options配置对象和callback回调函数作为参数。

let options = {};

let player = videojs('my-player', options, function onPlayerReady() {
  videojs.log('播放器准备好了!');

  // In this context, `this` is the player that was created by Video.js.
  this.play();

  this.on('ended', function() {
    videojs.log('播放结束!');
  });
});

完整代码

<html>
  <head>
    <link href="https://cdn.jsdelivr.net/npm/video.js@7.10.2/dist/video-js.min.css" rel="stylesheet" />

    <!-- 如果要支持IE8，请使用v7之前的video.js，并且引入下面这个js链接。-->
    <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
  </head>
  <body>
    <video
      id="my-player"
      class="video-js"
      controls
      preload="auto"
      width="640"
      height="264"
      poster="http://vjs.zencdn.net/v/oceans.png"
    >
      <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
      <p class="vjs-no-js">
        如果想使用video.js，请确保浏览器可以运行JavaScript，并且支持
        <a href="https://videojs.com/html5-video-support/" target="_blank"
          >HTML5 video</a>
      </p>
    </video>

    <script src="https://cdn.jsdelivr.net/npm/video.js@7.10.2/dist/video.min.js"></script>
    <script>
      let options = {};
      let player = videojs('my-player', options, function onPlayerReady() {
        videojs.log('播放器准备好了!');

        // In this context, `this` is the player that was created by Video.js.
        this.play();

        this.on('ended', function() {
          videojs.log('播放结束!');
        });
      });
    </script>
  </body>

</html>