videojs实现web播放器播放hls

index.html：

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <title></title>
  <script src="video/video0.ts"></script>
  <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
  <script src="https://unpkg.com/video.js@6.7.1/dist/video.js"></script>
  <script src="https://unpkg.com/@videojs/http-streaming@0.9.0/dist/videojs-http-streaming.js"></script>
</head>
<style>
  @media (max-width:1300px) {
    .video-js{
      width: 100%;
      height: 500px;
      margin: 0 auto;
    }
  }
  @media (min-width: 1300px){
    .video-js {
      width: 50%;
      height: 400px;
      margin: 0 auto;
    }
  }
   /* .video-js{
      width: 50%;
      height: 400px;
      margin: 0 auto;
    }*/

</style>
<body>
<video-js id="my_video_1" class="vjs-default-skin" controls preload="auto" >
  <source src="video/video.m3u8" type="application/x-mpegURL">
</video-js>

<script>
  var player = videojs('my_video_1');
</script>

</body>
</html>

控制（请自行写方法，替换参数，经过测试，调用即可）：播放事件控制：

  var options = {};
        videojs(this.Warpper, options, function onPlayerReady() {
            this.play();
        });

暂停：

 var options = {};
        videojs(this.Warpper, options, function onPlayerReady() {
            this.pause();
        });

速度控制：

 player.playbackRate(this.speed);

videojs实现web播放器播放hls

Comments