CODEWITHSUNDEEP
javascriptvideo-streamingjss
Andreas Burmester
Andreas Burmester

Reputation: 33

Changing HTML video stream source/quality on the fly

Background: I'm working on a video project with 50+ short videos (10min, 720p) that I want to present online. My current architecture is to placing 16 video tags in a 4x4 grid, and then randomly setting their source on load using JavaScript, and on click zooming a video to cover the full screen until clicked again.

The problem: Each video in 720p webm is around 80mb. With 16 videos that is 1.3GB totally, or 130MB per minute, or 2MB per second. Which is a ridiculous amount of data, I think, maybe I'm wrong. The each video is so big (80mb) is to support the zoom-full-screen feature.

My idea for a solution: Each video in two resolutions, and use the low resolution for the grid layout, and the higher resolution on the click-to-zoom.

My question: How to make this smooth? Can I preload the high resolution video on click in the background at the position of the low resolution video? And make the shift in the CSS transform? Or is there a better way to do this?

Secondary question: How to host this online? Can I put the videos on vimeo maybe? Right now I'm using wordpress.com hosting.

Upvotes: 0

Views: 4890

Answers (1)

colde
colde

Reputation: 3322

The normal way to achieve something like that is to encode the video using an adaptive bitrate format. The two primary formats for that would either be HLS or MPEG-DASH. Most online encoding platforms can provide those as outputs. Normally you would encode 5-6 different qualities (this helps with users that are on wifi, where bandwidth might constantly be changing) but you could easily encode it in just two different qualities.

Normally the players would be able to select the right quality automatically, but you can manage that yourself if you want.

If you are going to use HLS, you can use hls.js and its Quality Switch API. For MPEG-DASH, a good player to use would be Shaka Player and then set it like this:

player.configure({enableAdaption: false});
player.selectVideoTrack(trackId);

If you want to switch specifically on fullscreen, just listen for the fullscreen events on the players.

Upvotes: 3

Related Questions