Recherche avancée

Sur d’autres sites (11134)

• HLS.js append a new .m3u8 media file

  23 novembre 2019, par Hastalavistababyml

  How can I append a new media file using HLS.js

  window.hls = new Hls();
  
  
  
  let VideoElement = document.getElementById('video')
  
  
  
  let VideoViewr = (dir, element) => {
  
      if (Hls.isSupported()) {
  
  
  
        hls.attachMedia(element);
  
        hls.loadSource(dir)
  
  
  
        hls.on(Hls.Events.MEDIA_ATTACHED, function () {
  
          console.log("video and hls.js are now bound together !");
  
          hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
  
            console.log("manifest loaded, found " + data.levels.length + " quality level");
  
            console.log(video.buffered.end(0)-video.currentTime)
  
          });
  
        });
  
  
  
      }
  
  }
  
  
  
  VideoViewr('./video/dir-1/chunk.m3u8', VideoElement)
  
  VideoViewr('./video/dir-2/chunk.m3u8', VideoElement)
  
  
  
  VideoElement.play()

  HTML

  <video width="400" height="400" controls="controls"></video>

  After the first instance, I want to append another .m3u8 file but getting last appended video in the player

  HLS.append(m3u8file)

  HLS.append(m3u8_another_file)

• Detect HLS audio canplay event

  7 mars 2016, par Aleksandar Vasić

  I’m using nginx and nginx rtmp module to create audio stream for mobile. For video I use ffmpeg to slice video to jpeg images, and that way I display video stream to mobile users. Audio is going separate which causes audio latency of 15-30 seconds. I assume that this happens because video of jpegs starts before audio buffers. So what I tried is to catch <audio></audio> event "canplay" and when this event fires, then to start the video preview.

  Audio source example : http://example.com:8081/hls/audio.m3u8

  The code for detection :

   var audio = document.getElementById('preview-audio');
  
   audio.oncanplay=function(){ console.log('audio loaded'); };

  but this event never fires. Only events that fire are "loadstart" and "progress". How can I detect that audio is buffered so that I can sync it with jpeg’s ?

  Thanks in advance

• DASH package (mpd) I made freezes after raising the onratechange event

  7 mars 2016, par Nick Birke

  I am trying to created an adaptive stream from an mp4 file. I have a decent amount of experience at doing streaming, and have successfully implemented smooth streaming via Silverlight. We want a solution for everything that works in HTML5. I am pursuing DASH. So here are the steps I take...

  1. Resample the mp4 to different sizes using ffmpeg.
  2. Ensure the files are properly fragmented using Bento4s mp4Fragment utility.
  3. Create the DASH mpd file and associated segments using Bento4s mp4dash utility.

  I have done a lot of work to learn each of these utilities and create a process that gets to output that I think will work. To create reliable DASH artifacts. But it seems I am doing something wrong. Here are examples of command lines I run.

  For step one I create three different files... for three different rates and sizes... (these may not be the exact command lines, they are from old notes... but the parameter values are the ones I am using for sure)

  ffmpeg -y -i C:\_SIMULATED_SHARE_C\ff\big_buck_bunny.mp4 -c:v libx264 -x264opts keyint=24:min-keyint=24:no-scenecut -b:v 1500k -maxrate 1500k -bufsize 1000k -vf "scale=-1:720" C:\_SIMULATED_SHARE_C\ff\output\outputfile720.mp4
  
  
  
  ffmpeg -y -i C:\_SIMULATED_SHARE_C\ff\big_buck_bunny.mp4 -c:v libx264 -x264opts keyint=24:min-keyint=24:no-scenecut -b:v 800k -maxrate 800k -bufsize 500k -vf "scale=-1:540" C:\_SIMULATED_SHARE_C\ff\output\outputfile540.mp4
  
  
  
  ffmpeg -y -i C:\_SIMULATED_SHARE_C\ff\big_buck_bunny.mp4 -c:v libx264 -x264opts keyint=24:min-keyint=24:no-scenecut -b:v 400k -maxrate 400k -bufsize 400k -vf "scale=-1:360" C:\_SIMULATED_SHARE_C\ff\output\outputfile360.mp4

  So that gives you the three files that need to be fragmented. So I fragment them using the mp4fragment utility from Bento4. That command line is simple so I will not offer an example.

  The I use Bento4s mp4dash to create the dash. Something like this...

  "E:\\_INSTALL\\Bento4\\Bento4-SDK-1-4-3-607.x86-microsoft-win32-vs2010\\Bento4-SDK-1-4-3-607.x86-microsoft-win32-vs2010\\bin\\mp4dash.exe --mpd-name=\"\\\\d9fqt52\\_SIMULATED_SHARE_C\\ff\\output\\dash\\something.mpd\" -f -o \"\\\\d9fqt52\\_SIMULATED_SHARE_C\\ff\\output\\dash\" \"\\\\d9fqt52\\_SIMULATED_SHARE_C\\ff\\output\\bunny360f.mp4\" \"\\\\d9fqt52\\_SIMULATED_SHARE_C\\ff\\output\\bunny540f.mp4\" \"\\\\d9fqt52\\_SIMULATED_SHARE_C\\ff\\output\\bunny720f.mp4\" "

  This runs ok. And creates the mpd file, an audio folder with segment files, an a video folder with 3 folders each with the segment files.

  I am able to configure IIS to play the mpd ok. As well as the segement files. The video plays fine... and then it stops. It freezes between 50 and 60 seconds. Right before it freezes I can confirm that the onratechange event of the HTML5 video tag is raised. This is an event that is raised with the rate of play is changed. I do nothing to change this it just happens.

  The actual video in question is about 1hr long. Also I am using the dash.js library as a player.

  If you can identify any components or specifics I should change please let me know !

  UPDATE ON MAR 7, 2016

  As requested here is the MPD content...

  <?xml version="1.0" ?>
  
  <mpd mediapresentationduration="PT51M51.909S" minbuffertime="PT0.80S" profiles="urn:mpeg:dash:profile:isoff-live:2011" type="static" xmlns="urn:mpeg:dash:schema:mpd:2011">
  
    
  
    <period>
  
      
  
      <adaptationset lang="en" mimetype="audio/mp4" segmentalignment="true" startwithsap="1">
  
        <segmenttemplate duration="801" initialization="$RepresentationID$/init.mp4" media="$RepresentationID$/seg-$Number$.m4f" startnumber="1" timescale="1000"></segmenttemplate>
  
        <representation audiosamplingrate="48000" bandwidth="132491" codecs="mp4a.40.2">
  
          <audiochannelconfiguration schemeiduri="urn:mpeg:dash:23003:3:audio_channel_configuration:2011" value="2"></audiochannelconfiguration>
  
        </representation>
  
      </adaptationset>
  
      
  
      <adaptationset maxheight="720" maxwidth="1280" mimetype="video/mp4" minheight="540" minwidth="640" segmentalignment="true" startwithsap="1">
  
        <segmenttemplate duration="801" initialization="$RepresentationID$/init.mp4" media="$RepresentationID$/seg-$Number$.m4f" startnumber="1" timescale="1000"></segmenttemplate>
  
        <representation bandwidth="785536" codecs="avc1.64001F" framerate="30000/1001" height="540" scantype="progressive" width="960"></representation>
  
        <representation bandwidth="403537" codecs="avc1.64001E" framerate="30000/1001" height="360" scantype="progressive" width="640"></representation>
  
        <representation bandwidth="1496514" codecs="avc1.64001F" framerate="30000/1001" height="720" scantype="progressive" width="1280"></representation>
  
      </adaptationset>
  
    </period>
  
  </mpd>

  UPDATE ON MAR 7, 2016

  Here is the console output for two different videos that just stop for some unknown reason between 50 and 60s

  ///ABS VIDEO 
  
  
  
  58393][rulesController] [RULES]: playbackTimeRule [Fragment:download,82,MediaSegment,0video] Default 
  
  dash.all.js:11 [58395][rulesController] [RULES]: sameTimeRequestRule [Fragment:download,82,MediaSegment,0,video] Default 
  
  dash.all.js:11 [58401][indexHandler][audio] Getting the request for time: 82.082 
  
  dash.all.js:11 [58403][indexHandler][audio] Index for time 82.082 is 81 
  
  dash.all.js:11 [58405][indexHandler][audio] SegmentTemplate: 81.08099999999999 / 1361.235 
  
  dash.all.js:11 [58406][indexHandler][audio] SegmentTemplate: 82.082 / 1361.235 
  
  dash.all.js:11 [58407][rulesController] [RULES]: playbackTimeRule [Fragment:download,82,MediaSegment,0audio] Default 
  
  dash.all.js:11 [58417][fragmentLoader] loaded video:MediaSegment:82.082 (200, 18ms, 2ms) 
  
  dash.all.js:11 [58419][rulesController] [RULES]: sameTimeRequestRule [Fragment:download,82,MediaSegment,0,audio] Default 
  
  dash.all.js:11 [58435][fragmentLoader] loaded audio:MediaSegment:82.082 (200, 14ms, 0ms) 
  
  dash.all.js:11 [59390][indexHandler][video] Getting the request for time: 83.083 
  
  dash.all.js:11 [59392][indexHandler][video] Index for time 83.083 is 82 
  
  dash.all.js:11 [59393][indexHandler][video] SegmentTemplate: 82.082 / 1361.235 
  
  dash.all.js:11 [59394][indexHandler][video] SegmentTemplate: 83.08299999999998 / 1361.235 
  
  dash.all.js:11 [59395][rulesController] [RULES]: playbackTimeRule [Fragment:download,83,MediaSegment,0video] Default 
  
  dash.all.js:11 [59396][rulesController] [RULES]: sameTimeRequestRule [Fragment:download,83,MediaSegment,0,video] Default 
  
  dash.all.js:11 [59401][indexHandler][audio] Getting the request for time: 83.083 
  
  dash.all.js:11 [59403][indexHandler][audio] Index for time 83.083 is 82 
  
  dash.all.js:11 [59404][indexHandler][audio] SegmentTemplate: 82.082 / 1361.235 
  
  dash.all.js:11 [59406][indexHandler][audio] SegmentTemplate: 83.08299999999998 / 1361.235 
  
  dash.all.js:11 [59408][rulesController] [RULES]: playbackTimeRule [Fragment:download,83,MediaSegment,0audio] Default 
  
  dash.all.js:11 [59416][fragmentLoader] loaded video:MediaSegment:83.08299999999998 (200, 17ms, 1ms) 
  
  dash.all.js:11 [59418][rulesController] [RULES]: sameTimeRequestRule [Fragment:download,83,MediaSegment,0,audio] Default 
  
  dash.all.js:11 [59437][fragmentLoader] loaded audio:MediaSegment:83.08299999999998 (200, 14ms, 1ms) 
  
  dash.all.js:11 [59902][scheduleController][video] Stalling Buffer 
  
  dash.all.js:11 [59903][bufferController][video] Waiting for more buffer before starting playback. 
  
  dash.all.js:11 [59906][scheduleController][audio] Stalling Buffer 
  
  dash.all.js:11 [59907][bufferController][audio] Waiting for more buffer before starting playback. 
  
  dash.all.js:11 [63684][playbackController] <video> ratechange:  0 
  
  
  
  
  
  
  
  
  
  ///HOG VIDEO
  
  
  
  [58250][rulesController] [RULES]: playbackTimeRule [Fragment:download,105,MediaSegment,0audio] Default 
  
  dash.all.js:11 [58266][fragmentLoader] loaded video:MediaSegment:84.105 (200, 28ms, 1ms) 
  
  dash.all.js:11 [58269][rulesController] [RULES]: sameTimeRequestRule [Fragment:download,105,MediaSegment,0,audio] Default 
  
  dash.all.js:11 [58287][fragmentLoader] loaded audio:MediaSegment:84.105 (200, 14ms, 1ms) 
  
  dash.all.js:11 [58982][indexHandler][video] Getting the request for time: 84.906 
  
  dash.all.js:11 [58983][indexHandler][video] Index for time 84.906 is 105 
  
  dash.all.js:11 [58984][indexHandler][video] SegmentTemplate: 84.105 / 3111.909 
  
  dash.all.js:11 [58984][indexHandler][video] SegmentTemplate: 84.906 / 3111.909 
  
  dash.all.js:11 [58985][rulesController] [RULES]: playbackTimeRule [Fragment:download,106,MediaSegment,0video] Default 
  
  dash.all.js:11 [58986][rulesController] [RULES]: sameTimeRequestRule [Fragment:download,106,MediaSegment,0,video] Default 
  
  dash.all.js:11 [58989][indexHandler][audio] Getting the request for time: 84.906 
  
  dash.all.js:11 [58990][indexHandler][audio] Index for time 84.906 is 105 
  
  dash.all.js:11 [58991][indexHandler][audio] SegmentTemplate: 84.105 / 3111.909 
  
  dash.all.js:11 [58992][indexHandler][audio] SegmentTemplate: 84.906 / 3111.909 
  
  dash.all.js:11 [58993][rulesController] [RULES]: playbackTimeRule [Fragment:download,106,MediaSegment,0audio] Default 
  
  dash.all.js:11 [59002][fragmentLoader] loaded video:MediaSegment:84.906 (200, 14ms, 1ms) 
  
  dash.all.js:11 [59003][rulesController] [RULES]: sameTimeRequestRule [Fragment:download,106,MediaSegment,0,audio] Default 
  
  dash.all.js:11 [59014][fragmentLoader] loaded audio:MediaSegment:84.906 (200, 8ms, 1ms) 
  
  dash.all.js:11 [59735][scheduleController][video] Stalling Buffer 
  
  dash.all.js:11 [59736][bufferController][video] Waiting for more buffer before starting playback. 
  
  dash.all.js:11 [59738][scheduleController][audio] Stalling Buffer 
  
  dash.all.js:11 [59739][bufferController][audio] Waiting for more buffer before starting playback. 
  
  dash.all.js:11 [61695][playbackController] <video> ratechange:  0 
  
  </video></video>