Shulou(Shulou.com)06/02 Report--

This article mainly explains "HTML 5, CSS3, JS how to develop the player", the content of the article is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly in depth, together to study and learn "HTML 5, CSS3, JS how to develop the player"!

1. Download MediaElement.js

First download the MediaElement.js script file, which is an open source HTML5 audio and video plug-in. After decompression, you will get three files-"flashmediaelement.swf", "mediaelement-and-player.min.js" and "silverlightmediaelement.xap", which use Flash, JavaScript and SilverLight to realize video playback. And create a new "js" folder and put them in it (of course, in this case, you don't need "flashmediaelement.swf" and "silverlightmediaelement.xap" files, you can delete them. ).

2.HTML marker

First you need to link a jQuery library, which is the jQuery library hosted by Google. Then we are linking the "mediaelement-and-player.min.js" file and the CSS file.

Video Player

Of course, we also need to add a HTML5 video tag to create a video player, and then add some attributes to initialize it. (note: poster refers to the preview of the video.)

Next, let's add the following code to create the control panel. The controllers or functions that need to be added are:

AlwaysShowControls-"true" sets the video control panel to display forever, and "false" is hidden after the mouse is removed.

VideoVolume-"horizontal" sets the volume slide controller to horizontal

Other functions: pause playback, forward playback, sound and full screen

/ /

For more settings, please refer to MediaElement.js 's settings documentation.

3. Basic style design of player

Modify the style settings first:

.mejs-inner, .mejs-inner div, .mejs-inner a, .mejs-inner span, .mejs-inner button, .mejs-inner img {margin: 0; padding: 0; border: none; outline: none;}

Then add a style to the video container, the following code is all used to control the layout, without making any changes to the player style.

.mejs-container {position: relative; background: # 00000000;} .mejs-inner {position: relative; width: inherit; height: inherit;} .me-plugin {position: absolute;} .mejs-container-fullscreen .mejs-mediaelement, .mejs-container-fullscreen video, .mejs-embed, .mejs-embed body, .mejs-mediaelement {width: 100% Height: 100%;} .mejs-embed, .mejs-embed body {margin: 0; padding: 0; overflow: hidden;} .mejs-container-fullscreen {position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: 1000 } .mejs-background, .mejs-mediaelement, .mejs-poster, .mejs-overlay {position: absolute; top: 0; left: 0;} .mejs-poster img {display: block;}

4. Dashboard style settin

Let's start by adding a "play button":

.mejs-overlay-play {cursor: pointer;}. Mejs-inner .mejs-overlay-button {position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; margin:-25px 00-25px; background: url (.. / img/play.png) no-repeat;}

Next, add the video controller layout: place it at the bottom of the video, with a height of 34px, and add a background color to set the transparency with RGBA. * add basic styles and elements to the button.

.mejs-container. Mejs-controls {position: absolute; width: 100%; height: 34px; left: 0; bottom: 0; background: rgb; background: rgba (0meme 0, .7);} .mejs-controls. Mejs-button button {display: block; cursor: pointer; width: 16px; height: 16px Background: transparent url (.. / img/controls.png);}

5. Video controller

All we have to do in this step is to place the controller on the right. So first we put all the buttons on the control panel, and then make detailed adjustments to their width, position and background image.

.mejs-controls div.mejs-playpause-button {position: absolute; top: 12px; left: 15px;}. Mejs-controls. Mejs-play button, .mejs-controls. Mejs-pause button {width: 12px; height: 12px; background-position: 0;} .mejs-controls. Mejs-pause button {background-position: 0-12px Mejs-controls div.mejs-volume-button {position: absolute; top: 12px; left: 45px;}. Mejs-controls. Mejs-mute button,. Mejs-controls. Mejs-unmute button {width: 14px; height: 12px; background-position:-12px 0;}. Mejs-controls. Mejs-unmute button {background-position:-12px-12px }. Mejs-controls div.mejs-fullscreen-button {position: absolute; top: 7px; right: 7px;} .mejs-controls .mejs-fullscreen-button button, .mejs-controls. Mejs-unfullscreen button {width: 27px; height: 22px; background-position:-26px 0;} .mejs-controls. Mejs-unfullscreen button {background-position:-26px-22px;}

6. Volume sliding controller

The same is true for the volume slide controller, just set the position and size, and add a fillet effect.

.mejs-controls div.mejs-horizontal-volume-slider {position: absolute; cursor: pointer; top: 15px; left: 65px;} .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {width: 60px; background: # d6d6d6;} .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {position: absolute; width: 0 Top: 0; left: 0;} .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total, .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {height: 4px;-webkit-border-radius: 2px;-moz-border-radius: 2px; border-radius: 2px;}

7. Progress bar

Setting the progress bar is equally simple, just press it close to the top of the control panel, and then set the background color for different states (all and loaded states). Now initialize it to zero and change it automatically when the movie is played. But you can't see it. )

.mejs-controls div.mejs-time-rail {position: absolute; width: 100%; left: 0; top:-10px;} .mejs-controls .mejs-time-rail span {position: absolute; display: block; cursor: pointer; width: 100%; height: 10px; top: 0; left: 0 }. Mejs-controls .mejs-time-rail .mejs-time-total {background: rgb (152152152); background: rgba (152 Meijs-time-rail 152,.5);} .mejs-controls .mejs-time-rail .mejs-time-loaded {background: rgb; background: rgba (0J 0J 0, .3);} .mejs-controls .mejs-time-rail .mejs-time-current {width: 0;}

8. Progress bar controller and time prompt box

In this step, we should add a progress bar controller and a time prompt box to the progress bar. similarly, we should adjust the position, set the width, height and background image, and add some typesetting styles.

. mejs-controls .mejs-time-rail .mejs-time-handle {position: absolute; cursor: pointer; width: 16px; height: 18px; top:-3px; background: url (.. / img/handle.png);} .mejs-controls .mejs-time-rail .mejs-time-float {position: absolute; display: none; width: 33px; height: 23px; top:-26px Margin-left:-17px; background: url (.. / img/tooltip.png);} .mejs-controls .mejs-time-rail .mejs-time-float-current {position: absolute; display: block; left: 0; top: 4px; font-family: Helvetica, Arial, sans-serif; font-size: 10px; font-weight: bold; color: # 666666 Text-align: center;} .mejs-controls .mejs-time-rail .mejs-time-float-corner {display: none;}

9. Green progress bar played

The step of this tutorial is to add a green played progress bar and volume display to the progress bar and the volume slider, which is also very simple.

.mejs-controls .mejs-time-rail .mejs-time-current, .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {background: # 82d344; background:-webkit-linear-gradient (top, # 82d344 0%, # 51af34 100%); background:-moz-linear-gradient (top, # 82d344 0%, # 51af34 100%) Background:-o-linear-gradient (top, # 82d344 0%, # 51af34 100%); background:-ms-linear-gradient (top, # 82d344 0%, # 51af34 100%); background: linear-gradient (top, # 82d344 0%, # 51af34 100%);}

Thank you for your reading, the above is "HTML 5, CSS3, JS how to develop the player" content, after the study of this article, I believe you on HTML 5, CSS3, JS how to develop the player this problem has a deeper understanding, the specific use of the situation also needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.