Create An Impressionist UI Video Player Using HTML5, jQuery, And CSS3
Today’s featured tutorial is written by Valeriu Timbuc from DesignModo, which teaches you how to create a video player using a combination of HTML5, jQuery, and CSS3. The look and feel of the video player is based on Vladimir Kudinov’s Impressionist UI design, which of course, we’re going to recreate using CSS3. As for the functionality, we will be using script from MediaElement.js, which is very versatile because it can work with older browsers by using Flash and Silverlight to mimic the HTML5 MediaElement API.
I’m only going to feature the highlights of the tutorial here but you can check out the FULL step-by-step version of Valeriu’s tutorial, plus the demo.
The basic HTML markup for the video player is pretty much straightforward; specify the size or dimension of the video screen, provide a display image, and then indicated the source and the type of file.
<video width="640" height="267"
poster="media/cars.png">
<source src="media/cars.mp4" type="video/mp4"> </video>
In the jQuery part (MediaElement.js) of the tutorial, you can either host it locally or use Google’s hosted library. Not much is really needed to be done unless you intend to do any further tweaking with the video settings or controls.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script
src="js/mediaelement-and-player.min.js"></script>
Now, the CSS part is where things really start to get lengthy as it involves not only creating the look and the style of the video elements but also the positioning of each to its proper place. If you wish to see the whole CSS code, again, you can refer to the link to Valeriu’s tutorial above.
To sum it up, Valeriu’s video player provides you a great alternative when it comes to embedding your own videos to your site. Its design is simple yet attractive, and it has all the bare essentials (i.e. playback button, volume control, etc.) except the option to select the quality of the vid.
Create An Impressionist UI Video Player Using HTML5, jQuery, And CSS3
Today’s featured tutorial is written by Valeriu Timbuc from DesignModo, which teaches you how to create a video player using a combination of HTML5, jQuery, and CSS3. The look and feel of the video player is based on Vladimir Kudinov’s Impressionist UI design, which of course, we’re going to recreate using CSS3. As for the functionality, we will be using script from MediaElement.js, which is very versatile because it can work with older browsers by using Flash and Silverlight to mimic the HTML5 MediaElement API.
I’m only going to feature the highlights of the tutorial here but if you’d like to check out the FULL step-by-step version of Valeriu’s tutorial, then simply click on here. To see the video player in action, you can click here for the demo.
The basic HTML markup for the video player is pretty much straightforward; specify the size or dimension of the video screen, provide a display image, and then indicated the source and the type of file.
|
<video width=”640″ height=”267″ poster=”media/cars.png”> <source src=”media/cars.mp4″ type=”video/mp4″> </video> |
In the jQuery part (MediaElement.js) of the tutorial, you either choose to host it locally or use Google’s hosted library. Not much is really needed to be done unless you intend to do any further tweaking with the video settings or controls.
|
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script> <script src=”js/mediaelement-and-player.min.js”></script> |
Now, the CSS part is where things really start to get lengthy as it involves not only creating the look and the style of the video elements but also the positioning of each to its proper place. If you wish to see the whole CSS code, again, you can refer to the link to Valeriu’s tutorial, which I provided above.
To sum up, Valeriu’s video player provides you a great alternative when it comes to embedding your own videos to your site. Its design is simple yet attractive, and it has all the bare essentials (i.e. playback button, volume control, etc.) except the option to select the quality of the vid.
0
511
