2010-06-28 09:12:45 +03:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" / >
< title > Skins | HTML5 Video Player | Video JS< / title >
< meta name = "google-site-verification" content = "QHf9MEYVlEWoNHbzTeUkSQsbRT5Twzqu6N0nX1i3nes" / >
< script src = "video-js/video.js" type = "text/javascript" charset = "utf-8" > < / script >
<!-- JQuery not required, but used for dom ready function -->
< script src = "javascripts/jquery-1.4.2.min.js" type = "text/javascript" charset = "utf-8" > < / script >
< link rel = "stylesheet" href = "stylesheets/base.css" type = "text/css" media = "all" charset = "utf-8" / >
< link rel = "stylesheet" href = "video-js/video-js.css" type = "text/css" media = "all" charset = "utf-8" / >
< link rel = "stylesheet" href = "stylesheets/site.css" type = "text/css" media = "all" charset = "utf-8" / >
< link rel = "stylesheet" href = "video-js/skins/tube.css" type = "text/css" media = "screen" title = "Video JS" charset = "utf-8" >
< link rel = "stylesheet" href = "video-js/skins/vim.css" type = "text/css" media = "screen" title = "Video JS" charset = "utf-8" >
< link rel = "stylesheet" href = "video-js/skins/hu.css" type = "text/css" media = "screen" title = "Video JS" charset = "utf-8" >
<!-- [if !IE 7]>
< style type = "text/css" >
#wrap {display:table;height:100%}
< / style >
<![endif]-->
< script type = "text/javascript" charset = "utf-8" >
// Using JQuery's DOM Ready function
// You can also use window.onload, but it loads slower
$(function(){
VideoJS.setup();
})
// If not using a JS library
// window.onload = function(){
// VideoJS.setup();
// }
< / script >
< / head >
< body >
< div id = "wrap" >
< div id = "main" >
< ul id = "nav" >
< li > < a href = "http://videojs.com/skins.html" > Skins< / a > < / li >
< li > < a href = "http://github.com/zencoder/video-js" > Source< / a > < / li >
< li > < a href = "http://wiki.github.com/zencoder/video-js/browser-device-compatibility" > Compatibility< / a > < / li >
< li > < a href = "http://github.com/zencoder/video-js/issues" > Issue Tracker< / a > < / li >
< li > < a href = "http://wiki.github.com/zencoder/video-js/" > Wiki< / a > < / li >
< / ul >
< h1 > Video JS Skins< / h1 >
< p class = "tagline" > Replicas of some well known skins using just CSS< / p >
< p > These skins were created to show how you can re-skin VideoJS using just CSS. To use these skins, download the CSS file and include in the same document as VideoJS. Then add the skin's classname to the video-js-box.< / p >
< p > < div class="video-js-box vim-css"> < / p >
< h2 > The Original< / h2 >
< div class = "video-js-box" >
2010-07-20 20:34:45 +03:00
< video class = "video-js" width = "640" height = "264" poster = "http://video-js.zencoder.com/oceans-clip.png" controls preload >
2010-06-28 09:12:45 +03:00
< source src = "http://video-js.zencoder.com/oceans-clip.mp4" type = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"' >
< source src = "http://video-js.zencoder.com/oceans-clip.webm" type = 'video/webm; codecs="vp8, vorbis"' >
< source src = "http://video-js.zencoder.com/oceans-clip.ogg" type = 'video/ogg; codecs="theora, vorbis"' >
< p > You need an HTML5 video compatible browser to view these skins.< / p >
< / video >
< / div >
< p > No additional files needed.< / p >
< h2 > VimCSS< / h2 >
< div class = "video-js-box vim-css" >
2010-07-20 20:34:45 +03:00
< video class = "video-js" width = "640" height = "264" poster = "http://video-js.zencoder.com/oceans-clip.png" controls preload >
2010-06-28 09:12:45 +03:00
< source src = "http://video-js.zencoder.com/oceans-clip.mp4" type = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"' >
< source src = "http://video-js.zencoder.com/oceans-clip.webm" type = 'video/webm; codecs="vp8, vorbis"' >
< source src = "http://video-js.zencoder.com/oceans-clip.ogg" type = 'video/ogg; codecs="theora, vorbis"' >
< / video >
< / div >
< p > Download < a href = "video-js/skins/vim.css" > VimCSS< / a > . Add the class "vim-css".< / p >
< h2 > HuCSS< / h2 >
<!-- Begin VideoJS -->
< div class = "video-js-box hu-css" >
2010-07-20 20:34:45 +03:00
< video class = "video-js" width = "640" height = "264" poster = "http://video-js.zencoder.com/oceans-clip.png" controls preload >
2010-06-28 09:12:45 +03:00
< source src = "http://video-js.zencoder.com/oceans-clip.mp4" type = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"' >
< source src = "http://video-js.zencoder.com/oceans-clip.webm" type = 'video/webm; codecs="vp8, vorbis"' >
< source src = "http://video-js.zencoder.com/oceans-clip.ogg" type = 'video/ogg; codecs="theora, vorbis"' >
< / video >
< / div >
< p > Download < a href = "video-js/skins/hu.css" > HuCSS< / a > . Add the class "hu-css".< / p >
< h2 > TubeCSS< / h2 >
< div class = "video-js-box tube-css" >
2010-07-20 20:34:45 +03:00
< video class = "video-js" width = "640" height = "264" poster = "http://video-js.zencoder.com/oceans-clip.png" controls preload >
2010-06-28 09:12:45 +03:00
< source src = "http://video-js.zencoder.com/oceans-clip.mp4" type = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"' >
< source src = "http://video-js.zencoder.com/oceans-clip.webm" type = 'video/webm; codecs="vp8, vorbis"' >
< source src = "http://video-js.zencoder.com/oceans-clip.ogg" type = 'video/ogg; codecs="theora, vorbis"' >
< / video >
< / div >
< p > Download < a href = "video-js/skins/tube.css" > TubeCSS< / a > . Add the class "tube-css".< / p >
< / div >
2010-06-28 22:29:28 +03:00
2010-06-28 09:12:45 +03:00
< div id = "footer" >
© < a href = "http://videojs.com" > The Video JS Project< / a > . Sponsored by < a href = "http://zencoder.com" > Zencoder< / a > .
< / div >
< / div >
< script type = "text/javascript" >
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-16505296-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
< / script >
2010-06-27 07:20:04 +03:00
< / body >
< / html >
