I'm working on measuring the real-time frame rate of html5 video, does anyone has some ideas? Since I have not find the properties info about frame in html5 video, I have no idea about how to do that.
Another alternative, how to access each frame that html5-video displayed(maybe there are drop frame while playing). I have tried to use canvas to get image from video by drawImage, and get the frame data by getImageData, but it seems that the frame data obtained is not the same as the frame by frame played in video, maybe there are 100 frames played, but we can get 120 0r 70 etc frames by getImageData method.
So in summary, how to get the real time fps or each frame displayed while playing for html5 video?
HTML5 video tag does not support dropped frames or real fps metric yet. However there is a proposal to add such metrics in future. More details at http://wiki.whatwg.org/wiki/Video_Metrics. The page also has video metrics for other players like flash.
Related
Chrome Version: 32.0.1700.76 m
Operating System: Windows 7
I've been having issues with Chrome's html5 video player. Two concerns:
The video won't begin to play until the entire video buffers. The loading bar shows the video loading slowly until the entire video is loaded and then it begins to play the video. This takes a while for people with slow internet and they may think the video is broken if it doesn't begin playing within 10-15 seconds.
When the video plays there is no sound. The image shows but there isn't any sound. The only sound is a random .5 second sound clip while the video is buffering.
I would very much appreciate some help troubleshooting these problems or possible alternate solution ideas.
Page with video problems:
http://suntmormon.ro/actiuni-umanitare/
Here's one video that doesn't play at all in Chrome. It may be an unrelated problem:
http://suntmormon.ro/wp-content/uploads/2014/01/Mormon-Missionaries.mp4
-Davis
I am making a HTML5/javascript browser game and I have problems with my audio.
I have all my clips in a single mp3 file to minmize the number of requests sent and when I want to play a clip I seek to the clips starting position (audio.currentTime = startTime) and play (audio.play()) when the audio tag fires the "seeked" event via an event listner.
When I pause playback I use the audio.pause() method.
The problem I have is that, before the sound I want to play starts, a split second of the file is played from where the audio was playing before the seek.
Anyone else that has encountered this problem?
Anyone know what to do about it?
If you're using Safari, this might be your problem.
Also, I'm finding that Web Audio API is looking more and more appealing (see my possible answer to my own question, haha)
Edit:
Lastly, if you want to stick with the whole HTML5 Audio object, this question might point you in a different direction.
I want to use HTML5 to play an MP3 file.
When there is, let's say 60 seconds of silence, or maybe 10% of the average sound level, I want to call a Javascript function.
Compatibility: Webkit only. Here are some examples of Chrome's audio API
http://chromium.googlecode.com/svn/trunk/samples/audio/index.html
So while the DOM, canvas and webgl can hit framerates of up to 60fps, video seems to be stuck at 24fps for the moment.
That framerate is more convention than anything I believe, both the codecs and video container formats don't have restrictions there (well, not all of them).
I'd love to see a <video> tag showing a clip at like 48 or 60fps. Is this possible, and if so, how can it best be done?
If the video is encoded at a high frame rate and the browser's media player implementation can keep up, then there's nothing stopping playback at a higher frame rate.
All browsers currently implement HTML5 <video> frame-seeking API as time divisions. e.g. In a video of 10fps, Frame #10 is time=1.0 seconds. Thus, if you want to be able to frame-seek accurately, i.e. advance one frame forward, you need to go to time=1.1 seconds. This frame-to-time calculation is done by knowing the video's frame rate (fps).
However, I don't know how the browsers calculate the frame rate.
They either read the video file's container information for some fps property, or calculate it on their own.
By using FFmpeg, you can get that by FFmpeg -i video.avi which returns Stream #0.0: Video: libvpx, yuv420p, 512x288, PAR 1:1 DAR 16:9, 25 fps, 25 tbr, 1k tbn, 25 tbc , and you can see the fps there.
The question is: Is this accurate? If not, is there an accurate way of calculating this? I just want to mimic the browsers so I can frame-seek accurately.
The framerate of a video isn't calculated, it's stored as part of the video's metadata. There's just a field in the video's header that says how many frames per second (or possibly the amount of time each frame is shown). It's the same way the browser knows the video's resolution.