HTML5Tag: HTML5
HTML5 Video Skinning – A Case Study
(See the demo.)
Recently RealEyes developed a custom Flash video player for the Monterey Bay Aquarium. We also developed an HTML5 solution for cases when a user might not have Flash Player. In these situations we use the HTML5 video tag and let the browser provide the video player.
The Problem
The limitation here is that each browser’s video player has a unique control bar – and none of these match the look and functionality of the control bar in the Flash video player that we created for the client. See the differences below.
This is how the Flash Player looks.
This is the native video player control bar for the Chrome browser.
The Solution
To create a consistent control bar we used javascript and jQuery (with a little jQuery UI along the way) to manipulate the Media Element API and replace the default native control bar with our own.
File Set Up
The dependencies for this are jQuery and jQueryUI. We handle all our custom control bar creation and functionality in a custom jQuery plugin named videoskin.js. Then we style our control bar with a separate CSS file, videoskin.css.
Let’s break down the code.
First let’s take a look at our very basic HTML. Within the head tags we load jQuery, jQueryUI and our custom plugin ‘videoskin.js’.
On line 8 we apply our plugin to our video tag, which in this case had the ID of test-video.
Within the body tags we’ve got our HTML5 ‘video’ tag with a couple of different source urls specified to keep most browsers happy. Notice that there is no HTML for our custom control bar – that comes later!
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="lib/jquery/jquery-ui-1.8.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.videoskin.js"></script>
<script>
$(document).ready(function() {
$('#test-video').videoSkin();
});
</script>
</head>
<body>
<div id="container">
<video id="test-video" controls>
<source src="http://players.edgesuite.net/videos/big_buck_bunny/bbb_448x252.mp4" type="video/mp4">
<source src="http://players.edgesuite.net/videos/big_buck_bunny/bbb_448x252.ogg" type="video/ogg">
<p>Your browser does not support the video tag.</p>
</video>
</div>
</body>
</html>
Now let’s jump to our jQuery plugin code. Here we are using jQuery to inject the html for the new control bar – a series of new DIVs seen on line 8.
// express the video element as a jQuery object
var $t = $(this);
//dynamically add html to style and manipulate
//player container
var $video_wrap = $('<div></div>').addClass('video-player');
//player controls
var $video_controls = $('<div class="video-controls"><div class="video-seek"><div class="video-timer">00:00</div><div class="volume-box"></div></div>');
//add em
$t.wrap($video_wrap);
$t.after($video_controls);
Now, if we switch back to the HTML, we’ll see the code for our new control bar.
<div class="video-controls" style="display: block;">
<a class="video-play" title="Play/Pause"></a>
<a class="video-rewind" title="Rewind 30"></a>
<div class="video-seek">
<div class="video-timer">00:00</div>
<div class="volume-box"></div>
</div>
This gives us our basic control bar which we can style and add our custom icons using typical CSS.
.video-controls {
display: block;
clear: both;
float: left;
padding-top: 5px;
position: relative;
width: 100%;
}
.video-play {
background: url('images/icon_play.png') no-repeat;
display: block;
float: left;
height: 15px;
margin-right: 8px;
width: 12px;
}
So now we’ve got a new custom control bar – let’s add the functionality. Thanks to the Media Element API this is pretty straightforward. We create listeners and functions for the buttons and use jQueryUI to help us with the seek and volume sliders. Note on line 54 that we can show our custom controls now that the functionality is set up.
//create vars for each video player element to add listeners to
var $video_container = $t.parent('.video-player');
var $video_controls = $('.video-controls', $video_container);
var $play_btn = $('.video-play', $video_container);
var $video_seek = $('.video-seek', $video_container);
var $video_timer = $('.video-timer', $video_container);
var $volume = $('.volume-slider', $video_container);
var $volume_btn = $('.volume-button', $video_container);
var $rewind_btn = $('.video-rewind', $video_container);
$video_controls.hide(); // keep the controls hidden
//play-pause function
var vidPlay = function() {
if($t.prop('paused') == false) {
$t[0].pause();
} else {
$t[0].play();
}
};
//play-pause listeners
$play_btn.click(vidPlay);
$t.click(vidPlay);
$t.bind('play', function() {
$play_btn.addClass('paused-button');
});
$t.bind('pause', function() {
$play_btn.removeClass('paused-button');
});
$t.bind('ended', function() {
$play_btn.removeClass('paused-button');
});
//seek slider - requires jquery UI
var createSeek = function () {
if($t.prop('readyState')) {
var video_duration = $t.prop('duration');
$video_seek.slider({
value: 0,
step: 0.01,
orientation: "horizontal",
range: "min",
max: video_duration,
animate: true,
slide: function(){
seeksliding = true;
},
stop:function(e,ui){
seeksliding = false;
$t.prop("currentTime",ui.value);
}
});
$video_controls.show(); //show the video controls
var seekWidth = $t.width() - 150; //adjust width of seek bar for different movie widths
$('.video-seek').width(seekWidth);
} else {
setTimeout(createSeek, 150);
}
};
createSeek();
Our client wanted a button that would rewind 30 seconds when clicked. This was easy to accomplish thanks to the MediaElement API exposing the currentTime property.
//rewind 30 seconds
var rewindThirty = function() {
var rewoundTime = $t.prop('currentTime') - 30;
var posRewoundTime = Math.max(0,rewoundTime);
$t.prop("currentTime",posRewoundTime);
$video_seek.slider('value', posRewoundTime);
};
$rewind_btn.click(rewindThirty);
Finally we remove the native control bar.
$t.removeAttr('controls');
Conclusion
While there are some great jQuery plugins for skinning HTML5 video available, it’s really not difficult to create your own lightweight solution with only the features that you need and with full control over the look and feel.
Here are some more valuable resources on getting started:
Custom Video Controls with jQuery
Custom Controls for HTML5 Video
Custom HTML5 Video Player
To kick off the year, it seemed only appropriate to write about something that we at RealEyes are overly, awkwardly, nerdily, perhaps even a little disconcertingly passionate about – Web Video and the Players that play it.
There are nearly 30 players that are currently available for implementation. Given the state of development, and the various licenses and pricing options it’s quite a challenge to find the perfect one for your project. A list of the currently viable video players can be found here.
With (almost) all the major browsers having shifted to a very quick release cycle, there are updates coming all the time these days. While this is absolutely good for the state of HTML5/CSS3 implementation and a number of other things, it unfortunately doesn’t seem to be getting us that much closer to one good, truly universal option for video yet. Flash of course will work in all major desktop browsers and render consistently across all of them, assuming that it’s installed. Once you start considering mobile though, things are not nearly as simple. Flash will probably work on a desktop, but the cool kids are all switching to HTML5 <video> tags, iOS devices are awfully picky, and Android has it’s own set of peculiarities. Rumor has it that Ubuntu phones will be entering the market later this year, and they will almost certainly have their own quirks.
With all of that in mind, how do you gracefully deliver video to all those possible browsers and devices with a consistent video player interface, and still keep your life as simple as possible?
This is where the current cornucopia of cross-browser video players comes in. Using one of the many players available, it is possible to create a consistent experience that will play everywhere with only one or two video source files and a very manageable amount of code.
Getting down to business, let’s introduce some of the players that seem the most promising, based on their ease of use, range of features, and developer-friendly licenses. Keeping those points in mind, here are a few of our recommendations.
MediaElement.js
MediaElement.js (or MEjs) was created by John Dyer, and provides an impressive number of playback solutions, including HTML5 Video, Flash, and Silverlight. It’s ease of skinning and setup, wide range of delivery options, and very friendly license, make it a perennial favorite, and it is endorsed by the likes of Chris Coyier and Paul Irish.
Easy to install and setup
Getting MEjs up and running is as simple as downloading the current release, adding the required Javascript and CSS files to your site, and calling them with the following code:
In the <head>:
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="mediaelement-and-player.min.js"></script> <link href="mediaelementplayer.css" rel="stylesheet" />
In the <body> where you’d like to place your video:
<video width="320" height="240" poster="poster.jpg" controls="controls" preload="none">
<source src="myvideo.mp4" type="video/mp4" />
<source src="myvideo.webm" type="video/webm" />
<source src="myvideo.ogv" type="video/ogg" />
<object width="320" height="240" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="flashvars" value="url=/wp-admin/myvideo.mp4&poster=/wp-admin/poster.jpg" />
<param name="src" value="http://www.realeyes.com/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="true" />
<embed width="320" height="240" type="application/x-shockwave-flash" src="http://www.realeyes.com/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" flashvars="url=/wp-admin/myvideo.mp4&poster=/wp-admin/poster.jpg" allowfullscreen="true" allowscriptaccess="true" />
<img src="myvideo.jpg" width="320" height="240" title="No video playback capabilities" alt="" />
</object>
</video>
And finally, start it all up with this (outside of the <head> or some versions of iOS will have issues):
// jQuery method
$('video').mediaelementplayer();
// normal JavaScript
var player = new MediaElementPlayer('#player');
Easy to skin
MEjs comes packaged with 4 skins already made, one default, and three others that emulate popular existing players. If you would like to customize it beyond that, all of the skinning is handled with CSS so it’s very easy to create your own. There’s not a lot of documentation provided, but the CSS for the included skins is very clear and very well laid out, so it can easily provide the reference you need.
VideoJS
VideoJS was created by Steve Heffernan along with Zencoder Inc. and has ties to the Brightcove CDN. This means that while it is wholly open source, and can be used entirely separate from anything related to them, it plays really nicely with their services, should you happen to be using them.
Fairly easy skinning
Skinning VideoJS is almost as easy as skinning MEjs, but unfortunately, the way it’s configured, you will either have to refactor the class names applied to video player elements, or make edits directly to the default CSS file, which isn’t optimal. On the other hand, VideoJS definitely scores points for how thoroughly commented their un-minified CSS file is. You certainly won’t have to guess at which values will effect which elements.
Lightweight
Another gold star for VideoJS is how lightweight it is, even including a Flash Player (many of the other available options that didn’t make our list offer the capability, but require you to add a Flash Player separately). While it lacks the Silverlight support offered by MEjs, that’s probably going to be a minimal concern in most use cases.
Ease of install
Given VideoJS’s support from Brightcove, there’s a CDN hosted option available, making it entirely possible to use without even needing to download it. One point to keep in mind though, is that if you want to use https, you’ll have to self-host instead of using the CDN version. Assuming for the moment though, that you’re using the CDN version, install is as simple as adding the following code to your page:
In the <head>:
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet" /> <script type="text/javascript" src="http://vjs.zencdn.net/c/video.js"></script>
And then in the <body>:
<video id="my_video_1" width="640" height="264" controls="controls" preload="auto" poster="my_video_poster.png" data-setup="{}">
<source src="my_video.mp4" type="video/mp4" />
<source src="my_video.webm" type="video/webm" />
<object id="my_video_1" width="640" height="264" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="src" value="http://www.realeyes.com/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" />
<param name="flashvars" value="url=/wp-admin/my_video.mp4&poster=/wp-admin/my_video_poster.png" />
<param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="true" />
<embed id="my_video_1" width="640" height="264" type="application/x-shockwave-flash" src="http://www.realeyes.com/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" flashvars="url=/wp-admin/my_video.mp4&poster=/wp-admin/my_video_poster.png" allowfullscreen="true" allowscriptaccess="true" />
</object>
</video>
Honorable Mentions
Both of these players are well regarded, though they are not open source, and while they have free options available, they require a Commercial License to remove the parent company’s branding:
- Flowplayer
- JW Player
So depending on your needs, they shouldn’t be ruled out, but when there are such good Open Source options available… *refer to any open source software forum and insert compelling, well thought out point and/or tirade here*
Media Encoding
Finally, while we’re not going to go in depth this particular article, if you have questions about encoding your video in multiple formats for cross-platform delivery, here are a few options that will have more information on their respective sites:
And the newly announced
Amazon Elastic Transcoder (beta)
This is just a quick overview of what’s available now, and some of our picks. There are, of course, new things popping up all the time that we’ll be checking out. Even with the two players we addressed, there are whole books that could be written about their implementation and styling.
RealEyes Swap Player
Last but not least, we have developed our own player for use by our clients. We may be just a touch biased, but we think it’s one of the best available options, and we work really, really hard at keeping it ahead of the game.
Boilerplate: Web dizajn i razvijanje nije tako lako kao što je nekada bilo – još je lakše
NAPOMENA: Ovaj pregled Boilerplate-a je deo predstojećeg pregleda Roots WordPress Theme-eОвај i kao takav, uglavnom se fokusira v2. Imajte na umu da se Boilerplate konstantno razvija (v3 јеpušten u februaru ). u stvari, možete misliti o Boilerplate promenama као pulsu HTML5 razvoja. Ostanite sa nama da vidite neke fascinantne promene v3.
Ah …. život je nekada bio mnogo jednostavniji..
Godine 1998 sam uzeo knjigu pod nazivom “Naučite HTML 4 za 24 sata”.Par dana i 350 stranica kasnije ja sam dizajnirao, kodirao i validirao svoj prvi sajt.
Naravno, taj sajt nije mnogo uradio ili čak nije dobro izgledao po današnjim standardima.
Sve ovo može biti previše, a dobra vest je bila da postoji neverovatna zajednica programera furiozno stvara fantastične (i besplatne!) alatke da bi sve ovo bilo jednostavnije.
Međutim, to dovodi do drugog problema – koju alatku da koristim i da joj verujem?
Na primer, skočite do front-end developer diskusione grupe ili foruma i pitajte koji HTML5 framework( radni okvir) treba da koristite i vidite koliko ćete različitih preporuka dobiti .. Uf ..!!
Dakle,šta ako ste želeli podrazumevani šablon za vaše programiranje koji već ima sve isprobane-i-tačne, ažurirane alatke instalirane i spremne da se prilagode potrebama vašeg projekta -komplet alatki – ako hoćete.
Pa,i mi ih imamo takođe.
I verovatno najpopularnija trenutno se zove HTML5 Boilerplate.
HTML5 Boilerplate (H5BP) je izum superstar programera Paul Irish-a i Divya Manian-a.
Neću ući u sve H5BP-ove karakteristike (koje su mnogo bolje pokrivene оvde ) ali je zaključak da je H5BP rad tima programera od nekoliko godina da vam da HTML5 template sa najboljim iskustvom naučenim na teži način.
H5BP je posebno pogodan za dizajnere sa rokovima, koji žele da se fokusiraju na prezentaciju i ne moraju da se zanimaju sa mnogim postavkama projekta. Samo stavite H5BP fajlove u vaš projekat i počnite sa radom. U zavisnosti od verzije koju koristite – 1,2, ili (od februara novu ) 3 – evo sa čime ćete počinjati :
- Resetujte CSS normalizovanim fontovima (Eric Meyer-ov resetovan ponovo učitan HTML5 Baseline i YUI CSS fonts) ili Nicolas Gallagher-ov Normalize.css .
- Osnovni štampani i mobilni stilovi
- .htaccess i drugi fajlovi konfig. servera ( dosta pametnih isečaka), prazan fajl više domenskih pravila za flash, robots.txt, favicon, apple-dodir-ikona, i 404 fajlove
- HTML5 – spreman. H5BP koristi alatku koja se zove Modernizr a koja obuhvata drugu alatku pod nazivom HTML5 Shim (između ostalih stvari kao funkciju detekcije) da proveri da li vaš HTML5 kod dobro izgleda na svim pretraživačima, uključujući IE6
- jQuery učitan sa Google CDN-a ili lokalno ako je korisnik offline
- ddbelated png za IE6 png fix
- yui profilisanje
- Optimizovana Google Analytics skripta
- Kul male stvari poput ispravka grešaka za izbegavanje console.log u IE & ispravka problema pisanja dokumenata, itd.
Najnoviji H5BP je verzija 3 i proteklih nekoliko zadnjih godina tim programera je porastao i proizvod se stalno poboljšava. Nedavno je bio fokus na performansama veb sajta. U tom cilju, Paul i ekipa su razvili H5BP ‘Build Script’. To je nešto što pokrenete kada završite svoj dizajnerski / programerski rad koji se odnosi na optimizaciju i minifikaciju a u cilju pravljenja vašeg sajta moćnom veb mašinom.
Na kraju, mi živimo u svetu paradoksa. Dok je svet veb dizajna i programiranja kompleksniji nego ikada, nikad nije bilo bolje vreme za rad u ovom polju zahvaljujući dobro osmišljenim i besplatnim alatkama kao što je HTML5 Boilerplate.
Želite li da saznate više?
Pogledajte ovaj video u kom Paul Irish objašnjava ceo Boilerplate templat i veliki je resurs.
This article is translated to “http://science.webhostinggeeks.com/html5-boilerplate“Serbo-Croatianlanguage by Anja Skrba from “http://webhostinggeeks.com/” Webhostinggeeks.com.
Boilerplate: Web design and development ain’t as easy as it used to be – it’s easier!
NOTE: This look at Boilerplate is part of an upcoming look at the Roots WordPress Theme and, as such, it focuses mostly on v2. Keep in mind that Boilerplate is under constant development (v3 was released in February). In fact, you could think of the Boilerplate changelog as the pulse of HTML5 development. Stay tuned for a look at some fascinating changes in v3.
Ah.…life used to be so much simpler.
In 1998 I picked up a book called ‘Teach yourself HTML 4 in 24 hours’. A couple of days and 350 pages later I had designed, coded and validated my first site.
Of course, that site didn’t do very much or even look very good by today’s standards.
All of this can be overwhelming and the good news has been that there is an incredible community of developers furiously creating fantastic (and free!) tools to make all of this easier.
But this leads to another problem – which tools do I use and trust?
For example, hop into a front-end developer discussion group or forum and ask what HTML5 framework you should use and see how many different recommendations you get..whew..!!
So, what if you wanted a default template for your development that already had all the tried-and-true, up-to-date tools installed and ready to be adapted to your project’s needs – a tool-kit, if you will.
Well, we have those too.
And probably the most popular right now is called HTML5 Boilerplate.
HTML5 Boilerplate (H5BP) is the brain-child of superstar developers Paul Irish and Divya Manian.
I won’t go into all of H5BP’s features (that is covered much better here) but the bottom-line is H5BP is like having a team of developers work for several years to give you an HTML5 template with all the best practices learned the hard way baked in.
H5BP seems especially suited for designers with deadlines who want to focus on presentation and not have to monkey around with a lot of project set-up. Just dump the H5BP files into your project and get to work. Depending on which version you’re using – 1,2, or (new as of February) 3 – here’s what you’ll be starting with:
- Reset CSS with normalized fonts (Eric Meyer’s reset reloaded with HTML5 Baseline and YUI CSS fonts) or Nicolas Gallagher’s Normalize.css.
- Basic print and mobile styles
- .htaccess and other server config files (full of really clever snippets), empty crossdomain policy file for flash, robots.txt, favicon, apple-touch-icon, and 404 files
- HTML5-ready. H5BP uses a tool called Modernizr that includes another tool called the HTML5 Shim (among other things like feature detection) to make sure your HTML5 code looks fine across all browsers including IE6
- jQuery loaded from the Google CDN or locally if the user is offline.
- ddbelated png for an IE6 png fix
- yui profiling
- Optimized Google Analytics script
- Cool little things like a fixes to avoid console.log errors in IE & a fix for document.write issues etc.
The latest H5BP is version 3 and over the past couple of years the development team has grown and the product has been continuously improved. Recently the focus has been on web site performance. To this end, Paul and the crew have developed the H5BP ‘Build Script’. This is something that you run when you’ve finished your design/development work that handles optimizing and minification to make your site a lean and mean web machine.
Ultimately we live in a world of paradox. While the world of web design and development is more complex than ever, there has also never been a better time to work in this field thanks to well thought-out and free tools like HTML5 Boilerplate.
Want to learn more?
Check out this is a video where Paul Irish walks through the entire Boilerplate template and is a great resource.
or
Adobe Labs is currently previewing their latest animation tool-Adobe Edge, which you will be able to use to create animations destined for screens of all sizes. By using the latest web standards, such as HTML/HTML 5, CSS 3, and JavaScript, animators will be able to use Edge to create motion content with its easy to use, timeline-based interface. Edge will allow you to create compositions from scratch, or to import and animate existing web graphics (bitmap or SVG) and CSS-based HTML layouts.
Here’s an introduction to Adobe Edge from Doug Winnie:
Stay tuned, as an early preview release should be available soon. (July-ish)
Follow Us!