USE JAVASCRIPT TO DEFINE THIS TEXT, DEPENDING ON WHETHER VIDEO IS SEEKING OR LOADING
HTML5 Video Player (2011)
The following custom controls and progress notifiers were added using CSS and JavaScript
Fullscreen (In-Browser) Button.
Play / Pause / Replay Button.
Stop button.
Progress (Played) Info Bar / Timeline Seeker.
Loading Notifier
Seeking Notifier
Basic Explanation
[ FULLSCREEN ]
The Fullscreen button works by changing the height of the video object to the window.innerHeight (less 15 pixels to allow for toolbars).
It is not necessary to calculate the video's width, as this will be automatically set based on the height (aspect ratio).
video_object.style.height=window.innerHeight-15+"px";//resize video
video_object.style.left=(window.innerWidth/2)-(video_object.width/2)+"px";//position center screen
video_object.style.position="fixed";//disable scrolling (this needs to be set for ALL elements)
Note: With fullscreen mode (in-browser) enabled, the video dimensions will automatically change to fit the browser on resize. (You can also use this mode to reduce the video dimensions, by making the browser smaller than the original video size. There is no limit on how small the video object can be).
I have also added an ondblclick attribute to the video object to fire the fullscreen function when the video is double-clicked on.
Finally, using your browser's F11 option will fullscreen the video and disable the Fullscreen Button until you resume normal browser mode (by pressing F11 key again).
In this mode, to calculate the correct height for the video object I used the following formula (1.33 is the original video width divided by the original video height):
Note: At time of writing (April 2011) HTML5 Video automatically reduces frame rate in native fullscreen mode or when it's dimensions are altered (increased). The audio is not affected (which in turn causes sync issues).
Unless this problem is resolved, HTML5 Video will most certainly remain something of a curiosity, rather than a viable alternative to Adobe Flash.
[ STOP ]
The STOP button works by calling video_object.pause() and setting the video_object.currentTime to 0.
video_object.pause();
video_object.currentTime=0;
[ PROGRESS BAR / TIMELINE SEEKER ]
The Progress Bar / Timeline Seeker was added because the default Progress Bar did not work in Chrome. Clicking on it had no effect, and additionally it does not
automatically remove itself from the video object on mouseout!
It is quite a complex tool to make, considering it's basic function, but in principle it works by using the following calculation to determine the new position in the timeline when clicked on:
The Loading... and Seeking... notifiers were added because unlike Firefox, Google Chrome does not display an animation when the video is in either of these states.
(It is generally accepted that some kind of animation or info message is useful because it lets the viewer know that the video is actually doing something, and has not simply frozen or crashed).
I setup event listeners for the 'seeking', 'seeked' and 'play' events to display the relevant notification messages to the viewer, as follows:
video_object.addEventListener('seeking', function(){
//show seeking message if video is seeking loading_message.style.visibility = "visible";
loading_message.innerHTML = "Seeking...";
}, true);
The video was edited using Windows Live Movie Maker, and converted to the currently supported formats for HTML5 Video using the following FREE software:
ffmpeg2theora for conversions to .OGV* (Orbis) format.
Handbrake for conversions to .M4V (h264 Mp4) format.
*Note: Firefox currently (April 2011) only supports OGV Format, Chrome supports both formats. WARNING!! Firefox will play back an .OGV file locally (in browser)
without any problem, but it will NOT work once you have uploaded the file to a server! To fix this, change the extension from .OGV to .OGG.
ffmpeg2theora is a command line application only. You will need to use the command prompt (Start... Run... cmd) and navigate to the directory
where you have placed the ffmpeg2theora-0.27.exe file. Place the video that you wish to convert in the same directory. For example, if you created a folder on C:
and called it THEORA, you would need to type the following into the command prompt:
The STOP button works by calling video_object.pause() and setting the video_object.currentTime to 0.
The Progress Bar / Timeline Seeker was added because the default Progress Bar did not work in Chrome. Clicking on it had no effect, and additionally it does not automatically remove itself from the video object on mouseout!
It is quite a complex tool to make, considering it's basic function, but in principle it works by using the following calculation to determine the new position in the timeline when clicked on:
In order to convert the seconds into minutes and seconds, the following calculation was used:
Adding the current time to the Progress Bar was done as follows:
The Loading... and Seeking... notifiers were added because unlike Firefox, Google Chrome does not display an animation when the video is in either of these states. (It is generally accepted that some kind of animation or info message is useful because it lets the viewer know that the video is actually doing something, and has not simply frozen or crashed).
I setup event listeners for the 'seeking', 'seeked' and 'play' events to display the relevant notification messages to the viewer, as follows:
//show seeking message if video is seeking
loading_message.style.visibility = "visible";
loading_message.innerHTML = "Seeking...";
}, true);
video_object.addEventListener('seeked', function(){
//hide loading/seeking message
loading_message.style.visibility = "hidden";
video_ready = true;
}, true);
video_object.addEventListener('play', function(){
//show loading message if video cannot play yet
if(video_ready = false){
loading_message.style.visibility = "visible";
loading_message.innerHTML = "Loading...";
}
}, true);
The video was edited using Windows Live Movie Maker, and converted to the currently supported formats for HTML5 Video using the following FREE software:
*Note: Firefox currently (April 2011) only supports OGV Format, Chrome supports both formats. WARNING!! Firefox will play back an .OGV file locally (in browser) without any problem, but it will NOT work once you have uploaded the file to a server! To fix this, change the extension from .OGV to .OGG.
ffmpeg2theora is a command line application only. You will need to use the command prompt (Start... Run... cmd) and navigate to the directory where you have placed the ffmpeg2theora-0.27.exe file. Place the video that you wish to convert in the same directory. For example, if you created a folder on C: and called it THEORA, you would need to type the following into the command prompt:
Other command line examples can be found here: http://www.v2v.cc/~j/ffmpeg2theora/examples.html
The music file was created using both the Original Music Video (OMV) and Album versions of Learn To Fly by the Foo Fighters.
I took the OMV audio from an .FLV (Youtube) movie file using FREESTUDIO Free Video To Mp3 Converter. I wanted the intro Muzak from the OMV, but not the outro Musak, so I used Audacity with Lame for Audacity to edit both versions into a single track.