html播放.m3u8格式视频

2021-09-26

html

字数统计: 311 | 阅读时长≈ 1 分钟

播放.m3u8格式视频时需要借助hls.js，为了下载速度快点，我们直接通过国内的cdn访问https://www.bootcdn.cn/hls.js/

hls.js

然后编写如下html内容

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/hls.js/1.0.8-0.canary.7807/hls.js"></script>
<h3>.m3u8视频播放效果</h3>
<video controls autoplay muted id="hlsVedio"></video>
<script type="text/javascript">
  window.onload = function() {
    var video = document.getElementById('hlsVedio');
    var videoSrc = 'https://hls.videocc.net/cef5baf690/f/cef5baf690579d94244803412596e82f.m3u8';
    if (Hls.isSupported()) {
      var hls = new Hls();
      hls.loadSource(videoSrc);
      hls.attachMedia(video);
      hls.on(Hls.Events.MANIFEST_PARSED, function () {
        if(video.paused) {
          video.play();
        } else {
          video.pause();
        }
      });
    }
    else if (video.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = videoSrc;
      video.addEventListener('loadedmetadata', function () {
        if(video.paused) {
          video.play();
        } else {
          video.pause();
        }
      });
    }
  }
</script>
</body>
</html>

运行之后的效果如下图

.m3u8视频播放效果

版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！