Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
482 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Original file line | Diff line number | Diff line change |
---|---|---|---|
@@ -0,0 +1,33 @@ | |||
// jresig's Class implementation | |||
(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; | |||
}; | |||
})(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Original file line | Diff line number | Diff line change |
---|---|---|---|
@@ -0,0 +1,27 @@ | |||
<!DOCTYPE html> | |||
<html> | |||
<head> | |||
<meta charset="utf-8" /> | |||
<title>HTML5 Video Player</title> | |||
<link rel="stylesheet" href="video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8"> | |||
<script src="video.js" type="text/javascript" charset="utf-8"></script> | |||
<script type="text/javascript" charset="utf-8"> | |||
|
|||
var bodyLoaded = function(){ | |||
videoPlayer = videoJSPlayers[0] = new VideoJS(document.getElementById("video"), 0); | |||
} | |||
|
|||
</script> | |||
</head> | |||
<body id="body" onload="bodyLoaded();"> | |||
|
|||
<div class="video-box"> | |||
<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> | |||
<p>Sorry, this web browser does not support the video tag. For a video tag/embed code that will fall back to Quicktime and Flash see <a href="http://camendesign.com/code/video_for_everybody">Video for Everybody</a>.<br><br></p> | |||
</video> | |||
</div> | |||
|
|||
</body> | |||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Original file line | Diff line number | Diff line change |
---|---|---|---|
@@ -0,0 +1,44 @@ | |||
body { background-color: #222; color: #fff; } | |||
.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; background-color: #001E25; text-align: center; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } | |||
.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 #001E25; border-left: 10px solid #fff; border-bottom: 5px solid #001E25; } | |||
.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: #001E25; 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 #001E25; } | |||
.vjs-fullscreen-control ul li:nth-child(2) { border: none; border-top: 6px solid #fff; border-left: 6px solid #001E25; } | |||
.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 #001E25; } | |||
.vjs-fullscreen-control ul li:nth-child(4) { border: none; border-bottom: 6px solid #fff; border-left: 6px solid #001E25; } | |||
.vjs-fullscreen-control.vjs-fs-active ul li:nth-child(1) { border: none; border-bottom: 6px solid #fff; border-left: 6px solid #001E25; } | |||
.vjs-fullscreen-control.vjs-fs-active ul li:nth-child(2) { border: none; border-bottom: 6px solid #fff; border-right: 6px solid #001E25; } | |||
.vjs-fullscreen-control.vjs-fs-active ul li:nth-child(3) { border: none; border-top: 6px solid #fff; border-left: 6px solid #001E25; } | |||
.vjs-fullscreen-control.vjs-fs-active ul li:nth-child(4) { border: none; border-top: 6px solid #fff; border-right: 6px solid #001E25; } |
Oops, something went wrong.