Question

需要一些帮助。视频已加载到浏览器中，但从未开始播放。我正在使用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" height="800px" width="1200px"></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>

Answer 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测试.m3u8

Answer 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" height="800px" width="1200px"></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

2 个答案: