Using VideoJS is very easy. This is the first blog to learn live streaming, can quickly achieve a live broadcast, does not include audio and video collection, just responsible for playback, so very simple.

First, open the VideoJS Started site and copy the following code into our HTML page. This site has both of them, and I have the latest ones here:

<head>
  <link href="https://vjs.zencdn.net/7.10.2/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-video"
    class="video-js"
    controls
    preload="auto"
    width="640"
    height="264"
    poster="MY_VIDEO_POSTER.jpg"
    data-setup="{}"
  >
  	<! Change the address to your own -->
    <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="https://vjs.zencdn.net/7.10.2/video.js"></script>
</body>
Copy the code

If there is no video, this link can be downloaded to online MP4 address test;

This completes a simple video.

The VideoJS library also supports various protocols. Today’s study is HLS protocol, need to find this plug-in, put into the video.

The address of the plug-in: Videojs Plugins.

The HLS address is videojs-contrib-hls CDN

Replace the source tag line with the following:

<source
   src="https://example.com/index.m3u8"
   type="application/x-mpegURL">
Copy the code

Put the following CDN link address into the HTML:

<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
Copy the code

Then write the following in our JavaScript code:

videojs("my-video", {// Where my-video is the ID of the video tag
  with: 1000.height: 800.// I specified the height and width
  html5: {
    hls: {
      withCredentials: true,}}});Copy the code

As the address given in the above example does not work, it needs to be replaced with the live address of the corresponding protocol. Below is the address of the two protocols provided by a netizen. I took the live address of CCTV-1 and tested it, and found it was successful. Live broadcast test address RTMP, HLS.

This is the renderings. My web is a little bad.