Recherche avancée

Sur d’autres sites (6283)

• 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)

• Ffmpeg - Generate VTT File From Sprite, Using Spatial Media Fragment

  20 octobre 2019, par David

  Hi I am looking to create a .VTT file from a sprite that i have generated using Ffmpeg.

  Ffmpeg command :

   $"-i {inputMediaFile} -vf \"select = not(mod(n\\, 30)),scale = 120:80,tile = 7x7\" -an -vsync 0 {outputMediaFile}"

  This selects every 30th frame, and then scales it to 120x80 pixels and creates 8x8 tiles in the output image.

  I would like to make a .VTT from the generated image in C#, so i know the height and width of my individual images in the sprite (120x80) and there is 64 images in total in the output image.

  From this i need to produce a VTT like this :

  WEBVTT
  
  
  
  1
  
  00:00:00.000 --> 00:00:01.000
  
  test-00001.jpg#xywh=0,0,120,80
  
  
  
  2
  
  00:00:01.000 --> 00:00:02.000
  
  test-00001.jpg#xywh=120,0,120,80
  
  
  
  3
  
  00:00:02.000 --> 00:00:03.000
  
  test-00001.jpg#xywh=240,0,120,80
  
  
  
  4
  
  00:00:03.000 --> 00:00:04.000
  
  test-00001.jpg#xywh=360,0,120,80
  
  
  
  5
  
  00:00:04.000 --> 00:00:05.000
  
  test-00001.jpg#xywh=480,0,120,80
  
  
  
  6
  
  00:00:05.000 --> 00:00:06.000
  
  test-00001.jpg#xywh=600,0,120,80
  
  
  
  7
  
  00:00:06.000 --> 00:00:07.000
  
  test-00001.jpg#xywh=720,0,120,80
  
  
  
  8
  
  00:00:07.000 --> 00:00:08.000
  
  test-00001.jpg#xywh=840,0,120,80
  
  
  
  9
  
  00:00:08.000 --> 00:00:09.000
  
  test-00001.jpg#xywh=0,80,120,80

  There is also situations when there is n amount of sprite files.

  Im hoping there may be a library out there that can handle this, or even better if i can keep it contained within Ffmpeg - based on Ffmpeg docs i dont think this is possible though.

  Thanks in advance if anyone as any ideas, its doable as ive seen Nodejs and Ruby examples.

• Media player get stuck in the middle of a buffered range on Chrome

  29 septembre 2019, par Feng Yu

  WHAT IS MY PROBLEM ?

  My website’s live streaming player use hls.js. From my server’s stat, there is many case where player get stuck in the middle of a buffered range.

  Here is my server raw stat log(removed some useless params) :

  tm=2019-09-27 12:04:41`bufferLevel=8.447303999999974`currentTime=158.4`buffered=[6.024,166.832]`readyState=4`ua=Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.116 Safari/537.36 QBCore/3.53.1153.400 QQBrowser/9.0.2524.400 Tencent AppMarket/4.8 GameCenter

  currentTime is got by HTMLMediaElement.currentTime and buffered is got by HTMLMediaElement.buffered :

  currentTime=158.4
  
  buffered=[6.024,166.832]
  
  readyState=4

  From W3c :

  If HTMLMediaElement.buffered contains a TimeRange that includes the current playback position and enough data to ensure uninterrupted playback :

  1. Set the HTMLMediaElement.readyState attribute to HAVE_ENOUGH_DATA.
  2. Playback may resume at this point if it was previously suspended by a transition to HAVE_CURRENT_DATA.

  In this case, 613.3 is in the middle of [469.277,677.612], video should be progressing, but it is not.

  Hls.js will periodly check currentTime has progressed every 100ms. if currentTime has not progressed for 1000ms, then hls.js will trigger STALL event and I will send a stall stat to server.

  I cannot reproduce this problem on my side, it only appears on my server stat.

  WHAT I’VE TRIED

  shaka player has a module detect this case(https://www.ellealcatrase.eu/player2/docs/api/lib_media_stall_detector.js.html), Its comment shows that :

  Some platforms/browsers can get stuck in the middle of a
  buffered range (e.g. when seeking in a background tab). Detect when
  we get stuck so that the player can respond.

  but I cannot reproduce when my browser is in a background tab.