TS file not playing hls.js

0
votes

Need some help. Video loads in browser but never starts playing. I'm using hls.js to stream m3u8 playlist to the browser. And I use FFmpeg to create ts and m3u8 files.

For 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 Code:

<!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>
2
javascriptffmpeg
Depending on the browser you use, it might be just a matter of blocking autoplay. If you add player controls to your video element <video id="video" height="800px" width="1200px" controls></video>, reload the page and press play, does it help? – tbucher
Even I add a control of the video tag, it doesn't play the playlist. – Mark Adrian Estaca
What browser are you testing this with? Is there any error in its console? You said that your stream loads, but if you try it in hls.js demo player directly here, can you confirm it plays? Note that the stream needs to be delivered via https for the demo page to work. – tbucher
There's no error in the console. I'm using google chrome latest version. Yes, it loads by checking in the network by inspecting. – Mark Adrian Estaca
I post this issue on github. @tbucher please check this github.com/video-dev/hls.js/issues/2346 – Mark Adrian Estaca

2 Answers

0
votes

Just change the ffmpeg command line to : 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

0
votes

There are two issues with your code.

  1. the play need the blowser allow the audio auto display

    NotAllowedError: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

  2. the hls.js cannot access it's map file

    request failed with status 404
    URL：hls.min.js.map

Just change it to a workable 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>