TS 文件不播放 hls.js

Posted

技术标签:

【中文标题】TS 文件不播放 hls.js【英文标题】:TS file not playing hls.js 【发布时间】:2019-08-22 05:17:18 【问题描述】:

需要帮助。视频在浏览器中加载,但从未开始播放。我正在使用 hls.js 将 m3u8 播放列表流式传输到浏览器。我使用 FFmpeg 创建 ts 和 m3u8 文件。

对于 FFmpeg:

./ffmpeg -rtsp_transport tcp -i rtsp://user:password@ipaddress/axis-media/media.amp -vcodec copy -hls_time 4 -hls_list_size 4 -hls_wrap 4 -start_number 1 -y test.m3u8

html 代码:

<!DOCTYPE html>
<html>
  <head>
     <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  </head>

  <body>
     <video id="video"  ></video>
  <body>

  <script>
     var video = document.getElementById('video');
     if(Hls.isSupported())
        var hls = new Hls();
        hls.loadSource('/images/live/test.m3u8');
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED,function() 
              video.play();
         );
      
      else if (video.canPlayType('application/vnd.apple.mpegurl'))
         video.src = '/images/live/test.m3u8';
         video.addEventListener('loadedmetadata',function() 
              video.play();
         );
      
   </script>
</html>

【问题讨论】:

根据您使用的浏览器,可能只是阻止自动播放的问题。如果将播放器控件添加到视频元素 ,重新加载页面并按播放,是否有帮助? 即使我添加了video标签的控件,它也不播放播放列表。 你用什么浏览器测试这个?它的控制台有什么错误吗?你说你的流加载了,但是如果你直接在 hls.js 演示播放器中尝试here,你能确认它可以播放吗?请注意,流需要通过 https 传递,演示页面才能正常工作。 控制台没有错误。我正在使用谷歌浏览器最新版本。是的,它通过检查检查网络来加载。 我在 github 上发布了这个问题。 @tbucher 请检查此github.com/video-dev/hls.js/issues/2346 【参考方案1】:

只需将 ffmpeg 命令行更改为: ffmpeg -rtsp_transport tcp -i rtsp://user:password@ip_address/axis-media/media.amp -y -s 854x480 -codec:v libx264 -b:v 800000 -hls_time 4 -hls_list_size 4 -hls_wrap 4 start_number 0 test .m3u8

【讨论】:

【参考方案2】:

您的代码有两个问题。

    播放需要鼓风机允许音频自动显示

    NotAllowedError:用户代理不允许播放方法或 当前上下文中的平台,可能是因为用户拒绝 权限。

    hls.js 无法访问它的地图文件

    请求失败,状态为 404 网址:hls.min.js.map

改成可行的cdn就行了

<!DOCTYPE html>
<html>
  <head>
     <script src="https://cdn.jsdelivr.net/npm/hls.js"></script>
  </head>

  <body>
     <video id="video"  ></video>
  <body>

  <script>
     var video = document.getElementById('video');
     if(Hls.isSupported())
        var hls = new Hls();
        hls.loadSource('http://vfile1.grtn.cn/2018/1542/0254/3368/154202543368.ssm/154202543368.m3u8');
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED,function() 
              video.play();
         );
      
      else if (video.canPlayType('application/vnd.apple.mpegurl'))
         video.src = 'http://vfile1.grtn.cn/2018/1542/0254/3368/154202543368.ssm/154202543368.m3u8';
         video.addEventListener('loadedmetadata',function() 
              video.play();
         );
      
   </script>
</html>

【讨论】:

以上是关于TS 文件不播放 hls.js的主要内容,如果未能解决你的问题,请参考以下文章

如何让 HLS.js 从服务器端获取数据?

使用主播放列表时,HLS.js 一次加载所有子片段

直播服务器简单实现 http_flv和hls 内网直播桌面

在H5页面播放m3u8音频文件

如何让 Hls.js 在准备好后自动播放视频?

使用hls.js播放m3u8视频流