Search code examples
htmlvideoframe-ratelive-streaming

HTML5 Video - Playing low fps video


I'm live streaming low fps video to a webpage and using the html5 video element. The problem that I'm facing is that the load time for low fps (1fps) video is about 50 seconds. When I stream at 24fps there is very little loading time. I have checked and my 1fps stream is coming through a long time before the video is actually displayed - And once the video starts, I can speed up the video and catch up to the live timestamp. What is going on here? Does the video element need a certain amount of frames before it will start playing? What can I do to get my 1fps video to show in the player as soon as the stream becomes ready?

The code that I'm using in the html is as follows...

<video src="localhost:44375/GetVideoAsync"; type="video/webm" 
autoplay="autoplay"></video> 

GetVideoAsync is a call to a .Net api that returns a live video stream.

[HttpGet("[action]")]
public async Task<Stream> GetVideoAsync() {
  return await _streamingService.GetVideoAsync();
}

So - the source of the video is really not that important - the issue is getting low fps video (1fps) to start playing sooner - or just as quick as 24fps video


Solution

  • There are a few hard-set buffers along the way which are not optimized for low bitrate video. These are effectively bugs, but nothing you can really do about them besides report the issues.