I have a database that contains metadata about some videos on my site. One of the things I store is video length which is often a decimal. When I query the database I will round the seconds value so videos that are 10.543 seconds display in a list as 11 seconds. However I've noticed the default html video player will show the video as being 10 seconds when the video loads. I could just floor the true video duration time but I would bet a video that is 10.998 would display as 11 seconds in the default html player.
I'm having trouble finding documentation on what the thresholds are for rounding when it comes to displaying video time durations. And do they change browser to browser?
Its probably not a rounding problem. It's probably a source of truth problem. There is not a standard way to measuring a video duration. Often in a video file there are two or three durations encoded, which can be combined in different ways. For example if you have 10 seconds video, and 11 seconds of audio, but the audio starts 1 second after the video starts what is the duration? 10 (the video track) 11 (the audio track) or 12 (the start of the video track through the end of the audio track)?
Some file formats may encode a duration into the medatadata, which can be calculated using any method, or could even be completely wrong. And the player that reads the file, could choose to ignore the metadata, and calculate it own duration.
And yes, every browser will do it differently for each format.
Related
In the code below I am playing a 60 second fragment from a 30 minute MP3 file (#t=60,180 - starts at 60 seconds, stops playing at 180 seconds). This uses the Media Fragment URI specification.
The HTML5 Audio player however show the progress bar with the full 30 minutes duration.
Three Questions:
1) Apart from hiding the progress bar completely, is there a way to only show the three minutes I want in the progress bar. (Letting people fast forward & rewind but not go beyond the three minutes?)
2) Is there a way to only stream these three minutes rather than having to start loading in the entire MP3 file and wasting bandwidth?
3) If (1) is the only option, how do you hide the progress bar and also the total time length variable?
<figure>
<figcaption>Test Player</figcaption>
<audio
controls
src="/test.mp3#t=60,180 id="stream" style=" width:500px;>
Your browser does not support the
<code>audio</code> element.
</audio>
</figure>
The only way you could potentially achieve something like this is by using Javascript. However, the "duration" attribute is read-only and cannot be modified.
The best thing to do in this case would be to edit the audio file and cut the 3 minutes you want by using an online tool or a program like ffmpeg.
You can hide the controls bar by simply omitting the 'controls' attribute from the audio tag. e.g.:
<audio autoplay="" name="media"><source src="/test.mp3" type="audio/mpeg"></audio>
I've got an HTML5 <video> element whose source is a .m3u8 (HLS stream)
I have an M3U8 with three different renditions: 640x360, 960x540, and 1280x720
On Desktops I have a Flash Player for playing the video, so the HTML5 fallback is only intended for mobile (iOS and Android) - I am doing all of my testing on an iPad and, once it's working, I will try it out on Android and hope everything works the same.
My goal is to, at any point in time, figure out what rendition the video element is playing. The rendition is subject to change as the user's bandwidth changes.
I tried using the .videoHeight property, but it always returns 480 regardless of the rendition being downloaded - which is particularly odd because 480 isn't even an option.
Does anyone know how I can figure out the rendition being downloaded?
Cleaning up some old questions that never received answers:
Unfortunately this one is just not possible. The HTMl5 video spec and HTML5 video implementations in most browsers are intended to abstract away all of the underlying magic involved in playing videos. You give it a source, it plays. Everything else is completely hidden and you have no access. No access to metadata channels, no access to audio channels, no access to bitrate and resolution information,...
At best I developed a solution to guess which resolution was playing. Every 10 seconds a 1 MB file was loaded over AJAX. I measured the speed at which this downloaded to guess at their current bandwidth. I know that QuickTime will only play a rendition if you have double the required bandwidth. So if the 960x540 rendition requires 1400 kbit/s then it won't play unless you have 2800 kbit/s bandwidth.
It's not very good (and wastes 6 MB of bandwidth per minute) but it's better than nothing.
Introduction
I made a video player that plays .mp4 files. It is based upon the FLVplaybackcomponent 2.5 in Flash Pro CS 5. It's basically a component with a movieclip interface (not a skin). the video plays fine, play/pause works and all that jazz.
Problem
The scrubber is erratic.
It seems to only be able to scrub in 10 second intervals and often behaves oddly (jumping to wrong locations).
All I seem to be doing is to take the total video time. Applying that time to a slider component so minimum is 0 and maximum is total video time. Then when the user changes the slider value it sets the playheadtime equal to the slider value.
If I trace out the values it seems fine, but the playheadtime is misbehaving.
If the slider displays 16 seconds and the playhead is made equal to 16 seconds it seems to snap at the closest 10 second interval.
Source
Here is a test file showcasing the problem:
http://rosefalk.dk/stuff/temp/stackoverflow/videoplayer_no_js.html
Here is the source with video and .fla: http://rosefalk.dk/stuff/temp/stackoverflow/stackoverflow-scrubberproblem.zip
BONUS
HTML players in some browsers seem to have no problem scrubbing the file.
The video service used (DigiZuite) seems to re-encode the video with keyframes every 10 seconds. Re-encoding the video with keyframes every second fixed the problem (small video so it was VERY noticeable).
Assuming we record some video from media server in Append mode.
How do We make JwPlayer (or another video player) seek and play to always (Let's said) last 5 seconds of Video which being recorded?
Thanks,
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.