diff --git a/README.markdown b/README.markdown deleted file mode 100644 index 471b00671e..0000000000 --- a/README.markdown +++ /dev/null @@ -1,215 +0,0 @@ -VideoJS - [HTML5 Video Player](http://videojs.com) -================================================== -Version 2.0.2 - -View [VideoJS.com](http://videojs.com) for a demo and overview. - -VideoJS is an HTML5 video player that uses the HTML5 video tag built into modern browsers, and uses javascript to add custom controls, new functionality, and to fix cross browser bugs. - -The base of VideoJS is Kroc Camen's [Video for Everybody](http://camendesign.com/code/video_for_everybody), which is a video embed code that falls back to a Flash video player or download links for browsers and devices that don't support HTML5 video. - -View demo.html for an example of how to use it. - -Originally based on [this tutorial](http://blog.steveheffernan.com/2010/04/how-to-build-an-html5-video-player/). - -Contributors (Github Username) ------------------------------- -heff, dz0ny, sentientbit, tvdeyen, brandonarbini, gordonbrander, Shraymonks, albertogasparin, sandaru1, nicholasbs, majornista, Fredust85, @wonderboymusic, ellis-, emirpprime, eirikb, mbrubeck - - -Getting Started ---------------- - -### Step 1: Include VideoJS Javascript and CSS files in your page. -Change the src/href to the appropriate location on your server. - - - - - -### Step 2: Add the VideoJS setup code to your page or another script. -Must run after the VideoJS javascript file has been included - - - - -### Step 3: Add the VideoJS embed code to your page (grab the latest version for demo.html). -Change the video and image files to your own. You can even swap out the Flash Fallback for your own, just maintain the "vjs-flash-fallback" class on the object. I know, seems like a lot of HTML, but it's super compatible. [Check it](http://camendesign.com/code/video_for_everybody/test.html). - - -
- - - -

Download Video: - MP4, - WebM, - Ogg
- - HTML5 Video Player by VideoJS -

-
- - - -Storing a Reference to the Player(s) ------------------------------------- -You can set up the player(s) in a way that allows you to access it later, and control things like the video playback. In this case, the setup has to happen after the DOM has been loaded. You can use any library's DOM Ready method, or the one built into VideoJS. - -### Using a Video's ID or Element - - VideoJS.DOMReady(function(){ - var myPlayer = VideoJS.setup("example_video_1"); - }); - - -### Using an array of video elements/IDs -Note: It returns an array of players - - VideoJS.DOMReady(function(){ - var myManyPlayers = VideoJS.setup(["example_video_1", "example_video_2", video3Element]); - }); - - -### All videos on the page with the "video-js" class - - VideoJS.DOMReady(function(){ - var myManyPlayers = VideoJS.setup("All"); - }); - - -### After you have references to your players you can...(example) - - VideoJS.DOMReady(function(){ - var myPlayer = VideoJS.setup("example_video_1"); - myPlayer.play(); // Starts playing the video for this player. - }); - - -Setting Options ---------------- -Set options when setting up the videos. The defaults are shown here. - - VideoJS.setupAllWhenReady({ - controlsBelow: false, // Display control bar below video instead of in front of - controlsHiding: true, // Hide controls when mouse is not over the video - defaultVolume: 0.85, // Will be overridden by user's last volume if available - flashPlayerVersion: 9, // Required flash version for fallback - }); - -### Or as the second option of VideoJS.setup - - VideoJS.DOMReady(function(){ - var myPlayer = VideoJS.setup("example_video_1", { - // Same options - }); - }); - - -Coming Next ------------ -- API to Flash fallback - -Changelog ---------- -2.0.3 - -- Feature: Made returning to the start at the end of the movie an option ("returnToStart"). -- Feature: Added loop option to loop movie ("loop"). -- Feature: Reorganized player API and listeners. -- Feature: Added option to disable controls. controlsEnabled: false -- Feature: Setup method now has a callback, so you can more easily work with the player after setup -- Feature: Added listeners for enter/exit full screen/window. -- Feature: Added a VideoJS.player(id) function for getting the player for a video ID -- Changes: setupAllWhenReady is now just setupAll (backward compatible) -- Fix: Check for Android browser now excludes firefox and opera - -2.0.2 (2010-12-10) - -- Feature: Rewrote and optimized subtitle code. -- Feature: Protecting against volume ranges outside of 1 and 0. -- Fix: Bug in Safari for Mac OS 10.5 (Leopard) that was breaking fullscreen. - -2.0.1 (2010-11-22) - -- Fix: Issue with big play button when multiple videos are on the page. -- Fix: Optimized play progress tracking. -- Fix: Optimized buffer progress checking. -- Fix: Firefox not showing Flash fallback object. - -2.0.0 (2010-11-21) - -- Feature: Created "behaviors" concept for adding behaviors to elements -- Feature: Switched back to divs for controls, for more portable styles -- Feature: Created playerFallbackOrder array option. ["html5", "flash", "links"] -- Feature: Created playerType concept, for initializing different platforms -- Feature: Added play button for Android -- Feature: Added spinner for iPad (non-fullscreen) -- Feature: Split into multiple files for easier development -- Feature: Combined VideoJS & _V_ into the same variable to reduce confusion -- Fix: Checking for m3u8 files (Apple HTTP Streaming) -- Fix: Catching error on localStorage full that safari seems to randomly throw -- Fix: Scrubbing to end doesn't trigger onEnded - -1.1.5 (2010-11-09) - -- Feature: Switched to track method for setting subtitles. Now works like spec. -- Feature: Created "players" concept for defining fallbacks and fallback order -- Fix: Android playback bug. -- Fix: Massive reorganization of code to make easier to navigate - -1.1.4 (2010-11-06) - -- Feature: Added loading spinner. -- Feature: Improved styles loaded checking. -- Feature: Added volume() function to get and set volume through the player. -- Fix: Fix issue where FF would loop video in background when ended. -- Fix: Bug in Chrome that shows poster & plays audio if you set currentTime too quickly. -- Fix: Bug in Safari where waiting is triggered and shows spinner when not needed -- Fix: Updated to show links if only unplayable sources and no Flash. -- Fix: Issue where if play button was loaded after play, it wouldn't hide. - -1.1.3 (2010-10-19) - -- Feature: Width/Height functions for resizing the player -- Feature: Made initial click & hold trigger new value on progress and volume -- Feature: Made controls not hide when hovering over them -- Feature: Added big play button as default starting control. -- Fix: Removed trailing comma that was breaking IE7 -- Fix: Removed some vars from global scope -- Fix: Changed a document.onmousemove to an eventListener to prevent conflicts -- Fix: Added a unique ID to FlowPlayer demo object to fix a FlowPlayer bug. Thanks @emirpprime. -- Fix: Safari error on unloaded video - -1.1.2 (2010-09-20) - -- Added a fix for the poster bug in iPad/iPhone -- Added more specificity to styles - -1.1.1 (2010-09-14) - -- First Formally Versioned Release - -1.0.0 (2010-05-18) - -- First released diff --git a/README.md b/README.md new file mode 100644 index 0000000000..33b7ebf332 --- /dev/null +++ b/README.md @@ -0,0 +1,153 @@ +VideoJS - [HTML5 Video Player](http://videojs.com) +================================================== +Version 3.0 BETA + +--- +BETA NOTES +Version 3 is almost a complete rewrite of the previous versions of VideoJS. New features includes: + + - HTML/CSS Controls and API now work for both the HTML5 and Flash versions. + - Custom Super-lightweight Flash Fallback + - Embed Code is much simpler. + - No more "vjs-box" div required, just use the video tag. + - No more embedding of Flash fallback within the video tag HTML. + +--- + +View [VideoJS.com](http://videojs.com) for a demo and overview. + +VideoJS is an HTML5 video player that uses the HTML5 video tag built into modern browsers, and uses javascript to add custom controls, new functionality, and to fix cross browser bugs. For browsers that don't support HTML5, it will fallback to a Flash player. + +View demo.html for an example of how to use it. + +Originally based on [this tutorial](http://blog.steveheffernan.com/2010/04/how-to-build-an-html5-video-player/). + +Contributors (Github Username) +------------------------------ +heff, dz0ny, sentientbit, tvdeyen, brandonarbini, gordonbrander, Shraymonks, albertogasparin, sandaru1, nicholasbs, majornista, Fredust85, @wonderboymusic, ellis-, emirpprime, eirikb, mbrubeck + + +Getting Started +--------------- + +### Step 1: Include the VideoJS Javascript and CSS files in the head of your page. +Change the file urls to point to the files on your server. + + + + + +### Step 2: Add an HTML5 video tag to your page. +Use the video tag as normal, with a few extra pieces for VideoJS: + + 1. The 'data-setup' Atrribute tells VideoJS to automatically set up the video when the page is ready, and read any options (in JSON format) from the attribute. + 2. The 'id' Attribute: Should be used and unique for every video on the same page. + 3. The 'class' attribute contains two classes: + - 'video-js' applies styles that are required for VideoJS functionality, like fullscreen and subtitles. + - 'vjs-default-skin' applies the default skin to the HTML controls, and can be removed or overridden to create your own controls design. + +Otherwise include/exclude attributes, settings, sources, and tracks exactly as you would for HTML5 video. + + + + +### Step 3: Nada! +That's all it take to get started. See the docs for more advanced uses. + + +Coming Next +----------- +- Stable Release + +Changelog +--------- +3.0b + +- Complete rewrite in progress + +2.0.3 + +- Feature: Made returning to the start at the end of the movie an option ("returnToStart"). +- Feature: Added loop option to loop movie ("loop"). +- Feature: Reorganized player API and listeners. +- Feature: Added option to disable controls. controlsEnabled: false +- Feature: Setup method now has a callback, so you can more easily work with the player after setup +- Feature: Added listeners for enter/exit full screen/window. +- Feature: Added a VideoJS.player(id) function for getting the player for a video ID +- Changes: setupAllWhenReady is now just setupAll (backward compatible) +- Fix: Check for Android browser now excludes firefox and opera + +2.0.2 (2010-12-10) + +- Feature: Rewrote and optimized subtitle code. +- Feature: Protecting against volume ranges outside of 1 and 0. +- Fix: Bug in Safari for Mac OS 10.5 (Leopard) that was breaking fullscreen. + +2.0.1 (2010-11-22) + +- Fix: Issue with big play button when multiple videos are on the page. +- Fix: Optimized play progress tracking. +- Fix: Optimized buffer progress checking. +- Fix: Firefox not showing Flash fallback object. + +2.0.0 (2010-11-21) + +- Feature: Created "behaviors" concept for adding behaviors to elements +- Feature: Switched back to divs for controls, for more portable styles +- Feature: Created playerFallbackOrder array option. ["html5", "flash", "links"] +- Feature: Created playerType concept, for initializing different platforms +- Feature: Added play button for Android +- Feature: Added spinner for iPad (non-fullscreen) +- Feature: Split into multiple files for easier development +- Feature: Combined VideoJS & _V_ into the same variable to reduce confusion +- Fix: Checking for m3u8 files (Apple HTTP Streaming) +- Fix: Catching error on localStorage full that safari seems to randomly throw +- Fix: Scrubbing to end doesn't trigger onEnded + +1.1.5 (2010-11-09) + +- Feature: Switched to track method for setting subtitles. Now works like spec. +- Feature: Created "players" concept for defining fallbacks and fallback order +- Fix: Android playback bug. +- Fix: Massive reorganization of code to make easier to navigate + +1.1.4 (2010-11-06) + +- Feature: Added loading spinner. +- Feature: Improved styles loaded checking. +- Feature: Added volume() function to get and set volume through the player. +- Fix: Fix issue where FF would loop video in background when ended. +- Fix: Bug in Chrome that shows poster & plays audio if you set currentTime too quickly. +- Fix: Bug in Safari where waiting is triggered and shows spinner when not needed +- Fix: Updated to show links if only unplayable sources and no Flash. +- Fix: Issue where if play button was loaded after play, it wouldn't hide. + +1.1.3 (2010-10-19) + +- Feature: Width/Height functions for resizing the player +- Feature: Made initial click & hold trigger new value on progress and volume +- Feature: Made controls not hide when hovering over them +- Feature: Added big play button as default starting control. +- Fix: Removed trailing comma that was breaking IE7 +- Fix: Removed some vars from global scope +- Fix: Changed a document.onmousemove to an eventListener to prevent conflicts +- Fix: Added a unique ID to FlowPlayer demo object to fix a FlowPlayer bug. Thanks @emirpprime. +- Fix: Safari error on unloaded video + +1.1.2 (2010-09-20) + +- Added a fix for the poster bug in iPad/iPhone +- Added more specificity to styles + +1.1.1 (2010-09-14) + +- First Formally Versioned Release + +1.0.0 (2010-05-18) + +- First released diff --git a/demo-subtitles.srt b/demo-subtitles.srt deleted file mode 100755 index 0d25ac63b4..0000000000 --- a/demo-subtitles.srt +++ /dev/null @@ -1,13 +0,0 @@ -1 -00:00:02,400 --> 00:00:05,200 -[Background Music Playing] - -2 -00:00:15,712 --> 00:00:17,399 -Heay!! - -3 -00:00:25,712 --> 00:00:30,399 -[Bird noises] - - diff --git a/demo.html b/demo.html index 35fc892fb7..833843f7ae 100644 --- a/demo.html +++ b/demo.html @@ -1,102 +1,22 @@ - - HTML5 Video Player + VideoJS | HTML5 Video Player - - + - - // Add VideoJS to all video tags on the page when the DOM is ready - VideoJS.setupAllWhenReady(); - - /* ============= OR ============ */ - - // Setup and store a reference to the player(s). - // Must happen after the DOM is loaded - // You can use any library's DOM Ready method instead of VideoJS.DOMReady - - /* - VideoJS.DOMReady(function(){ - - // Using the video's ID or element - var myPlayer = VideoJS.setup("example_video_1"); - - // OR using an array of video elements/IDs - // Note: It returns an array of players - var myManyPlayers = VideoJS.setup(["example_video_1", "example_video_2", video3Element]); - - // OR all videos on the page - var myManyPlayers = VideoJS.setup("All"); - - // After you have references to your players you can...(example) - myPlayer.play(); // Starts playing the video for this player. - }); - */ - - /* ========= SETTING OPTIONS ========= */ - - // Set options when setting up the videos. The defaults are shown here. - - /* - VideoJS.setupAllWhenReady({ - controlsBelow: false, // Display control bar below video instead of in front of - controlsHiding: true, // Hide controls when mouse is not over the video - defaultVolume: 0.85, // Will be overridden by user's last volume if available - flashVersion: 9, // Required flash version for fallback - linksHiding: true // Hide download links when video is supported - }); - */ - - // Or as the second option of VideoJS.setup - - /* - VideoJS.DOMReady(function(){ - var myPlayer = VideoJS.setup("example_video_1", { - // Same options - }); - }); - */ - - - - - - -
- - - -

Download Video: - MP4, - WebM, - Ogg
- - HTML5 Video Player by VideoJS -

-
- + diff --git a/dev/build/combine_sources.sh b/dev/build/combine_sources.sh new file mode 100755 index 0000000000..e97105f90d --- /dev/null +++ b/dev/build/combine_sources.sh @@ -0,0 +1,36 @@ +#! /bin/csh +# Combines Source Files. In terminal, sh combine_sources.sh +# It will put a new video.js file under dist/ + +cat ../src/_begin.js > ../dist/video.js + +cat ../src/core.js >> ../dist/video.js +cat ../src/api.js >> ../dist/video.js + +cat ../src/lib.js >> ../dist/video.js +cat ../src/log.js >> ../dist/video.js + +cat ../src/ecma.js >> ../dist/video.js +cat ../src/json.js >> ../dist/video.js +cat ../src/events.js >> ../dist/video.js +cat ../src/tracks.js >> ../dist/video.js + +cat ../src/tech/html5.js >> ../dist/video.js +cat ../src/tech/flowplayer.js >> ../dist/video.js + +# h5swf temporarily requires swfobject +cat ../src/tech/h5swf.js >> ../dist/video.js +cat ../flash/swfobject.js >> ../dist/video.js + +cat ../src/behaviors/behaviors.js >> ../dist/video.js +cat ../src/behaviors/seekBar.js >> ../dist/video.js +cat ../src/behaviors/texttrackdisplays.js >> ../dist/video.js +cat ../src/behaviors/volume.js >> ../dist/video.js + +cat ../src/controls/bar.js >> ../dist/video.js +cat ../src/controls/bigPlay.js >> ../dist/video.js +cat ../src/controls/subtitlesBox.js >> ../dist/video.js + +cat ../src/autoload.js >> ../dist/video.js + +cat ../src/_end.js >> ../dist/video.js \ No newline at end of file diff --git a/dev/combine_sources.sh b/dev/combine_sources.sh deleted file mode 100755 index 84b18b35b0..0000000000 --- a/dev/combine_sources.sh +++ /dev/null @@ -1,13 +0,0 @@ -#! /bin/csh -# Combines Source Files. In terminal, sh combine_sources.sh -cat src/_begin.js > combined.js - -cat src/main.js >> combined.js -cat src/api.js >> combined.js -cat src/html5.js >> combined.js -cat src/flash.js >> combined.js -cat src/behaviors.js >> combined.js -cat src/lib.js >> combined.js -cat src/video-js.jquery.js >> combined.js - -cat src/_end.js >> combined.js \ No newline at end of file diff --git a/dev/compare/compare.css b/dev/compare/compare.css new file mode 100644 index 0000000000..c475cb5e6c --- /dev/null +++ b/dev/compare/compare.css @@ -0,0 +1,6 @@ +body { font-size: 11px; font-family: 'Helvetica Neue', helvetica, arial; } +td, th { text-align: left; vertical-align: top; } +td.info-col { width: 240px; } +td.data { text-align: right; } +span.na { color: red; } +span.undefined { color: #999; } \ No newline at end of file diff --git a/dev/compare/compare.html b/dev/compare/compare.html new file mode 100644 index 0000000000..f82a0ab407 --- /dev/null +++ b/dev/compare/compare.html @@ -0,0 +1,102 @@ + + + + + HTML5 Video Player + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
HTML5H5SwfFlowplayer
+ + + + + +
+
+ 		+
+ 		+
+ 		+
+ 		+
+ 		+
+
+ + + diff --git a/dev/compare/compare.js b/dev/compare/compare.js new file mode 100644 index 0000000000..c5b6dc515b --- /dev/null +++ b/dev/compare/compare.js @@ -0,0 +1,55 @@ +$(function(){ + var tech, i, + techList = ["html5","h5swf","flowplayer"], + props = "error,currentSrc,networkState,buffered,readyState,seeking,initialTime,duration,startOffsetTime,paused,played,seekable,ended,videoWidth,videoHeight,textTracks,preload,currentTime,playbackRate,autoplay,loop,controls,volume,muted,defaultMuted".split(","), + methods = "play,pause,src,load,canPlayType,addTextTrack", + notUsed = "mediaGroup,controller,videoTracks,audioTracks,defaultPlaybackRate"; + + + for (i=0; i < techList.length; i++) { + tech = techList[i]; + + var player = _V_("vid"+(i+1), { "techOrder":[tech] }); + + _V_.each(_V_.html5Events, function(evt){ + player.addEvent(evt, _V_.proxy(tech, function(evt){ + var eventsId = "#"+this+"_events", + type = evt.type, + prev = $(eventsId+" div").first(); + + if (prev && prev.html() && prev.html().indexOf(type + " ") === 0) { + var countSpan = prev.children(".count"); + countSpan.html(parseInt(countSpan.html() || 1) + 1); + } else { + $("#"+this+"_events").prepend("
" + evt.type + "
"); + } + })); + }); + + var propTable = $("#"+tech+"_props"); + _V_.each(props, function(prop){ + propTable.append(""+prop+"") + }); + + setInterval(_V_.proxy(player, function(){ + _V_.each(props, _V_.proxy(this, function(prop){ + var result = "" + try { + result = this[prop](); + if (result === false) result = "false"; + if (result === true) result = "true"; + if (result === "") result = "''"; + if (result === null) result = "null"; + if (result === undefined) result = "undefined"; + if (typeof result.start == "function") { + result = (result.length > 0) ? "s:"+result.start(0)+" e:"+result.end(0) : "-"; + } + } catch(e) { + result = "N/A"; + } + $("#"+this.currentTechName+prop).html(result); + })); + }), 500); + + }; +}); \ No newline at end of file diff --git a/dev/decisions.txt b/dev/decisions.txt new file mode 100644 index 0000000000..3f030af59d --- /dev/null +++ b/dev/decisions.txt @@ -0,0 +1,8 @@ +Tracking/Polling CurrentTime Manually +------------------------------------- +- Necessary for most flash players and browsers that don't trigger timeupdate events. +- In VJS 1-2, we always tracked time because timeupdate was rare. +- Now most browsers support it well. There is a delay bug in the current Chrome. + http://code.google.com/p/chromium/issues/detail?id=92251 + Andrew from Chrome told me it would be fix in an upcoming release. +Going to rely on browsers timeupdates when available now. \ No newline at end of file diff --git a/dev/demo-subtitles.srt b/dev/demo-subtitles.srt new file mode 100644 index 0000000000..1a5217306c --- /dev/null +++ b/dev/demo-subtitles.srt @@ -0,0 +1,13 @@ +1 +00:00:00,000 --> 00:00:07,200 +[Background Music Playing] + +2 +00:00:16,000 --> 00:00:17,200 +Welcome to this week's episode + +3 +00:00:17,400 --> 00:00:19,000 +of explore California + + diff --git a/dev/design/Icon Design.png b/dev/design/Icon Design.png new file mode 100644 index 0000000000..ae1b79fe70 Binary files /dev/null and b/dev/design/Icon Design.png differ diff --git a/dev/design/skin.old.css b/dev/design/skin.old.css new file mode 100644 index 0000000000..657ae32179 --- /dev/null +++ b/dev/design/skin.old.css @@ -0,0 +1,190 @@ +/* DEFAULT SKIN (override in another file) +================================================================================ +Using all CSS to draw the controls. Images could be used if desired. +Instead of editing this file, I recommend creating your own skin CSS file to be included after this file, +so you can upgrade to newer versions easier. */ + +.vjs-original-skin .vjs-controls { + position: absolute; margin: 0; opacity: 0.85; color: #fff; + display: block; /* Start hidden */ + left: 0; right: 0; /* 100% width of video-js-box */ + width: 100%; + bottom: 0px; /* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */ + height: 35px; /* Including any margin you want above or below control items */ + padding: 0; /* Controls are absolutely position, so no padding necessary */ + -webkit-transition: opacity 0.5s linear; + -moz-transition: opacity 0.5s linear; + -o-transition: opacity 0.5s linear; + -ms-transition: opacity 0.5s linear; + transition: opacity 0.5s linear; +} + +.vjs-original-skin .vjs-control { + position: absolute; /* Use top, bottom, left, and right to specifically position the control. */ + text-align: center; margin: 0; padding: 0; + height: 25px; /* Default height of individual controls */ + top: 5px; /* Top margin to put space between video and controls when controls are below */ + + /* CSS Background Gradients + Using to give the aqua-ish look. */ + /* Default */ background-color: #0B151A; + /* Webkit */ background: #1F3744 -webkit-gradient(linear, left top, left bottom, from(#0B151A), to(#1F3744)) left 12px; + /* Firefox */ background: #1F3744 -moz-linear-gradient(top, #0B151A, #1F3744) left 12px; + + /* CSS Curved Corners */ + -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; + + /* CSS Shadows */ + -webkit-box-shadow: 1px 1px 2px #000; -moz-box-shadow: 1px 1px 2px #000; box-shadow: 1px 1px 2px #000; +} + +/* Placement of Control Items + - Left side of pogress bar, use left & width + - Rigth side of progress bar, use right & width + - Expand with the video (like progress bar) use left & right + (using div.x to make more specific than vjs-control style) +*/ +.vjs-original-skin div.vjs-play-control { left: 5px; width: 25px; } +.vjs-original-skin div.vjs-progress-control { left: 35px; right: 165px; } /* Using left & right so it expands with the width of the video */ +.vjs-original-skin div.vjs-time-control { width: 75px; right: 90px; } /* Time control and progress bar are combined to look like one */ +.vjs-original-skin div.vjs-volume-control { width: 50px; right: 35px; } +.vjs-original-skin div.vjs-fullscreen-control { width: 25px; right: 5px; } + +/* Removing curved corners on progress control and time control to join them. */ +.vjs-original-skin div.vjs-progress-control { + -webkit-border-top-right-radius: 0; -moz-border-radius-topright: 0; border-top-right-radius: 0; + -webkit-border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0; border-bottom-right-radius: 0; +} +.vjs-original-skin div.vjs-time-control { + -webkit-border-top-left-radius: 0; -moz-border-radius-topleft: 0; border-top-left-radius: 0; + -webkit-border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0; border-bottom-left-radius: 0; +} + +/* Play/Pause +-------------------------------------------------------------------------------- */ +.vjs-original-skin .vjs-play-control { cursor: pointer !important; } +/* Play Icon */ +.vjs-original-skin .vjs-play-control span { display: block; font-size: 0; line-height: 0; } +.vjs-original-skin.vjs-paused .vjs-play-control span { + width: 0; height: 0; margin: 8px 0 0 8px; + /* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */ + border-left: 10px solid #fff; /* Width & Color of play icon */ + /* Height of play icon is total top & bottom border widths. Color is transparent. */ + border-top: 5px solid rgba(0,0,0,0); border-bottom: 5px solid rgba(0,0,0,0); +} +.vjs-original-skin.vjs-playing .vjs-play-control span { + width: 3px; height: 10px; margin: 8px auto 0; + /* Drawing the pause bars with borders */ + border-top: 0px; border-left: 3px solid #fff; border-bottom: 0px; border-right: 3px solid #fff; +} + +/* Progress +-------------------------------------------------------------------------------- */ +.vjs-original-skin .vjs-progress-holder { /* Box containing play and load progresses */ + position: relative; padding: 0; overflow:hidden; cursor: pointer !important; + height: 9px; border: 1px solid #777; + margin: 7px 1px 0 5px; /* Placement within the progress control item */ + -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; +} +.vjs-original-skin .vjs-progress-holder div { /* Progress Bars */ + position: absolute; display: block; width: 0; height: 9px; margin: 0; padding: 0; + left: 0; top: 0; /*Needed for IE6*/ + -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; +} +.vjs-original-skin .vjs-play-progress { + /* CSS Gradient */ + /* Default */ background: #fff; + /* Webkit */ background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#777)); + /* Firefox */ background: -moz-linear-gradient(top, #fff, #777); +} +.vjs-original-skin .vjs-load-progress { + opacity: 0.8; + /* CSS Gradient */ + /* Default */ background-color: #555; + /* Webkit */ background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#aaa)); + /* Firefox */ background: -moz-linear-gradient(top, #555, #aaa); +} + +/* Time Display +-------------------------------------------------------------------------------- */ +.vjs-original-skin .vjs-time-control { font-size: 10px; line-height: 1; font-weight: normal; font-family: Helvetica, Arial, sans-serif; } +.vjs-original-skin .vjs-time-control span { line-height: 25px; /* Centering vertically */ } + +/* Volume +-------------------------------------------------------------------------------- */ +.vjs-original-skin .vjs-volume-control { cursor: pointer !important; } +.vjs-original-skin .vjs-volume-control div { display: block; margin: 0 5px 0 5px; padding: 4px 0 0 0; } +/* Drawing the volume icon using 6 span elements */ +.vjs-original-skin .vjs-volume-control div span { /* Individual volume bars */ + float: left; padding: 0; font-size: 0; line-height: 0; + margin: 0 2px 0 0; /* Space between */ + width: 5px; height: 0px; /* Total height is height + bottom border */ + border-bottom: 18px solid #555; /* Default (off) color and height of visible portion */ +} +.vjs-original-skin .vjs-volume-control div span.vjs-volume-level-on { border-color: #fff; /* Volume on bar color */ } +/* Creating differnt bar heights through height (transparent) and bottom border (visible). */ +.vjs-original-skin .vjs-volume-control div span.vjs-vc-1 { border-bottom-width: 2px; height: 16px; } +.vjs-original-skin .vjs-volume-control div span.vjs-vc-2 { border-bottom-width: 4px; height: 14px; } +.vjs-original-skin .vjs-volume-control div span.vjs-vc-3 { border-bottom-width: 7px; height: 11px; } +.vjs-original-skin .vjs-volume-control div span.vjs-vc-4 { border-bottom-width: 10px; height: 8px; } +.vjs-original-skin .vjs-volume-control div span.vjs-vc-5 { border-bottom-width: 14px; height: 4px; } +.vjs-original-skin .vjs-volume-control div span.vjs-vc-6 { margin-right: 0; } + +/* Fullscreen +-------------------------------------------------------------------------------- */ +.vjs-original-skin .vjs-fullscreen-control { cursor: pointer !important; } +.vjs-original-skin .vjs-fullscreen-control div { + padding: 0; text-align: left; vertical-align: top; cursor: pointer !important; + margin: 5px 0 0 5px; /* Placement within the fullscreen control item */ + width: 20px; height: 20px; +} +/* Drawing the fullscreen icon using 4 span elements */ +.vjs-original-skin .vjs-fullscreen-control div span { float: left; margin: 0; padding: 0; font-size: 0; line-height: 0; width: 0; text-align: left; vertical-align: top; } +.vjs-original-skin .vjs-fullscreen-control div span.vjs-fc-1 { /* Top-left triangle */ + margin-right: 3px; /* Space between top-left and top-right */ + margin-bottom: 3px; /* Space between top-left and bottom-left */ + border-top: 6px solid #fff; /* Height and color */ + border-right: 6px solid rgba(0,0,0,0); /* Width */ +} +.vjs-original-skin .vjs-fullscreen-control div span.vjs-fc-2 { border-top: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); } +.vjs-original-skin .vjs-fullscreen-control div span.vjs-fc-3 { clear: both; margin: 0 3px 0 0; border-bottom: 6px solid #fff; border-right: 6px solid rgba(0,0,0,0); } +.vjs-original-skin .vjs-fullscreen-control div span.vjs-fc-4 { border-bottom: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); } +/* Icon when video is in fullscreen mode */ +.vjs-original-skin.vjs-fullscreen .vjs-fullscreen-control div span.vjs-fc-1 { border: none; border-bottom: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); } +.vjs-original-skin.vjs-fullscreen .vjs-fullscreen-control div span.vjs-fc-2 { border: none; border-bottom: 6px solid #fff; border-right: 6px solid rgba(0,0,0,0); } +.vjs-original-skin.vjs-fullscreen .vjs-fullscreen-control div span.vjs-fc-3 { border: none; border-top: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); } +.vjs-original-skin.vjs-fullscreen .vjs-fullscreen-control div span.vjs-fc-4 { border: none; border-top: 6px solid #fff; border-right: 6px solid rgba(0,0,0,0); } + + + + + +/* Big Play Button (at start) +---------------------------------------------------------*/ +.vjs-original-skin .vjs-big-play-button { + display: block; /* Start hidden */ z-index: 2; + position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; margin: -43px 0 0 -43px; text-align: center; vertical-align: center; cursor: pointer !important; + border: 3px solid #fff; opacity: 0.9; + -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; + + /* CSS Background Gradients */ + /* Default */ background-color: #0B151A; + /* Webkit */ background: #1F3744 -webkit-gradient(linear, left top, left bottom, from(#0B151A), to(#1F3744)) left 40px; + /* Firefox */ background: #1F3744 -moz-linear-gradient(top, #0B151A, #1F3744) left 40px; + + /* CSS Shadows */ + -webkit-box-shadow: 4px 4px 8px #000; -moz-box-shadow: 4px 4px 8px #000; box-shadow: 4px 4px 8px #000; +} + +.vjs-original-skin div.vjs-big-play-button:hover { + -webkit-box-shadow: 0px 0px 80px #fff; -moz-box-shadow: 0px 0px 80px #fff; box-shadow: 0px 0px 80px #fff; +} + +.vjs-original-skin div.vjs-big-play-button span { + display: block; font-size: 0; line-height: 0; + width: 0; height: 0; margin: 20px 0 0 23px; + /* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */ + border-left: 40px solid #fff; /* Width & Color of play icon */ + /* Height of play icon is total top & bottom border widths. Color is transparent. */ + border-top: 20px solid rgba(0,0,0,0); border-bottom: 20px solid rgba(0,0,0,0); +} \ No newline at end of file diff --git a/dev/design/video-js.css b/dev/design/video-js.css new file mode 100644 index 0000000000..2ff806fedd --- /dev/null +++ b/dev/design/video-js.css @@ -0,0 +1,307 @@ +/* +VideoJS Default Styles (http://videojs.com) +Version 3.0 + +REQUIRED STYLES (be careful overriding) +================================================================================ */ +/* When loading the player, the video tag is replaced with a DIV, + that will hold the video tag or object tag for other playback methods. + The div contains the video playback element (Flash or HTML5) and controls, and sets the width and height of the video. + + ** If you want to add some kind of border/padding (e.g. a frame), or special positioning, use another containing element. + Otherwise you risk messing up control positioning and full window mode. ** +*/ +.video-js { + background-color: #000; position: relative; padding: 0; + /* Start with 10px for base font size so other dimensions can be em based and easily calculable. */ + font-size: 10px; +} + +/* Playback technology elements expand to the width/height of the containing div.