当前位置:首页 > 建站分享 > 正文内容

html5 让video支持m3u8播放

lujun3年前 (2022-03-05)建站分享498

我在网上查了半天,也测试了几个,但是最终我选择的是hls.js

hls.js Git#

git:https://github.com/video-dev/hls.js

基本使用#

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script><!-- Or if you want a more recent alpha version --><!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@alpha"></script>-->
<video id="video"></video><script>
  var video = document.getElementById('video');
  var videoSrc = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
  if (Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource(videoSrc);
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, function() {
      video.play();
    });
  }else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = videoSrc;
    video.addEventListener('loadedmetadata', function() {
      video.play();
    });
  }</script>

#参考:https://www.zhihu.com/question/21087379

转载:https://www.blyoo.com/5127.html


扫描二维码推送至手机访问。

版权声明:本文由5020工作室发布,如需转载请注明出处。

本文链接:http://5020.work/?id=25

分享给朋友:

相关文章

Jsdelivr 国内CDN加速替换方法

Jsdelivr 国内CDN加速替换方法

Jsdelivr国内凉了,好多网站和服务出现了大花脸,于是用北京bgp机器进行反代。国内CDN分发于是有了这个服务,服务器及CDN均流量无限,G口起步,不设CC防御,可以随心使用。那些用gh图床的也可以直接接入了使用方式:替换「//cdn....

为网页添加动态背景 (背景轮播)

以前文章 最近发现一个插件所以重新更新下本文插件名称: jquery.backstretch.js下面是 示例代码:设置网页背景<!doctype html><html lang="...

博客、网站添加看板娘,随机切换看板娘

给你的博客添加一个萌萌的看板娘,增加网友的互动,让网站不再单调!在页面底部添加以下代码即可:<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/...

使用cloudflare加速页面中有beacon.min.js加载很卡如何解决

最近有个域名因为没有国内服务器,搬家到了国外。使用了cloudflare CDN加速,不知道从什么时候开始加载变的异常缓慢。chrome不停的转圈圈就是不完成。一个网页打开到完成要1分钟。检查了下原来是一个js文件一直没有加载成功。js名称...

免费前端静态资源开源库大全(CDN公共库)

为什么使用CDN公共库?减少用户等待时间,增加网页的同时载入速度,你可以在自己的网页上直接通过script标记引用这些资源。这样做不仅可以为您 节省流量,还能通过CDN加速,获得更快的访问速度。360官网 https://cdn....

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。