preface

Recently have time, put the VideoJS library simple translation, there is a need for small partners, you can see, absolutely more than other VideoJS Chinese documents on the market.

Videojs Chinese | | vidojs Chinese tutorial videojs Chinese manual | video. Js Chinese documentation (moyutime. Cn)

Access to video. Js

There are many ways to obtain video.js (note not videojs). Here we take CDN as an example to explain how to obtain video.js. For more information on how to get video.js, see the next tutorial installation chapter.

CND

Video.js CDN can be found on both Jsdelivr and BootcDN. Let’s take Jsdelivr as an example.

The js and CSS to be introduced are as follows:

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

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

The introduction of video. Js

The easiest way to use video.js is to create a video tag that contains the data-setup property. The data-setup property can contain various configurations of Video.js. If you don’t need anything, you can pass an empty object “{}”

<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">If you want to use video.js, make sure your browser runs JavaScript and supports it<a href="https://videojs.com/html5-video-support/" target="_blank"
      >HTML5 video</a>
  </p>
</video>
Copy the code

When the page is loaded, video.js will find the video TAB and launch a player.

The complete code is as follows:

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/video-js.min.css" rel="stylesheet" />

  <! To support IE8, use pre-V7 video.js and import the following JS link. -->
  <! -- < 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">If you want to use video.js, make sure your browser runs JavaScript and supports it<a href="https://videojs.com/html5-video-support/" target="_blank"
        >HTML5 video</a>
    </p>
  </video>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/video.min.js"></script>
</body>
Copy the code

Js start

If you don’t want to start the player automatically, you can remove the data-setup property from the Video TAB and start it with JS code.

let player = videojs('my-player');
Copy the code

When calling the VideoJS function, you can also pass the Options configuration object and the callback function as parameters.

let options = {};

let player = videojs('my-player', options, function onPlayerReady() {
  videojs.log('The player is ready! ');

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

  this.on('ended'.function() {
    videojs.log('End of play! ');
  });
});

Copy the code

The complete code

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

    <! To support IE8, use pre-V7 video.js and import the following JS link. -->
    <! -- < 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">If you want to use video.js, make sure your browser runs JavaScript and supports it<a href="https://videojs.com/html5-video-support/" target="_blank"
          >HTML5 video</a>
      </p>
    </video>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/video.min.js"></script>
    <script>
      let options = {};
      let player = videojs('my-player', options, function onPlayerReady() {
        videojs.log('The player is ready! ');

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

        this.on('ended'.function() {
          videojs.log('End of play! ');
        });
      });
    </script>
  </body>

</html>
Copy the code