Here we are using jQuery to create the video player markup dynamically (but not the video player itself), and removing the controls attribute once the script loads. Var $video_wrap = $('').addClass('ghinda-video-player').addClass(options.theme).addClass(options.childtheme) iterate and reformat each matched element Var options = $.extend(defaults, options) build main options before element iteration If you need more information on these subjects, consult Craig Buckler’s How to develop a jQuery plugin tutorial, and the JavaScript section of the Opera web standards curriculum. As noted before, we’ll package the player as a jQuery plugin, which will also aid reuse on multiple elements.Īuthor’s note: I’m going to assume you are familiar with the basic anatomy of a jQuery plugin, and JavaScript, so I’m only briefly going to explain the script. Packaging the player as a jQuery pluginĪfter creating the markup we’ll have to tie our elements to the media elements API, in order to control the video’s behavior. We’ve used classes instead of IDs for all elements, to be able to use the same code for multiple video players on the same page. We’ll insert the markup for the controls after the element, and wrap them up in another element. ![]() We’ll need a Play/Pause button, a seek bar, a timer and a volume button and slider. ![]() Basic markup for controlsįirst, we’ll need to create the actual markup for the video controls. Because the native video player plays nicely with other open web technologies, we can create our controls using HTML, CSS, SVG or whatever else we like. Figure 1: Native browser video controls across different browsersĪll media elements in HTML5 support the media elements API, which we can access using JavaScript and use to easily wire up functions such as play, pause, etc. If we want our controls to look the same across all browsers, and integrate with our own design, we’ll have to create our own controls from scratch. Each browser however provides its own different look and feel for the player, from the minimal approach of Firefox and Chrome, to the more shiny controls of Opera and Safari (see Figure 1 for the controls in each browser). Video controlsĪs professional web designers, we want to create a video player that looks consistent across browsers. To build a scalable solution, we’ll wrap everything up in a jQuery plugin. We’ll use jQuery for easier DOM manipulation, and jQuery UI for the slider controls used for seeking and changing the volume level. Packaging the player as a jQuery plugin.This is the first of a series in which we will look at building up an easily customizable HTML5 player, including packaging it as a simple jQuery plugin, choosing control types and outputting custom CSS for your own situation. IF we want to write a customised player for the HTML5 element we need to handcode all the HTML5, CSS3, JavaScript, and any other open standards we want to use to build a player!Īnd this is where this article comes in. ![]() ![]() The other major barrier to consider is building up a custom HTML5 player – this is where a Flash-only solution currently has an advantage, with the powerful Flash IDE providing an easy interface with which to create a customized video player component. This means that we will soon be able to create a single version of the video that will play in the element in most browsers, and the Flash Player in those that don’t support WebM natively. Opera, Firefox, Chrome and IE9 all have support in final builds, developer builds, or at least support announced for this format, and Flash will be able to play VP8. That might not be a problem for much longer though, with Google recently releasing the VP8 codec, and the WebM project coming into existence. There are a couple of barriers to this that remain, most notably the problem of which codecs are supported in each browser, with a disagreement between Opera/Firefox and IE/Safari. There are many advantages of having video embedded natively in the browser (covered in the article Introduction to HTML5 video by Bruce Lawson), so many developers are trying to use it as soon as possible. The HTML5 element is already supported by most modern browsers, and even IE has support announced for version 9.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |