簡體   English   中英

TS文件未播放hls.js

[英]TS file not playing hls.js

需要一些幫助。 視頻已加載到瀏覽器中,但從未開始播放。 我正在使用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>

只需將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

您的代碼有兩個問題。

  1. 該劇需要鼓風機允許音頻自動顯示

    NotAllowedError:在當前上下文中,用戶代理或平台不允許使用play方法,這可能是因為用戶拒絕了權限。

  2. 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> 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM