web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2024-11-24 08:42:25 +02:00
Code Releases Activity

Updated skins to work with new layout methods.

Browse Source
This commit is contained in:
Steve Heffernan 2010-11-11 18:35:19 -08:00
parent 31f6fcdbd6
commit 9fe4307dd3
6 changed files with 27 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
skins/hu.css
View File

@ -5,12 +5,12 @@ Version 1.2.0
.hu-css .vjs-controls {
height: 47px; opacity: 0.95; color: #fff;
padding-left: 84px; /* Width of play button + margin */
padding-right: 0px; /* Width of all the controls to the right of the progress control + margins */
background: #3A3835;
}
.hu-css.video-js-box.vjs-controls-below .vjs-controls { background: #3A3835; }
.hu-css .vjs-controls > div {
top: 0;
background: none;
border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;
box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;
@ -29,7 +29,7 @@ Version 1.2.0
/* Placement of Control Items */
.hu-css .vjs-controls > div.vjs-play-control { width: 33px; left: 0px; }
.hu-css .vjs-controls > div.vjs-progress-control { width: 100%; position: relative; }
.hu-css .vjs-controls > div.vjs-progress-control { width: left: 84px; right: 0; }
.hu-css .vjs-controls > div.vjs-time-control { width: 84px; left: 0px; }
.hu-css .vjs-controls > div.vjs-volume-control { width: 43px; right: 44px; }
.hu-css .vjs-controls > div.vjs-fullscreen-control { width: 43px; right: 0px; }

10
skins/tube.css
View File

@ -5,17 +5,15 @@ Version 1.2.0
.tube-css .vjs-controls {
opacity: 1; color: #000;
height: 25px;
padding-left: 102px; /* Width of play button + margin */
padding-right: 83px; /* Width of all the controls to the right of the progress control + margins */
height: 24px;
bottom: 0;
background-color: #ccc;
background: #fcfcfc -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#d0d0d0)) left top;
background: #fcfcfc -moz-linear-gradient(top, #fcfcfc, #d0d0d0) left top;
}
.tube-css .vjs-controls > div {
height: 23px; margin: 0; background: none;
height: 23px; margin: 0; background: none; top: 0;
border: 1px solid #b1b1b1; border-left-color: #eee;
border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;
box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;
@ -23,7 +21,7 @@ Version 1.2.0
/* Placement of Control Items */
.tube-css .vjs-controls > div.vjs-play-control { width: 25px; left: 0; }
.tube-css .vjs-controls > div.vjs-progress-control { width: 100%; position: relative; }
.tube-css .vjs-controls > div.vjs-progress-control { left: 102px; right: 83px; }
.tube-css .vjs-controls > div.vjs-time-control { width: 75px; left: 27px; }
.tube-css .vjs-controls > div.vjs-volume-control { width: 50px; right: 30px; }
.tube-css .vjs-controls > div.vjs-fullscreen-control { width: 30px; right: 0; }

10
skins/vim.css
View File

@ -4,25 +4,23 @@ Version 1.2.0
*/
.vim-css .vjs-controls {
height: 50px; opacity: 0.9; color: #fff;
padding-left: 85px; /* Width of play button + margin */
padding-right: 160px; /* Width of all the controls to the right of the progress control + margins */
height: 60px; opacity: 0.9; color: #fff;
}
.vim-css .vjs-controls > div {
height: 32px; width: 25px; margin: 8px 0 0 0; padding: 0; text-align: center; background: rgba(23, 35, 34, 0.746094);
height: 32px; top: 18px; padding: 0; text-align: center; background: rgba(23, 35, 34, 0.746094);
border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;
box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;
}
/* Placement of Control Items */
.vim-css .vjs-controls > div.vjs-play-control { width: 65px; left: 10px; }
.vim-css .vjs-controls > div.vjs-progress-control { width: 100%; position: relative; }
.vim-css .vjs-controls > div.vjs-progress-control { left: 85px; right: 160px; }
.vim-css .vjs-controls > div.vjs-time-control { width: 75px; right: 85px; }
.vim-css .vjs-controls > div.vjs-volume-control { width: 50px; right: 35px; }
.vim-css .vjs-controls > div.vjs-fullscreen-control { width: 25px; right: 10px; }
/* Play/Pause
-------------------------------------------------------------------------------- */
.vim-css .vjs-controls .vjs-play-control { margin: 0; height: 40px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
.vim-css .vjs-controls .vjs-play-control { top: 10px; margin: 0; height: 40px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
.vim-css .vjs-play-control:hover { background: #00ADEF; }
.vim-css.vjs-paused .vjs-play-control span { border-left-color: #fff; border-top-width: 9px; border-left-width: 18px; border-bottom-width: 9px; margin: 11px 0 0 24px; }
.vim-css.vjs-playing .vjs-play-control span { width: 5px; height: 18px; margin: 5px auto 0; border-left: 5px solid #fff; border-right: 5px solid #fff; margin: 11px 0 0 24px; }

2
test/test.html
View File

@ -66,7 +66,7 @@
<!-- Begin VideoJS -->
<div id="scrub" style="background: #000; height: 10px;"></div>
<div class="video-js-box">
<div class="video-js-box vim-css">
<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
<video data-subtitles="../demo-subtitles.srt" id="example_video_1" class="video-js" width="640" height="264" controls="controls" preload="auto" poster="http://video-js.zencoder.com/oceans-clip.png">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />

20
video-js.css
View File

@ -7,13 +7,13 @@ REQUIRED STYLES (be careful overriding)
/* Box containing video, controls, and download links.
If you want to add some kind of frame or special positioning, use another containing element, not video-js-box. */
.video-js-box { text-align: left; position: relative; vertical-align: bottom; } /* Will be set to the width of the video element */
.video-js-box { text-align: left; position: relative; line-height: 0; margin: 0; padding: 0; } /* Will be set to the width of the video element */
/* Video Element */
video.video-js { background-color: #000; position: relative; margin: 0 0 -1px 0; /* Firefox gap */ padding: 0; }
video.video-js { background-color: #000; position: relative; padding: 0; }
/* Poster Style */
.video-js-box img.vjs-poster { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.video-js-box img.vjs-poster { display: block; position: absolute; left: 0; top: 0; width: 100%; margin: 0; padding: 0; height: 100%; margin: 0; cursor: pointer; }
/* Subtiles Style */
.video-js-box .vjs-subtitles { color:#fff; font-size: 20px; text-align: center; bottom: 40px; left: 0; right: 0; position: absolute; }
@ -27,7 +27,10 @@ video.video-js { background-color: #000; position: relative; margin: 0 0 -1px 0;
.video-js-box.vjs-fullscreen .vjs-subtitles { z-index: 1004; }
/* Styles Loaded Check */
.vjs-styles-check { height: 5px; z-index: -1; }
.vjs-styles-check { height: 5px; position: absolute; }
.video-js-box.vjs-controls-below .vjs-controls { position: relative; opacity: 1; }
.video-js-box.vjs-controls-below video { margin: 0 0 0px 0; /* Firefox gap */ }
/* DEFAULT SKIN (override in another file)
================================================================================
@ -41,17 +44,18 @@ so you can upgrade to newer versions easier. */
position: absolute; margin: 0; border: none; opacity: 0.85; color: #fff;
display: none; /* Start hidden */
left: 0; right: 0; /* 100% width of video-js-box */
bottom: 5px;
bottom: 0px;
height: 35px; /* Including any margin you want above or below control items */
padding-top: 0; padding-bottom: 0;
padding: 0;
}
/* Controls styles when below the video */
.video-js-box.vjs-controls-below .vjs-controls { position: relative; opacity: 1; background-color: #000; }
.video-js-box.vjs-controls-below .vjs-controls { background-color: #000; }
.video-js-box .vjs-controls > div { /* Direct div children of control bar */
position: absolute; padding: 0; text-align: center;
height: 25px; /* Default height of individual controls */
margin: 0; top: 5px; /* Top margin to put space between video and controls when controls are below */
margin: 0; padding: 0;
top: 5px; /* Top margin to put space between video and controls when controls are below */
/* CSS Background Gradients */
/* Default */ background-color: #0B151A;

12
video.js
View File

@ -104,13 +104,6 @@ var VideoJS = _V_ = JRClass.extend({
this.buildAndActivateControlBar();
this.loadInterface(); // Show everything once styles are loaded
this.getSubtitles();
/* Removeable Event Listeners with Context
================================================================================ */
// These event listeners are attached to global elements like document/window.
// They are also temporary, which means they need to be removed.
// They also need context (this) so they can call functions on their specific player.
// Adding context on initialization allows us to store a reference to them and remove them later.
}
},
@ -202,7 +195,7 @@ var VideoJS = _V_ = JRClass.extend({
buildAndActivateControlBar: function(){
/* Creating this HTML
<div class="vjs-controls">
<div class="vjs-play-control vjs-play">
<div class="vjs-play-control">
<span></span>
</div>
<div class="vjs-progress-control">
@ -231,9 +224,10 @@ var VideoJS = _V_ = JRClass.extend({
this.controls = _V_.createElement("div", { className: "vjs-controls" });
// Add the controls to the video's container
this.video.parentNode.appendChild(this.controls);
_V_.addClass(this.video.parentNode, "vjs-paused");
// Build the play control
this.playControl = _V_.createElement("div", { className: "vjs-play-control vjs-play", innerHTML: "<span></span>" });
this.playControl = _V_.createElement("div", { className: "vjs-play-control", innerHTML: "<span></span>" });
this.controls.appendChild(this.playControl);
// Build the progress control