使用H5快速写一个直播（基于videojs和hls协议直播视频）（每日计划）使用videojs是非常容易的。这是学习直播

使用videojs是非常容易的。这是学习直播的第一篇博客，可以快速实现一个直播，不包含音视频的采集，只是负责播放，所以非常简单。

首先打开 videojs started 网站，将以下的代码拷贝到我们的 html 页面中，这个网站中都有，我这里拿到的是最新的：

<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="{}"
  >
  	<!-- 把地址换成自己的 -->
    <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>

如果没有视频，这个链接可以下载到在线MP4地址测试；

这样就可以完成一个简单的视频。

videojs 这个库也支持各种协议，今天学习的是 hls 协议的，需要找到这个插件，放入到 video 中。

相关插件的地址：videojs plugins。

其中 hls 的地址为： videojs-contrib-hls cdn

将 source 标签这行代码替换成下面的代码：

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

将下面的 cdn 链接地址放置到 html 中：

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

然后在我们的 JavaScript 代码中写下如下代码：

videojs("my-video", {// 这里的 my-video 是 video 标签的 id
  with: 1000,height: 800,//我指定了高宽度了
  html5: {
    hls: {
      withCredentials: true,
    },
  },
});

由于上面示例给的地址并不能用，所以需要替换成相应协议的直播地址，下面是一个网友提供的两种协议的地址，我取了 CCTV-1 的直播地址测试了一下，发现成功了。实时直播测试地址rtmp,hls。

这是效果图，我的网有点不好。