videojs m3u8 视频卡顿

最新推荐文章于 2024-12-10 09:57:44 发布

roooxy

最新推荐文章于 2024-12-10 09:57:44 发布

阅读量2k

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/weixin_44611785/article/details/127388620

版权

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

videojs m3u8 视频卡顿

问题：

视频在播放一段时间后出现卡顿的现象

文档学习：

https://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

coding：

<body>
  <style>
    #my-video {
      width: 100%;
      height: 100px;
    }
  </style>
  <video id="my-video" muted autoplay="autoplay" class="video-js vjs-default-skin vjs-big-play-centered myVideo"
    controls>
  </video>
  <script>
    let timer = null
    let src = ".m3u8"//m3u8格式的视频流
   

    var myPlayer = videojs('my-video', {
      autoplay: true,
      muted: true,
      fluid: true,
      controls: true,
      techOrder: ['html5'],
      sources: [{
        type: 'application/x-mpegURL', // m3u8/Hls 的视频流类型
        src: src // 对应播放的m3u8 路径
      }]
    },
      function () {
        // 视频准备好
        var tryTimes = 0;
        var oldSrc = this.src()
        var newSrc = oldSrc.indexOf('?') > -1 ? oldSrc + '&t=' + Date.now() : oldSrc + '?t=' + Date.now()
        this.on('loadedmetadata', function () {
          clearInterval(loaded_timer)
        })
        var seekingTimes = 0;
        var waitingTimes = 0;
        var loaded_timer;
        this.on("error", function () {
          this.src(newSrc);
          this.onload()
          // this.play();
        })
        //每次卡顿都会出发waiting
        this.on('waiting', function () {
          if (waitingTimes > 2) {
            waitingTimes = 0
            myPlayer.src(newSrc);
            this.onload()
          }
        })
      })
  </script>
</body>