HTML5 + CSS3 + JQuery creates a custom video player, html5css3

HTML5 + CSS3 + JQuery creates a custom video player, html5css3

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 ControlTool bar 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 ControlButton 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 the 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. Package into jQuery plug-in 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 the 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 elements of the video control toolbar. Next we need to obtain the corresponding elements to bind events: Copy the code. Here we get it through className. First hide the toolbar until all resources are loaded. Now we can play/pause the button: 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, process the play/pause button in the event processing function, and control the style of the button. To create the drag block of the progress bar, we use the Slider component of jQuery UI: Copy the 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: Copy the 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. 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: Copy the code and then remove the controls attribute of the <video> label after the custom video control toolbar is constructed. In this way, the default Toolbar of the browser is removed. All right, all of our plug-in functions have been completed. Call method: Copy the code to 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: Copy the code. Next, set the floating 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: Copy the code. if you carefully read the previous JavaScript code that adds and removes the playback/pause button style based on the video Playing 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 the 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 hovering over the volume button, it is dynamically displayed, using transitions to achieve this effect is a good choice: Using some basic CSS attributes and the New Attributes provided by CSS3, the copy Code creates a new player appearance, which looks like this: 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 the code and write an example of the skin smalldark. It only overwrites some 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!

Html5 + css3 + jquery what are the books developed by the actual website, and what are the video tutorials?

Go to the donkey to download it. There are a lot of materials above, and I usually download them here.
There is a micro-disk in Weibo, where there are a lot of shared materials. If you cannot find some information, you can find it.
Of course, csdn programmers also have a lot of resources to download, but that place is too messy. I will go there only when I cannot find the materials.
 
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!