If I have a HTML5 video object, I can get its properties such as duration. Is there also a way to get its intended framerate? (i.e. frames per second)
Note that I don't mean the actual playback rate that is attained by the browser when playing it, but the video's own native target framerate.
Or alternatively, is there a way to get the total framecount in the entire video? The number of frames divided by the duration would be what I need.
Related
While trying to reduce the video latency for a WebRTC communication, I measured the delay between the video capture and the video display.
To prevent measuring latency involved by WebRTC, I just used getUserMedia and an HTML video that displayed the stream.
I did it by displaying a timestamp every frame (using requestAnimationFrame), recording my screen with a USB camera and taking screenshots where both the video display and the displayed timestamp where visible.
On average, I measured a delay of ~150ms.
This must be an overestimation (due to requestAnimationFrame time between calls), however the minimum measure I made is around 120ms, that still a lot.
Now, is there a way to reduce this delay between the video capture and the video display ?
Note:
I tried using another video lector (window's built-in lector), and the measure were really close (average delay about 145ms)
I tried another video device (my laptop webcam with a mirror), and the results are less close but still elevated, on my opinion (average delay about 120ms)
In general this is something you can only fix in the browser itself.
The requestVideoFrameCallback API is gathering some numbers such as captureTime and renderTime. https://web.dev/requestvideoframecallback-rvfc/ has a pretty good description, https://webrtc.github.io/samples/src/content/peerconnection/per-frame-callback/ visualizes them.
I want to get the currentTime for a video when video ends. But for different browsers, for the same video, currentTime returns different values after the third or forth digits after decimal. For ex. for particular video of length 30 seconds I am testing, currentTime value when video ends returns 30.069841 in Chrome and Firefox. But for the same video, it returns 30.0683333 in IE edge and Safari. Why is there a difference? And is there any way I can get the unique value in all the browsers?
Thank You in advance.
If your frame rate is something that cannot be expressed as a finite decimal number (or precisely expressed in a floating point number), which the value 30.0683333 looks like, it may be up to the browser to decide how to represent them. What is the frame rate of the video? Could it be 30fps by any chance? You could transcode it to e.g. 25fps and check then. If the video has an audio track then the audio time scale could come in play too. You could use ffmpeg to dump the actual timestamps of the video frames in the timescale expressed as a fractional number and then looking at the timestamp of the last frame you could try to understand what would be the decimal value. But you should provide more info on the timescale of the video and if it has an audio track.
I'm trying to synchronize an audio track being played via Web Audio API with a video being played in an HTML5 video element. Using a fibre optic synchronization device and audacity we can detect the drift between audio and video signals to a very high degree of accuracy.
I've tried detection the drift between the two sources and correcting it by either accelerating or decelerating the audio and as below just simply setting the video to the same position as the audio.
Play(){
//...Play logic
//Used to calculate when the track started playing, set when play is triggered.
startTime = audioContext.currentTime;
}
Loop(){
let audioCurrentTime = startTime - audioContext.currentTime;
if(videoElement.nativeElement.currentTime - audioCurrentTime > 0.1 ){
videoElement.nativeElement.currentTime = audioCurrentTime;
}
requestAnimationFrame(Loop);
}
With all of this, we still notice a variable drift between the two sources of around 40ms. I've come to believe that audioContext.currentTime does not report back accurately since when stepping through the code multiple loops will report back the same time even though quite obviously time has passed. My guess is the time being reported is the amount of the track that has been passed to some internal buffer. Is there another way to get a more accurate playback position from an audio source being played?
Edit: I've updated the code to be a little closer to the actual source. I set the time at which the play was initialized and compare that to the current time to see the track position. This still reports a time that is not an accurate playback position.
Is there a way to retrieve the length needed to be buffered before a HTML5 video start to play? And also retrieve how much was buffered?
I've seen that question HTML5 Video - Percentage Loaded?, but it applies to video after started playing.
You can look at the buffered property. It returns a TimeRanges object. For more info, see here.
how do I increase buffer on video-js HTML5 player? I have a US server and in the US is all fine but clients in EU have loading issues related to video caching.
buffer size in video.js is constant value and I want to change it.
You can now customize the buffer length by modifying videojs.Hls.GOAL_BUFFER_LENGTH for change buffer size of HLS videos, I tryed and It's work for me
For me this has worked (video.js 7.7.6):
let player = videojs('my-player');
player.vhs.options_.externHls.GOAL_BUFFER_LENGTH = 60;
You might also need to change the MAX_GOAL_BUFFER_LENGTH value, e.g.:
player.vhs.options_.externHls.MAX_GOAL_BUFFER_LENGTH = 80;
The case when you might need to increase buffer length values is when your viewers are facing buffering during playback (e.g. the spinner instead of a video). Video.js may give a warnings in the console that means its buffer values have been changed.
Be careful with a buffer length values. If it is a live streaming the browser will continue to load (buffer) video segments and the higher buffer values are the more MB will be downloaded even after pausing/stopping the player.
Video.js DOCS: https://github.com/videojs/http-streaming
Video.js Troubleshooting:
https://github.com/videojs/http-streaming/blob/main/docs/troubleshooting.md
Used Type Definitions for VideoJS:
https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/video.js