mirror of
https://github.com/videojs/video.js.git
synced 2024-12-23 02:04:34 +02:00
126 lines
5.7 KiB
HTML
126 lines
5.7 KiB
HTML
<!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">
|
|
<video class="video-js" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" controls preload>
|
|
<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">
|
|
<video class="video-js" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" controls preload>
|
|
<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">
|
|
<video class="video-js" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" controls preload>
|
|
<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">
|
|
<video class="video-js" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" controls preload>
|
|
<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>
|
|
|
|
|
|
<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>
|
|
|
|
</body>
|
|
</html> |