To do this we add a listener for the DOMContentLoaded event: document. Moving to our JavaScript file, we’ll define a function called initialiseMediaPlayer() which we need to call when the document is loaded. Encode video files to HTML5 video compatible format (include MP4, WebM, Ogv) in a batch mode. From left to right and top to bottom: Firefox, Chrome, Opera, Safari, IE9, IE10 Initialisation Download HTML5 Video Player for Mac or Windows, the easiest software for you to encode your video to HTML5 video format and embed HTML5 video into your own website with a few mouse clicks. But first of all we need to initialise our player, which we do via JavaScript.ĭefault video controls vary from browser to browser. The div with the id of 'media-controls' will contain exactly what it says. It's better to switch off the controls via JavaScript in case the user has JavaScript disabled. Notice we have set the controls attribute for the video element, even though we want to define our own control set. There is also a video element, defined via two initial source elements: the test video is in MP4 and WebM formats.
I won't be going into the CSS for the player in this article.
As you can see, we're including a CSS file, which will contain the styling for our media player, and a JavaScript file, which will include the code controlling the player.
