jquery Custom HTML 5 video player

HTML5 Video Label Basics

To learn the basic usage of the HTML 5 video tag, first look at the following example code:

The code is as follows	Copy Code
<video id= "Myvideo" Controls poster= "Video.jpg" width= "600″height=" 400″> <source src= "Video.mp4″type=" video/mp4″/> <source src= "VIDEO.WEBM" type= "VIDEO/WEBM"/> <source src= "VIDEO.OGV" type= "Video/ogg"/> <p>your Browser does not support the video tag.</p> </video>

In HTML5, the video tag only needs to add <video> tag, in the above code tag, where SRC specifies the format of the video source, currently supports MP4,WEBM and ogy format, if there are other video formats, you can use some video tools to convert.

In addition, in the HTML5 tag, you can also write some text, such as the above "your browser does not support video tags."

Also note that if you use the video tag on the ipad, because of the current bug, you have to put the MP4 file in the top of the video tag, or you'll get an error.

Start customizing the HTML 5 video player Plugin

With the above basics, we can start with the HTML 5 video player plugin. First of all, it's fortunate that HTML 5 has a relevant API for invoking operations in both video and audio (see the standard of the Consortium: http://www.w3.org/TR/html5/the-iframe-element.html#media-elements). First, let's take a look at a standard HTML5 video tag object through jquery, and notice that we're using a DOM object here, otherwise we can't get the various properties and methods of the video through the API.

Get the video tag, this is the DOM object

The code is as follows	Copy Code
var video = document.getElementById (' videoid ');

You can also use the JQuery method as follows:

The code is as follows	Copy Code
var video = $ (' #videoID '). Get (0);

The next step is to design play and pause (pause button) with the following code:

The code is as follows	Copy Code
<div class= "Control" > <a href= "#" class= "Btnplay" >Play/Pause</a> </div>

Here are the jquery event codes for playing and pausing buttons as follows:

The code is as follows	Copy Code
$ ('. Btnplay '). On (' click ', function () { if (video[0].paused) { Video[0].play (); } else { Video[0].pause (); } return false; };

As you can see, here you can use the paused method to determine whether the video has been paused, and play method can be played directly in the video, the logic here is very simple, if the video has been paused, when pressed again when the play, and vice versa.

Next, see how you can display the current playback progress and playback. The playback function is also available in the HTML5. We first design how to display the current playback progress, and the total length of the video, the code is designed as follows:

The code is as follows	Copy Code
<div class= "Progresstime" > <span class= "Current" ></span> Video duration: <span class= "duration" ></span> </div>

And now related jquery events, you must determine through the Loadedmetadata event, to determine whether the HTML5 video metadata metadata has been loaded, and then you can call the current time and total length of videos, the code is as follows:

The code is as follows	Copy Code
Total length of time to get video Video.on (' Loadedmetadata ', function () { $ ('. Duration '). Text (video[0].duration)); }); Update current HTML5 video playback time Video.on (' Timeupdate ', function () { $ ('. Current '). Text (video[0].currenttime); });

Next, we design a video playback progress bar, the design progress bar style is as follows:

The code is as follows	Copy Code
<style> . ProgressBar { position:relative; width:100%; height:height:10px; Backgroud-color: #000; } . Timebar { Position:absolute; top:0; left:0; width:0; height:100%; Background-color: #ccc; } </style>

In the following interface, apply the above style

The code is as follows	Copy Code
<div class= "ProgressBar" > <div class= "Timebar" ></div> </div>

Now, we will integrate the knowledge above, improve the progress bar, through the current video playback time divided by the total time of the video, the percentage of progress to play, and then through the progress bar display, the following code:

The code is as follows	Copy Code
Video.on (' Loadedmetadata ', function () { $ ('. Duration '). Text (video[0].duration)); }); Video.on (' Timeupdate ', function () { var currentpos = Video[0].currenttime; Get Current playback time var maxduration = video[0].duration; Get movie Playback time var percentage = * currentpos/maxduration; Percentage $ ('. Timebar '). CSS (' width ', percentage+ '% '); });

But this is obviously not enough, we also have to let the progress bar drag, we can listen to Mousedown,mouseup and MouseMove these events to complete the relevant functions, the code is as follows:

The code is as follows

Copy Code

var Timedrag = false; /* The initial default drag state is false/ $ ('. ProgressBar '). MouseDown (function (e) { Timedrag = true; Updatebar (E.pagex); }); $ (document). MouseUp (function (e) { if (Timedrag) { Timedrag = false; Stop dragging and set Timedrag to False Updatebar (E.pagex); } }); $ (document). MouseMove (function (e) { if (Timedrag) { Updatebar (E.pagex); } }); var Updatebar = function (x) { var progress = $ ('. ProgressBar '); var maxduration = video[0].duration; var position = X–progress.offset (). Left; var percentage = * Position Check the scope of the drag progress bar is legal if (Percentage > 100) { Percentage = 100; } if (Percentage < 0) { Percentage = 0; } Update progress bar and video CurrentTime $ ('. Timebar '). CSS (' width ', percentage+ '% '); Video[0].currenttime = maxduration * PERCENTAGE/100; };