hls.js播放hls直播源

最新推荐文章于 2024-05-20 16:28:19 发布

quan!!!

最新推荐文章于 2024-05-20 16:28:19 发布

阅读量2.6w

点赞数 3

分类专栏：网页直播文章标签： hls.js hls

本文链接：https://blog.csdn.net/qq_40816360/article/details/84074405

版权

网页直播专栏收录该内容

3 篇文章 1 订阅

订阅专栏

用了video.js来做播放器播放hls和rtmp直播源之后，这次用hls.js来播放Hls直播源

video.js和hls.js的区别和优缺点
video.js：

优点：功能比较强大，有很多功能封装好了，而且有自己的一套UI，在不同浏览器下显示比较一致
缺点：包比较大，实现hls直播的时候其实是内嵌了hls.js的代码，实际上是运用了hls.js，而且由于封装的ui和功能，使其不够纯净，不够灵活，修改ui的时候要用到其他的插件，有点画蛇添足的感觉

hls.js：

优点：包比较小，很纯净，UI可以根据自己的业务自扩展，自己封装功能和UI，比较切合自己开发的直播播放器，而且专业直播HLS
缺点：没有封装好的UI，功能上也需要自己去实现

hls.js播放hls直播源 （要放在服务器上）

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>hls.js</title>
    <link rel="stylesheet" href="./index.css">
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  </head>
  <body>
    <video id="video" controls></video>
    <script src="./index.js" charset="utf-8"></script>
  </body>
</html>

index.js:

var Hls = window.Hls
var url = 'http://localhost:8765/hls/movie.m3u8'
if (Hls.isSupported()) {
  var hls = new Hls()
  hls.loadSource(url)
  hls.attachMedia(video)
  hls.on(Hls.Events.MANIFEST_PARSED, function () {
    // video.play()
  })
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
  video.src = url
  video.addEventListener('canplay', function () {
    // video.play()
  })
}

至于播放自己的样式和功能，可以根据自己的需要和兴趣自己去添加

quan!!!

关注

3
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
hls.js播放hls直播源

用了video.js来做播放器播放hls和rtmp直播源之后，这次用hls.js来播放Hls直播源video.js和hls.js的区别和优缺点video.js：优点：功能比较强大，有很多功能封装好了，而且有自己的一套UI，在不同浏览器下显示比较一致缺点：包比较大，实现hls直播的时候其实是内嵌了hls.js的代码，实际上是运用了hls.js，而且由于封装的ui和功能，使其不够纯净，不够灵...
复制链接

扫一扫