mirror of
https://github.com/videojs/video.js.git
synced 2024-12-23 02:04:34 +02:00
Created site.
This commit is contained in:
Steve Heffernan
parent
4f14efb288
commit
368aab9d74
34
demo.html
Normal file
34
demo.html
Normal file
@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>HTML5 Video Player</title>
|
||||
<script src="video.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
|
||||
var bodyLoaded = function(){
|
||||
VideoJS.setup();
|
||||
}
|
||||
|
||||
</script>
|
||||
<link rel="stylesheet" href="video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">
|
||||
</head>
|
||||
<body id="body" onload="bodyLoaded()">
|
||||
|
||||
<div class="video-box">
|
||||
<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
|
||||
<video id="video" class="video-js" width="640" height="360" poster="http://zencoder-demo.s3.amazonaws.com/poster.jpg" autobuffer>
|
||||
<source src="http://zencoder-demo.s3.amazonaws.com/trailer_test.mp4" type="video/mp4"></source>
|
||||
<source src="http://zencoder-demo.s3.amazonaws.com/trailer_test.ogg" type="video/ogg"></source>
|
||||
<object width="640" height="360" type="application/x-shockwave-flash"
|
||||
data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
|
||||
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
|
||||
<param name="allowfullscreen" value="true" />
|
||||
<param name="flashvars" value='config={"clip":"http://zencoder-demo.s3.amazonaws.com/trailer_test.mp4"}' />
|
||||
<img src="http://zencoder-demo.s3.amazonaws.com/poster.jpg" width="640" height="360" alt="Poster Image" title="No video playback capabilities." />
|
||||
</object>
|
||||
</video>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
BIN
images/background-highlights.png
Normal file
BIN
images/background-highlights.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
BIN
images/background.png
Normal file
BIN
images/background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 689 B |
BIN
images/footer.png
Normal file
BIN
images/footer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
BIN
images/icons/check.png
Normal file
BIN
images/icons/check.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
images/icons/chrome.png
Normal file
BIN
images/icons/chrome.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
BIN
images/icons/firefox.png
Normal file
BIN
images/icons/firefox.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
images/icons/h264.png
Normal file
BIN
images/icons/h264.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
BIN
images/icons/ie.png
Normal file
BIN
images/icons/ie.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
BIN
images/icons/ipad.png
Normal file
BIN
images/icons/ipad.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
images/icons/iphone.png
Normal file
BIN
images/icons/iphone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
images/icons/ogg.png
Normal file
BIN
images/icons/ogg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
images/icons/opera.png
Normal file
BIN
images/icons/opera.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
images/icons/safari.png
Normal file
BIN
images/icons/safari.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
BIN
images/icons/tar.png
Normal file
BIN
images/icons/tar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
images/icons/webm.png
Normal file
BIN
images/icons/webm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
images/icons/zip.png
Normal file
BIN
images/icons/zip.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
173
index.html
173
index.html
@ -1,40 +1,129 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta charset="utf-8" />
|
||||
<title>Video JS | HTML5 Video Player</title>
|
||||
<script src="video-js/video.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
|
||||
<title>zencoder/video-js @ GitHub</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin-top: 1.0em;
|
||||
background-color: #920e14;
|
||||
font-family: "Helvetica,Arial,FreeSans";
|
||||
color: #ffffff;
|
||||
var bodyLoaded = function(){
|
||||
VideoJS.setup();
|
||||
}
|
||||
#container {
|
||||
margin: 0 auto;
|
||||
width: 700px;
|
||||
}
|
||||
h1 { font-size: 3.8em; color: #6df1eb; margin-bottom: 3px; }
|
||||
h1 .small { font-size: 0.4em; }
|
||||
h1 a { text-decoration: none }
|
||||
h2 { font-size: 1.5em; color: #6df1eb; }
|
||||
h3 { text-align: center; color: #6df1eb; }
|
||||
a { color: #6df1eb; }
|
||||
.description { font-size: 1.2em; margin-bottom: 30px; margin-top: 30px; font-style: italic;}
|
||||
.download { float: right; }
|
||||
pre { background: #000; color: #fff; padding: 15px;}
|
||||
hr { border: 0; width: 80%; border-bottom: 1px solid #aaa}
|
||||
.footer { text-align:center; padding-top:30px; font-style: italic; }
|
||||
</style>
|
||||
|
||||
|
||||
</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" />
|
||||
|
||||
<!--[if !IE 7]>
|
||||
<style type="text/css">
|
||||
#wrap {display:table;height:100%}
|
||||
</style>
|
||||
<![endif]-->
|
||||
|
||||
</head>
|
||||
<body onload="bodyLoaded()">
|
||||
|
||||
<body>
|
||||
<a href="http://github.com/zencoder/video-js"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
|
||||
<div id="wrap">
|
||||
<div id="main">
|
||||
|
||||
<ul id="nav">
|
||||
<li><a href="http://github.com/zencoder/video-js">Source</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</h1>
|
||||
<p class="tagline">Open Source HTML5 Video Player</p>
|
||||
|
||||
<div class="video-box">
|
||||
<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
|
||||
<video id="video" class="video-js" width="640" height="264" poster="http://zencoder-demo.s3.amazonaws.com/poster.jpg" autobuffer>
|
||||
<source src="http://video-js.s3.amazonaws.com/oceans-clip.mp4" type="video/mp4"></source>
|
||||
<source src="http://video-js.s3.amazonaws.com/oceans-clip.ogg" type="video/ogg"></source>
|
||||
<source src="http://video-js.s3.amazonaws.com/oceans-clip.webm" type="video/webm"></source>
|
||||
<object width="640" height="264" type="application/x-shockwave-flash"
|
||||
data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
|
||||
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
|
||||
<param name="allowfullscreen" value="true" />
|
||||
<param name="flashvars" value='config={"clip":"http://video-js.s3.amazonaws.com/oceans-clip.mp4"}' />
|
||||
<img src="http://zencoder-demo.s3.amazonaws.com/poster.jpg" width="640" height="264" alt="Poster Image" title="No video playback capabilities." />
|
||||
</object>
|
||||
</video>
|
||||
</div>
|
||||
<p id="video_note">Video clip is from <a href="http://disney.go.com/disneynature/oceans/" title="Oceans">Disney’s Oceans</a></p>
|
||||
|
||||
<p>Video JS is a javascript-based video player that uses the HTML5 video functionality built into advanced browsers. In general, the benefit of using and HTML5 player is a consisten look between browsers.</p>
|
||||
|
||||
|
||||
<div id="features_and_support">
|
||||
<div id="features">
|
||||
<h6>Features</h6>
|
||||
<ul id="feature_list">
|
||||
<li>Free & Open Source</li>
|
||||
<li>Lightweight. <strong>NO IMAGES USED</strong></li>
|
||||
<li>100% skinnable using CSS</li>
|
||||
<li>Library independant</li>
|
||||
<li>Easy to use</li>
|
||||
<li>Easy to understand & extend</li>
|
||||
<li>Consistent look between browsers</li>
|
||||
<li>Full Window Mode</li>
|
||||
<li>Volume Control</li>
|
||||
<li></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="supported" class="clearfix">
|
||||
<h6>Download</h6>
|
||||
<div class="supported-section">
|
||||
<a href="http://github.com/zencoder/video-js/zipball/master" title="Zip Download"><img src="images/icons/zip.png" alt="Zip Download"></a>
|
||||
<a href="http://github.com/zencoder/video-js/tarball/master" title="Tar Download"><img src="images/icons/tar.png" alt="Tar Download"></a>
|
||||
</div>
|
||||
<h6>Supported Browsers</h6>
|
||||
<div class="supported-section">
|
||||
<a href="http://www.mozilla.com/en-US/firefox/firefox.html" title="Firefox"><img src="images/icons/firefox.png" alt="Firefox"></a>
|
||||
<a href="http://www.apple.com/safari/" title="Safari"><img src="images/icons/safari.png" alt="Safari"></a>
|
||||
<a href="http://www.google.com/chrome" title="Chrome"><img src="images/icons/chrome.png" alt="Chrome"></a>
|
||||
</div>
|
||||
<h6>Fallback Support For</h6>
|
||||
<div class="supported-section">
|
||||
<a href="http://www.microsoft.com/windows/Internet-explorer/default.aspx" title="IE"><img src="images/icons/ie.png" alt="IE"></a>
|
||||
<a href="http://www.opera.com/" title="Opera"><img src="images/icons/opera.png" alt="Opera"></a>
|
||||
</div>
|
||||
<h6>Supported Formats</h6>
|
||||
<div class="supported-section">
|
||||
<a href="http://en.wikipedia.org/wiki/H.264/MPEG-4_AVC" title="h264"><img src="images/icons/h264.png" alt="h264"></a>
|
||||
<a href="http://www.theora.org/" title="Ogg"><img src="images/icons/ogg.png" alt="Ogg"></a>
|
||||
<a href="http://www.webmproject.org/" title="WebM"><img src="images/icons/webm.png" alt="WebM"></a>
|
||||
</div>
|
||||
<h6>Compatible With</h6>
|
||||
<div class="supported-section">
|
||||
<a href="http://www.apple.com/iphone/" title="iPhone"><img src="images/icons/iphone.png" alt="iPhone"></a>
|
||||
<a href="http://www.apple.com/ipad/" title="iPad"><img src="images/icons/ipad.png" alt="iPad"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script type="text/javascript">
|
||||
/**
|
||||
* var disqus_identifier; [Optional but recommended: Define a unique identifier (e.g. post id or slug) for this thread]
|
||||
*/
|
||||
(function() {
|
||||
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
|
||||
dsq.src = 'http://videojs.disqus.com/embed.js';
|
||||
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
|
||||
})();
|
||||
</script>
|
||||
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript=videojs">comments powered by Disqus.</a></noscript>
|
||||
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer">
|
||||
Hosting & Repository supplied by Zencoder - <a href="http://zencoder.com">Video encoding for your app</a>.
|
||||
</div>
|
||||
</div>
|
||||
<!-- <a href="http://github.com/zencoder/video-js"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
|
||||
|
||||
<div id="container">
|
||||
|
||||
@ -52,8 +141,6 @@
|
||||
Universal video embed.
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<h2>Download</h2>
|
||||
<p>
|
||||
You can download this project in either
|
||||
@ -69,8 +156,22 @@
|
||||
get the source code on GitHub : <a href="http://github.com/zencoder/video-js">zencoder/video-js</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div> -->
|
||||
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
(function() {
|
||||
var links = document.getElementsByTagName('a');
|
||||
var query = '?';
|
||||
for(var i = 0; i < links.length; i++) {
|
||||
if(links[i].href.indexOf('#disqus_thread') >= 0) {
|
||||
query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
|
||||
}
|
||||
}
|
||||
document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/videojs/get_num_replies.js' + query + '"></' + 'script>');
|
||||
})();
|
||||
//]]>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
51
stylesheets/base.css
Normal file
51
stylesheets/base.css
Normal file
@ -0,0 +1,51 @@
|
||||
/* Reset - http://developer.yahoo.com/yui/3/cssreset/
|
||||
---------------------------------------------------------*/
|
||||
html{ color:#000; background:#FFF; }
|
||||
body { line-height: 1; }
|
||||
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,label,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
|
||||
table { border-collapse:collapse; border-spacing:0; }
|
||||
fieldset,img { border:0; }
|
||||
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
|
||||
li { list-style:none; }
|
||||
caption,th { text-align:left; }
|
||||
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
|
||||
q:before,q:after { content:''; }
|
||||
abbr,acronym { border:0; font-variant:normal; }
|
||||
sup { vertical-align:text-top; }
|
||||
sub { vertical-align:text-bottom; }
|
||||
input,textarea,select { font-family:inherit; font-size:inherit; font-weight:inherit; }
|
||||
input,textarea,select { *font-size:100%; }
|
||||
legend { color:#000; }
|
||||
|
||||
/* Base - http://developer.yahoo.com/yui/3/cssbase/
|
||||
---------------------------------------------------------*/
|
||||
h1 { font-size:138.5%; }
|
||||
h2 { font-size:123.1%; }
|
||||
h3 { font-size:108%; }
|
||||
h1,h2,h3 { margin:0 0 1em; }
|
||||
h1,h2,h3,h4,h5,h6,strong { font-weight:bold; }
|
||||
abbr,acronym { border-bottom:1px dotted #000; cursor:help; }
|
||||
em { font-style:italic; }
|
||||
blockquote,ul,ol,dl { margin-bottom:1em; }
|
||||
ol,ul,dl { margin-left:2em; }
|
||||
ol li { list-style:decimal outside; }
|
||||
ul li { list-style:disc outside; }
|
||||
dl dd { margin-left:1em; }
|
||||
th,td { border:1px solid #000; padding: 0; }
|
||||
th { font-weight:bold; text-align:center; }
|
||||
caption { margin-bottom:.5em; text-align:center; }
|
||||
p,fieldset,table,pre { margin-bottom:1em; }
|
||||
input[type=text],input[type=password],textarea { width:12.25em; *width:11.9em; background-color: #fff; }
|
||||
|
||||
/* Fonts - http://developer.yahoo.com/yui/3/cssfonts/
|
||||
---------------------------------------------------------*/
|
||||
html { font:13px/1.231 arial,helvetica,clean,sans-serif; *font-size:small; *font:x-small; }
|
||||
select,input,button,textarea { font:119% arial,helvetica,clean,sans-serif; }
|
||||
table { font-size:inherit; font:100%; }
|
||||
pre,code,kbd,samp,tt { font-family:monospace; *font-size:108%; line-height:100%; }
|
||||
|
||||
/* Clear Fix - http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
|
||||
---------------------------------------------------------*/
|
||||
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
|
||||
* html .clearfix { zoom: 1; } /* IE6 */
|
||||
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
|
||||
31
stylesheets/site.css
Normal file
31
stylesheets/site.css
Normal file
@ -0,0 +1,31 @@
|
||||
html { background: #152B38 url('../images/background.png') top left repeat-x; }
|
||||
body { font-size: 10px; line-height: 1; color: #fff; text-align: center; }
|
||||
#wrap { background: url("../images/background-highlights.png") center 20px no-repeat; }
|
||||
#main { position: relative; width: 640px; margin: 0px auto; text-align: left; padding-bottom: 20px; }
|
||||
h1 { font-size: 360%; line-height: 1; margin-bottom: 10px; text-align: center; letter-spacing: 5px; }
|
||||
h6 { font-size: 100%; text-transform: uppercase; margin-bottom: 10px; color: #999; }
|
||||
p.tagline { text-align: center; font-size: 120%; line-height: 1; }
|
||||
|
||||
p { font-size: 1.4em; line-height: 1.5; margin-bottom: 20px; }
|
||||
a { color: #fff; }
|
||||
a img { border: 0; }
|
||||
|
||||
ul#nav { list-style: none; margin: 0; padding: 0; height: 20px; text-align: right; margin-bottom: 20px; }
|
||||
ul#nav li { display: inline; list-style: none; margin: 0; padding: 0; padding-left: 20px; font-size: 120%; line-height: 20px; }
|
||||
ul#nav li a { color: #fff; text-decoration: none; }
|
||||
|
||||
.video-box { margin-bottom: 0; background-color: #000; }
|
||||
p#video_note { margin-bottom: 20px; font-size: 100%; line-height: 20px; color: #999; text-align: center; }
|
||||
|
||||
#features { width: 300px; float: left; }
|
||||
ul#feature_list { display: block; margin: 0; padding: 0; }
|
||||
ul#feature_list li { list-style: none; padding-left: 25px; font-size: 140%; line-height: 20px; margin-bottom: 25px; background: url("../images/icons/check.png") left top no-repeat; }
|
||||
|
||||
#supported { float: right; width: 320px; }
|
||||
.supported-section { margin-bottom: 20px; }
|
||||
.supported-section a { padding-right: 10px; }
|
||||
.supported-section a:last-child { padding-right: 0; }
|
||||
|
||||
#disqus_thread { clear: both; }
|
||||
|
||||
#footer { clear: both; }
|
||||
54
video-js/video-js.css
Normal file
54
video-js/video-js.css
Normal file
@ -0,0 +1,54 @@
|
||||
|
||||
.video-box { text-align: left; position: relative; }
|
||||
.video-js { background-color: #000; }
|
||||
|
||||
/* General controls styles */
|
||||
.vjs-controls { display: none; list-style: none; margin: 0; padding: 0; position: absolute; height: 30px; opacity: 0.85; color: #fff; }
|
||||
.vjs-controls > li { list-style: none; float: left; height: 25px; width: 25px; margin: 0 5px 0 0; padding: 0; text-align: center;
|
||||
background-color: #0B151A; border-radius: 5px; box-shadow: 0px 2px 2px #000;
|
||||
/* Webkit */
|
||||
-webkit-border-radius: 5px;
|
||||
background: #1F3744 -webkit-gradient(linear, left top, left bottom, from(#0B151A), to(#1F3744)) left 12px;
|
||||
-webkit-box-shadow: 0px 1px 3px #000;
|
||||
/* Firefox */
|
||||
-moz-border-radius: 5px;
|
||||
background: #1F3744 -moz-linear-gradient(top, #0B151A, #1F3744) left 12px;
|
||||
-moz-box-shadow: 0px 1px 3px #000;
|
||||
}
|
||||
.vjs-controls > li:last-child { margin-right: 0; }
|
||||
.vjs-controls > li:first-child { margin-left: 5px; }
|
||||
|
||||
/* Play/Pause */
|
||||
.vjs-play-control span { display: block; font-size: 0px; line-height: 0; text-decoration: none; }
|
||||
.vjs-play-control.vjs-play span { width: 0; height: 0; margin: 8px 0 0 8px; border-top: 5px solid #273F3E; border-left: 10px solid #fff; border-bottom: 5px solid #273F3E; }
|
||||
.vjs-play-control.vjs-pause span { width: 3px; height: 10px; margin: 8px auto 0; border-top: 0px; border-left: 3px solid #fff; border-bottom: 0px; border-right: 3px solid #fff; }
|
||||
|
||||
/* Progress */
|
||||
.vjs-progress-control { width: 190px; }
|
||||
.vjs-progress-control ul { list-style: none; margin: 0; padding: 0; }
|
||||
.vjs-progress-control .vjs-progress-holder { list-style: none; position: relative; float: left; width: 100px; height: 9px; border: 1px solid #777; margin: 7px 0 0 5px; padding: 0; background-color: #112129; overflow:hidden; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
|
||||
.vjs-progress-control .vjs-play-progress { position: absolute; display: block; width: 0px; height: 9px; background-color: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
|
||||
.vjs-progress-control .vjs-load-progress { position: absolute; display: block; width: 0px; height: 9px; background-color: #777; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
|
||||
.vjs-progress-control .vjs-progress-time { list-style: none; float: left; margin: 7px 0 0 5px; padding: 0; font-size: 10px; line-height: 1; font-weight: normal; font-family: Helvetica, Arial, sans-serif; }
|
||||
|
||||
/* Volume */
|
||||
.vjs-volume-control { width: 50px !important; }
|
||||
.vjs-volume-control ul { display: block; margin: 0; padding: 4px 0 0 5px; list-style: none; }
|
||||
.vjs-volume-control ul li { float: left; margin: 0; padding: 0; list-style: none; width: 5px; margin-right: 2px; height: 0px; border-bottom: 18px solid #555; }
|
||||
.vjs-volume-control ul li:nth-child(1) { border-bottom-width: 2px; height: 16px; }
|
||||
.vjs-volume-control ul li:nth-child(2) { border-bottom-width: 4px; height: 14px; }
|
||||
.vjs-volume-control ul li:nth-child(3) { border-bottom-width: 7px; height: 11px; }
|
||||
.vjs-volume-control ul li:nth-child(4) { border-bottom-width: 10px; height: 8px; }
|
||||
.vjs-volume-control ul li:nth-child(5) { border-bottom-width: 14px; height: 4px; }
|
||||
|
||||
/* Fullscreen */
|
||||
.vjs-fullscreen-control ul { list-style: none; margin: 5px 0 0 5px; padding: 0; width: 20px; height: 20px; text-align: left; vertical-align: top; }
|
||||
.vjs-fullscreen-control ul li { list-style: none; float: left; margin: 0; padding: 0; font-size: 0; line-height: 0; width: 0; text-align: left; vertical-align: top; }
|
||||
.vjs-fullscreen-control ul li:nth-child(1) { margin: 0 3px 3px 0; border: none; border-top: 6px solid #fff; border-right: 6px solid #273F3E; }
|
||||
.vjs-fullscreen-control ul li:nth-child(2) { border: none; border-top: 6px solid #fff; border-left: 6px solid #273F3E; }
|
||||
.vjs-fullscreen-control ul li:nth-child(3) { clear: both; margin: 0 3px 0 0; border: none; border-bottom: 6px solid #fff; border-right: 6px solid #112129; }
|
||||
.vjs-fullscreen-control ul li:nth-child(4) { border: none; border-bottom: 6px solid #fff; border-left: 6px solid #112129; }
|
||||
.vjs-fullscreen-control.vjs-fs-active ul li:nth-child(1) { border: none; border-bottom: 6px solid #fff; border-left: 6px solid #273F3E; }
|
||||
.vjs-fullscreen-control.vjs-fs-active ul li:nth-child(2) { border: none; border-bottom: 6px solid #fff; border-right: 6px solid #273F3E; }
|
||||
.vjs-fullscreen-control.vjs-fs-active ul li:nth-child(3) { border: none; border-top: 6px solid #fff; border-left: 6px solid #112129; }
|
||||
.vjs-fullscreen-control.vjs-fs-active ul li:nth-child(4) { border: none; border-top: 6px solid #fff; border-right: 6px solid #112129; }
|
||||
389
video-js/video.js
Normal file
389
video-js/video.js
Normal file
@ -0,0 +1,389 @@
|
||||
// Using jresig's Class implementation http://ejohn.org/blog/simple-javascript-inheritance/
|
||||
(function(){var initializing=false, fnTest=/xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/; this.Class = function(){}; Class.extend = function(prop) { var _super = this.prototype; initializing = true; var prototype = new this(); initializing = false; for (var name in prop) { prototype[name] = typeof prop[name] == "function" && typeof _super[name] == "function" && fnTest.test(prop[name]) ? (function(name, fn){ return function() { var tmp = this._super; this._super = _super[name]; var ret = fn.apply(this, arguments); this._super = tmp; return ret; }; })(name, prop[name]) : prop[name]; } function Class() { if ( !initializing && this.init ) this.init.apply(this, arguments); } Class.prototype = prototype; Class.constructor = Class; Class.extend = arguments.callee; return Class;};})();
|
||||
|
||||
// Store a list of players on the page for reference by event listeners
|
||||
var videoJSPlayers = new Array();
|
||||
|
||||
// Video JS Player Class
|
||||
var VideoJS = Class.extend({
|
||||
|
||||
// Initialize the player for the supplied video tag element
|
||||
// element: video tag
|
||||
// num: the current player's position in the videoJSPlayers array
|
||||
init: function(element, num){
|
||||
this.video = element;
|
||||
|
||||
// Default the player number to 0
|
||||
this.num = (num) ? num : 0;
|
||||
|
||||
this.buildController();
|
||||
this.showController(); // has to come before positioning
|
||||
this.positionController();
|
||||
|
||||
// Listen for clicks on the play/pause button
|
||||
this.playControl.addEventListener("click", this.onPlayControlClick, true);
|
||||
|
||||
// Listen for drags on the progress bar
|
||||
this.progressHolder.addEventListener("mousedown", this.onProgressHolderMouseDown, true);
|
||||
// Listen for a release on the progress bar
|
||||
this.progressHolder.addEventListener("mouseup", this.onProgressHolderMouseUp, true);
|
||||
|
||||
// Listen for a drag on the volume control
|
||||
this.volumeControl.addEventListener("mousedown", this.onVolumeControlMouseDown, true);
|
||||
// Listen for a release on the volume control
|
||||
this.volumeControl.addEventListener("mouseup", this.onVolumeControlMouseUp, true);
|
||||
// Set the display to the initial volume
|
||||
this.updateVolumeDisplay();
|
||||
|
||||
// Listen for clicks on the fullscreen button
|
||||
this.fullscreenControl.addEventListener("click", this.onFullscreenControlClick, true);
|
||||
},
|
||||
|
||||
buildController: function(){
|
||||
|
||||
/* Creating this HTML
|
||||
<ul class="vjs-controls">
|
||||
<li class="vjs-play-control vjs-play">
|
||||
<span></span>
|
||||
</li>
|
||||
<li class="vjs-progress-control">
|
||||
<ul>
|
||||
<li class="vjs-progress-holder">
|
||||
<span class="vjs-load-progress"></span><span class="vjs-play-progress"></span>
|
||||
</li>
|
||||
<li class="vjs-progress-time">
|
||||
<span class="vjs-current-time-display">00:00</span> / <span class="vjs-duration-display">00:00</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="vjs-volume-control">
|
||||
<ul>
|
||||
<li></li><li></li><li></li><li></li><li></li><li></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="vjs-fullscreen-control">
|
||||
<ul>
|
||||
<li></li><li></li><li></li><li></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
*/
|
||||
|
||||
// Create a list element to hold the different controls
|
||||
this.controls = document.createElement("ul");
|
||||
|
||||
// Add the controls to the video's container
|
||||
this.video.parentNode.appendChild(this.controls);
|
||||
this.controls.className = "vjs-controls";
|
||||
|
||||
// Store the current video player's number
|
||||
// For referencing in event listeners
|
||||
this.controls.setAttribute("data-video-js", this.num);
|
||||
|
||||
// Build the play control
|
||||
this.playControl = document.createElement("li");
|
||||
this.controls.appendChild(this.playControl);
|
||||
this.playControl.className = "vjs-play-control vjs-play";
|
||||
this.playControl.innerHTML = "<span></span>";
|
||||
|
||||
// Build the progress control
|
||||
this.progressControl = document.createElement("li");
|
||||
this.controls.appendChild(this.progressControl);
|
||||
this.progressControl.className = "vjs-progress-control";
|
||||
|
||||
// Create a list for the different progress elements
|
||||
this.progressList = document.createElement("ul");
|
||||
this.progressControl.appendChild(this.progressList);
|
||||
|
||||
// Create a holder for the progress bars
|
||||
this.progressHolder = document.createElement("li");
|
||||
this.progressList.appendChild(this.progressHolder);
|
||||
this.progressHolder.className = "vjs-progress-holder";
|
||||
|
||||
// Create the loading progress display
|
||||
this.loadProgress = document.createElement("span");
|
||||
this.progressHolder.appendChild(this.loadProgress)
|
||||
this.loadProgress.className = "vjs-load-progress";
|
||||
|
||||
// Create the playing progress display
|
||||
this.playProgress = document.createElement("span");
|
||||
this.progressHolder.appendChild(this.playProgress);
|
||||
this.playProgress.className = "vjs-play-progress";
|
||||
|
||||
// Create the progress time display (00:00 / 00:00)
|
||||
this.progressTime = document.createElement("li");
|
||||
this.progressList.appendChild(this.progressTime);
|
||||
this.progressTime.className = "vjs-progress-time";
|
||||
|
||||
// Create the current play time display
|
||||
this.currentTimeDisplay = document.createElement("span");
|
||||
this.progressTime.appendChild(this.currentTimeDisplay);
|
||||
this.currentTimeDisplay.className = "vjs-current-time-display";
|
||||
this.currentTimeDisplay.innerHTML = '00:00';
|
||||
|
||||
// Adding a slash for visual separation
|
||||
this.progressTime.innerHTML += " / ";
|
||||
|
||||
// Create the total duration display
|
||||
this.durationDisplay = document.createElement("span");
|
||||
this.progressTime.appendChild(this.durationDisplay);
|
||||
this.durationDisplay.className = "vjs-duration-display";
|
||||
this.durationDisplay.innerHTML = '00:00';
|
||||
|
||||
// Create the volumne control
|
||||
this.volumeControl = document.createElement("li");
|
||||
this.controls.appendChild(this.volumeControl);
|
||||
this.volumeControl.className = "vjs-volume-control";
|
||||
this.volumeControl.innerHTML = "<ul><li></li><li></li><li></li><li></li><li></li><li></li></ul>";
|
||||
this.volumeDisplay = this.volumeControl.children[0]
|
||||
|
||||
// Crete the fullscreen control
|
||||
this.fullscreenControl = document.createElement("li");
|
||||
this.controls.appendChild(this.fullscreenControl);
|
||||
this.fullscreenControl.className = "vjs-fullscreen-control";
|
||||
this.fullscreenControl.innerHTML = "<ul><li></li><li></li><li></li><li></li></ul>";
|
||||
},
|
||||
|
||||
// Show the controller
|
||||
showController: function(){
|
||||
this.controls.style.display = "block";
|
||||
},
|
||||
|
||||
// Place controller relative to the video's position
|
||||
positionController: function(){
|
||||
this.controls.style.top = (this.video.offsetHeight - this.controls.offsetHeight) + "px";
|
||||
this.controls.style.left = "0px";
|
||||
this.controls.style.width = this.video.offsetWidth + "px";
|
||||
this.sizeProgressBar();
|
||||
},
|
||||
|
||||
// Hide the controller
|
||||
hideController: function(){
|
||||
this.controls.style.display = "none";
|
||||
},
|
||||
|
||||
// React to clicks on the play/pause button
|
||||
onPlayControlClick: function(e){
|
||||
var player = videoJSPlayers[this.parentNode.getAttribute("data-video-js")];
|
||||
if (player.video.paused) {
|
||||
player.playVideo();
|
||||
} else {
|
||||
player.pauseVideo();
|
||||
}
|
||||
},
|
||||
|
||||
// Adjust the play position when the user drags on the progress bar
|
||||
onProgressHolderMouseDown: function(e){
|
||||
var player = videoJSPlayers[this.parentNode.parentNode.parentNode.getAttribute("data-video-js")];
|
||||
player.stopTrackingPlayProgress();
|
||||
|
||||
if (player.video.paused) {
|
||||
player.videoWasPlaying = false;
|
||||
} else {
|
||||
player.videoWasPlaying = true;
|
||||
player.video.pause();
|
||||
}
|
||||
|
||||
player.blockTextSelection();
|
||||
document.onmousemove = function(e) {
|
||||
player.setPlayProgress(e.pageX);
|
||||
}
|
||||
|
||||
document.onmouseup = function() {
|
||||
player.unblockTextSelection();
|
||||
document.onmousemove = null;
|
||||
document.onmouseup = null;
|
||||
if (player.videoWasPlaying) {
|
||||
player.video.play();
|
||||
player.trackPlayProgress();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// When the user stops dragging on the progress bar, update play position
|
||||
// Backup for when the user only clicks and doesn't drag
|
||||
onProgressHolderMouseUp: function(e){
|
||||
var player = videoJSPlayers[this.parentNode.parentNode.parentNode.getAttribute("data-video-js")];
|
||||
player.setPlayProgress(e.pageX);
|
||||
},
|
||||
|
||||
// Adjust the volume when the user drags on the volume control
|
||||
onVolumeControlMouseDown: function(e){
|
||||
var player = videoJSPlayers[this.parentNode.getAttribute("data-video-js")];
|
||||
player.blockTextSelection();
|
||||
document.onmousemove = function(e) {
|
||||
player.setVolume(e.pageX);
|
||||
}
|
||||
document.onmouseup = function() {
|
||||
player.unblockTextSelection();
|
||||
document.onmousemove = null;
|
||||
document.onmouseup = null;
|
||||
}
|
||||
},
|
||||
|
||||
// When the user stops dragging, set a new volume
|
||||
// Backup for when the user only clicks and doesn't drag
|
||||
onVolumeControlMouseUp: function(e){
|
||||
var player = videoJSPlayers[this.parentNode.getAttribute("data-video-js")];
|
||||
player.setVolume(e.pageX);
|
||||
},
|
||||
|
||||
// When the user clicks on the fullscreen button, update fullscreen setting
|
||||
onFullscreenControlClick: function(e){
|
||||
var player = videoJSPlayers[this.parentNode.getAttribute("data-video-js")];
|
||||
if (!player.videoIsFullScreen) {
|
||||
player.fullscreenOn();
|
||||
} else {
|
||||
player.fullscreenOff();
|
||||
}
|
||||
},
|
||||
|
||||
// Play the video
|
||||
playVideo: function(){
|
||||
this.video.play();
|
||||
this.playControl.className = "vjs-play-control vjs-pause";
|
||||
this.trackPlayProgress();
|
||||
},
|
||||
|
||||
// Pause the video
|
||||
pauseVideo: function(){
|
||||
this.video.pause();
|
||||
this.playControl.className = "vjs-play-control vjs-play";
|
||||
this.stopTrackingPlayProgress();
|
||||
},
|
||||
|
||||
// Adjust the width of the progress bar to fill the controls width
|
||||
sizeProgressBar: function(){
|
||||
this.progressControl.style.width = (this.controls.offsetWidth - 125) + "px";
|
||||
this.progressHolder.style.width = (this.progressControl.offsetWidth - 80) + "px";
|
||||
this.updatePlayProgress();
|
||||
},
|
||||
|
||||
// Track & display the current play progress
|
||||
trackPlayProgress: function(){
|
||||
context = this;
|
||||
this.playProgressInterval = setInterval(function(){ context.updatePlayProgress(); }, 33);
|
||||
},
|
||||
|
||||
// Turn off play progress tracking (when paused)
|
||||
stopTrackingPlayProgress: function(){
|
||||
clearInterval(this.playProgressInterval);
|
||||
},
|
||||
|
||||
// Ajust the play progress bar's width based on the current play time
|
||||
updatePlayProgress: function(){
|
||||
this.playProgress.style.width = ((this.video.currentTime / this.video.duration) * (this.progressHolder.offsetWidth - 2)) + "px";
|
||||
this.updateTimeDisplay();
|
||||
},
|
||||
|
||||
// Update the play position based on where the user clicked on the progresss bar
|
||||
setPlayProgress: function(clickX) {
|
||||
var newPercent = Math.max(0, Math.min(1, (clickX - this.findPosX(this.progressHolder)) / this.progressHolder.offsetWidth));
|
||||
this.video.currentTime = newPercent * this.video.duration
|
||||
this.playProgress.style.width = newPercent * (this.progressHolder.offsetWidth - 2) + "px";
|
||||
this.updateTimeDisplay();
|
||||
},
|
||||
|
||||
// Update the displayed time (00:00)
|
||||
updateTimeDisplay: function(){
|
||||
this.currentTimeDisplay.innerHTML = this.formatTime(this.video.currentTime);
|
||||
if (this.video.duration) this.durationDisplay.innerHTML = this.formatTime(this.video.duration);
|
||||
},
|
||||
|
||||
// Set a new volume based on where the user clicked on the volume control
|
||||
setVolume: function(clickX) {
|
||||
var newVol = (clickX - this.findPosX(this.volumeControl)) / this.volumeControl.offsetWidth;
|
||||
if (newVol > 1) {
|
||||
newVol = 1;
|
||||
} else if (newVol < 0) {
|
||||
newVol = 0;
|
||||
}
|
||||
this.video.volume = newVol;
|
||||
this.updateVolumeDisplay();
|
||||
},
|
||||
|
||||
// Update the volume control display
|
||||
// Unique to these default controls. Uses borders to create the look of bars.
|
||||
updateVolumeDisplay: function(){
|
||||
var volNum = Math.floor(this.video.volume * 6);
|
||||
for(var i=0; i<6; i++) {
|
||||
if (i < volNum) {
|
||||
this.volumeDisplay.children[i].style.borderColor = "#fff";
|
||||
} else {
|
||||
this.volumeDisplay.children[i].style.borderColor = "#555";
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Turn on fullscreen (window) mode
|
||||
// Real fullscreen isn't available in browsers quite yet.
|
||||
fullscreenOn: function(){
|
||||
this.videoIsFullScreen = true;
|
||||
this.videoOrigWidth = this.video.offsetWidth;
|
||||
this.videoOrigHeight = this.video.offsetHeight;
|
||||
|
||||
this.video.style.width = window.innerWidth + "px";
|
||||
this.video.style.height = window.innerHeight + "px";
|
||||
this.video.style.position = "fixed";
|
||||
this.video.style.left = 0;
|
||||
this.video.style.top = 0;
|
||||
this.controls.style.position = "fixed";
|
||||
this.positionController();
|
||||
|
||||
this.fullscreenControl.className = "vjs-fullscreen-control vjs-fs-active";
|
||||
},
|
||||
|
||||
// Turn off fullscreen (window) mode
|
||||
fullscreenOff: function(){
|
||||
this.videoIsFullScreen = false;
|
||||
this.video.style.width = this.videoOrigWidth + "px";
|
||||
this.video.style.height = this.videoOrigHeight + "px";
|
||||
this.video.style.position = "static";
|
||||
this.controls.style.position = "absolute";
|
||||
this.positionController();
|
||||
this.fullscreenControl.className = "vjs-fullscreen-control";
|
||||
},
|
||||
|
||||
// Attempt to block the ability to select text while dragging controls
|
||||
blockTextSelection: function(){
|
||||
document.body.focus();
|
||||
document.onselectstart = function () { return false; };
|
||||
},
|
||||
|
||||
// Turn off text selection blocking
|
||||
unblockTextSelection: function(){
|
||||
document.onselectstart = function () { return true; };
|
||||
},
|
||||
|
||||
// Return seconds as MM:SS
|
||||
formatTime: function(seconds) {
|
||||
seconds = Math.round(seconds);
|
||||
minutes = Math.floor(seconds / 60);
|
||||
minutes = (minutes >= 10) ? minutes : "0" + minutes;
|
||||
seconds = Math.floor(seconds % 60);
|
||||
seconds = (seconds >= 10) ? seconds : "0" + seconds;
|
||||
return minutes + ":" + seconds;
|
||||
},
|
||||
|
||||
// Get an objects position on the page
|
||||
findPosX: function(obj) {
|
||||
var curleft = obj.offsetLeft;
|
||||
while(obj = obj.offsetParent) {
|
||||
curleft += obj.offsetLeft;
|
||||
}
|
||||
return curleft;
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
// Class Methods
|
||||
|
||||
// Add video-js to any video tag with the class
|
||||
VideoJS.setup = function(){
|
||||
var videoTags = document.getElementsByTagName("video");
|
||||
for (var i=0;i<videoTags.length;i++) {
|
||||
if (videoTags[i].className.indexOf("video-js") != -1) {
|
||||
videoJSPlayers[i] = new VideoJS(document.getElementById("video"), i);
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user