web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-03-17 21:18:27 +02:00
Code Releases Activity

Changed order of sources. Updated styles.

Browse Source
This commit is contained in:
Steve Heffernan 2010-05-18 17:53:58 -07:00
parent b319c532bf
commit 67ddefec1e
3 changed files with 8 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
demo.html
View File

@ -1,34 +0,0 @@
<!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>

3
index.html
View File

@ -40,8 +40,8 @@
<!-- 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>
<source src="http://video-js.s3.amazonaws.com/oceans-clip.ogg" type="video/ogg"></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" />
@ -68,6 +68,7 @@
<li>Consistent look between browsers</li>
<li>Full Window Mode</li>
<li>Volume Control</li>
<li>Fallback to <a href="http://flowplayer.org/">Flowplayer</a></li>
<li></li>
</ul>
</div>

9
video-js/video-js.css
View File

@ -1,4 +1,3 @@
.video-box { text-align: left; position: relative; }
.video-js { background-color: #000; }
@ -20,14 +19,18 @@
/* 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-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 #112129; }
.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-play-progress { position: absolute; display: block; width: 0px; height: 9px; background: #fff;
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#777));
background: -moz-linear-gradient(top, #fff, #777);
}
.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; }