Use CSS3 + JQuery to create a custom video player, css3jquery

Use CSS3 + JQuery to create a custom video player, css3jquery

Introduction
The HTML5 <video> tag has been supported by most mainstream browsers, including IE9, which has not yet been officially released. It also states that the <video> tag is supported. Using the native features of the browser to embed videos has many advantages, so many developers want to use it as soon as possible, but there are still some issues to consider before using it, especially the different Video Encoding Problems supported by Opera/Firefox and IE/Safari browsers, the open-source video code VP8 released by Google a few months ago is expected to solve this problem. In addition, Google also released the Open Network Media Project WebM to help developers develop world-class media formats for open networks, opera, Firefox, Chrome, and IE9 both support VP8 and Flash Player can also play VP8, this means that we can quickly make only one version of the video and play it on all mainstream browsers. Another major problem is how to build a custom HTML5 <video> Player. This is the advantage of Flash Player, using the interfaces provided by Flash IDE, you can easily build a personalized video player. How can you implement the HTML5 <video> tag? This is what we will solve in this article! We will develop a jQuery plug-in for HTML5 <video> video players, which can be easily customized and divided into the following parts:
1. Video control Toolbar
2. Video control buttons
3. package it into a jQuery plug-in
4. Appearance and experience
5. Custom Skin
Video control Toolbar
As a professional web developer, we must make sure that the appearance of a video player looks consistent in various browsers when creating a video player ), however, the following figure shows that the video control Toolbar of Each browser has different appearances:

We have to create the control toolbar from scratch. It is not difficult to use HTML and CSS to add some images, in addition, through the APIS provided by HTML5 multimedia elements, we can easily bind any buttons created with events such as playback/pause.

Video control button
The basic video control Toolbar contains a play/pause button, a progress bar, a timer, and a volume control button. We place these buttons Under the <video> element, use a div as the parent container:

Copy code

Note that we use the class attribute of the element to replace the ID attribute to facilitate the use of multiple players on one page.

PackageJQueryPlug-ins
After the control button is created, we need to use APIs of multimedia elements to achieve video control. As mentioned above, we pack our player into a jQuery plugin, the Code is as follows:

Copy code

Assume that you understand jQuery and know how to create a jQuery plug-in, because this is not covered in this article. In the above script, we use jQuery to dynamically create the element of the video control toolbar, next, we need to obtain the corresponding elements to bind events:

10. $ video_controls.hide (); // keep the controls hidden

Copy code

Here we get it through the className method, first hide the toolbar until all resources are loaded. Now we can play/pause the button:

10. $ gVideo. click (gPlay );

12. $ gVideo. bind ('play', function (){

14 .});

16. $ gVideo. bind ('pause', function (){

18 .});

20. $ gVideo. bind ('enabled', function (){

22 .});

Copy code

Most browsers provide an independent menu when right-clicking a video. It also provides the video control function. If you use this right-click menu to control the video, it will conflict with our custom control, to avoid this, we need to bind the video player's own "play", "pause", and "end" events, and process the play/pause button in the event processing function, control button style.
To create the drag block of the progress bar, we use the Slider component of jQuery UI:

23 .};

25. createSeek ();

Copy code

As you can see, here we have written a recursive function to compare the readyState attribute of video cyclically to determine whether the video is ready, otherwise, we will not be able to get the video duration or create a slide block. When the video is ready, we initialize the slide block and display the control toolbar. Next we will bind the video element's timeupdate event to implement the timer function:

11 .};

13. $ gVideo. bind ('timeupdate', seekUpdate );

Copy code

Here, we use the seekUpdate function to obtain the video currentTime attribute value, and then call the gTimeFormat function for formatting to obtain the current playback time point.
As for the volume control, we still use the Slider component of jQuery UI and then use the custom function to mute and cancel the mute function:

13 .});

15. var muteVolume = function (){

27 .};

29. $ ghinda_volume_btn.click (muteVolume );

Copy code

Finally, after the custom video control toolbar is constructed, you need to remove the controls attribute of the <video> label, so that the default Toolbar of the browser is removed.
All right, all of our plug-in functions have been completed. Call method:

Copy code

This will apply our plug-in to every video element on the page.

Appearance and experience
Okay. Now it's interesting, that is, the appearance and experience of the player. After the plug-in function is complete, you can easily customize the style with a bit of CSS. We will use CSS3 to implement all the functions.
First, we add some styles to the player main container:

16 .}

Copy code

Next, we set the float on the left of the video control toolbar to make them horizontally aligned. With the opacity and transitions of CSS3, we added a very good floating effect to the play/pause and mute/cancel mute buttons:

15 .}

17 .. ghinda-paused-button {

19 .}

21 .. ghinda-video-play: hover {

23 .}

Copy code

If you carefully read the previous JavaScript code that adds and removes the playback/pause button style based on the video playback status (Playing/Paused), you will understand why. why does ghinda-paused-button need to be rewritten. the background attribute of ghinda-video-play.
Now it's our turn to slide blocks. The Slider component of jQuery UI is used to implement progress bars and volume control slides. This component comes with its own style, it is defined in the css file corresponding to jQuery UI, but in order to make the sliding block and other player controls look the same, we have completely rewritten its style:

Copy code

At this time, the sliding block of the volume control is always displayed next to the volume button. We need to change it to default hidden. When the mouse is suspended on the volume button, it is dynamically displayed, using transitions to achieve this effect is a good choice:

Copy code

Using some basic CSS attributes and the New Attributes provided by CSS3, we create a brand new player appearance.

Custom Skin
You may have noticed that some default options have been defined when writing the plug-ins. These options are theme and childtheme. You can customize the skin of the application as needed when calling the plug-ins.
Theme is a complete set of style definitions for all controls. childtheme is to rewrite some styles Based on theme. We can specify either of the two options or one of them when calling the plug-in:

Copy code

We wrote an example of the skin smalldark, which only overwrites some of the styles and the display effect is as follows:


Summary
Using HTML5 video, JavaScript, and CSS3 to create a custom video player is really easy. t is used to implement the tool bar function and the appearance and experience are handed over to CSS3, we have a powerful and easy-to-Customize solution!
Enjoy!

Run css3 In the animate method of jquery.

It seems that jquery animate does not support-webkit-transform. I tried it many times and it failed! Jquery.css () also supports,
. Addw {
-Webkit-transition: all 0.5 s bytes-in-out;
-Moz-transition: all 0.5 s bytes-in-out;
Transition: all 0.5 s bytes-in-out;
}
. Add {
-Webkit-transform: scale (0.5 );
-Moz-transform: Scaling (0.5 );
-Ms-transform: scale (1, 0.5 );
Transform: scale (1, 0.5 )}
Then we can use jquery. addclass ("addw"). addclass ("add! Most of the messages received on stack overflow

Development Prospects of jQuery, HTML5, and CSS3

Well, since you are an intern, it means you still have a lot of time. html css3, this is the basic jsp jq, this is the framework.
It works perfectly if you are both proficient.
With the accumulation of time, you gradually develop from production to planning, that is, the title of director. After all, when you are older, for example, if you are working on the frontend, you will feel a little unable to keep up with the frontend. it's a physical activity.
For the time being, you don't have to worry about what to do. In the background, you just need to accumulate some big projects for the whole site after completing your existing internships, and then choose a better company to develop.
Accumulating your current start point is still a good one. At least it is much better than coming home!