I host some videos in a private bucket storage in Google Cloud Storage.
The duration of these videos are quite long (about an hour each) but I would like to display in loop only 3 to 4 seconds of these videos (for example between times 1120s to 1123s).
The problem is that even when I give the <video> tag the right URL (something like https://mybucket.storage.googleapis.com/path-to-my-video.mp4?access_token=...t=1120,1123), the browser (Chrome or Firefox) still downloads approx. 10 Mb of data, which is a bit long for the 3 seconds to play.
It seems like the browser downloads way more data than it needs to play the range that I want so I'm looking for a way to just load the minimal amount of data to play my range.
I have already tried preload="metadata" and added these event listeners to make sure the video never plays outside the boundaries :
<video controls preload="metadata"
src={`${videosRootUrl}/${videoMetadata.name}/${videoMetadata.name}.mp4?access_token=${accessToken}#t=${from},${to}`}
onError={err => handleVideoError(err)}
onTimeUpdate={e => handleTimeUpdate(e, from, to)}
onLoadedMetadata={e => onloadedmetadata(e.currentTarget, from)}
>
function handleTimeUpdate(event, from, to) {
const videoElt = event.currentTarget
const currentTime = videoElt.currentTime
if(currentTime < from || currentTim
}
}
function onloadedmetadata(video, from) {
video.currentTime = from;
}
Google Cloud Storage doesn't have the ability to deal with video-specific as you would expect from a video streaming service. You can't scrub to specific points in time or resample the quality. All GCS can do is deliver the entire contents of the object, and it doesn't really care what the object contains. As such, should expect that the browser will start downloading from the beginning and continue downloading as it plays the content.
See also: