web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-01-02 06:32:07 +02:00
Code Releases Activity

Updated to latest version

Browse Source
This commit is contained in:
Steve Heffernan 2010-09-19 11:58:18 -07:00
parent 6fec224945
commit 548554fbe2
7 changed files with 252 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
video-js/README.markdown
View File

@ -1,5 +1,7 @@
VideoJS - [HTML5 Video Player](http://videojs.com) VideoJS - [HTML5 Video Player](http://videojs.com)
================================================== ==================================================
Version 1.1.1
View [VideoJS.com](http://videojs.com) for a demo and overview. 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. 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.
@ -10,6 +12,11 @@ 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/). 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
Getting Started Getting Started
--------------- ---------------
@ -40,7 +47,7 @@ Change the video and image files to your own. You can even swap out the Flash Fa
<video id="example_video_1" class="video-js" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" controls preload> <video id="example_video_1" class="video-js" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" controls preload>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="http://video-js.zencoder.com/oceans-clip.ogg" type='video/ogg; codecs="theora, vorbis"'> <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"'>
<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. --> <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
<object class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash" <object class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"> data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
@ -56,9 +63,9 @@ Change the video and image files to your own. You can even swap out the Flash Fa
<p class="vjs-no-video"><strong>Download Video:</strong> <p class="vjs-no-video"><strong>Download Video:</strong>
<a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>, <a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
<a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>, <a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
<a href="http://video-js.zencoder.com/oceans-clip.ogg">Ogg</a><br> <a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a><br>
<!-- Support VideoJS by keeping this link. --> <!-- Support VideoJS by keeping this link. -->
<a href="http://videojs.com">HTML5 Video Player</a> by <a href="http://videojs.com">VideoJS</a> <a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
</p> </p>
</div> </div>
<!-- End VideoJS --> <!-- End VideoJS -->
@ -119,3 +126,12 @@ Set options when setting up the videos. The defaults are shown here.
}); });
}); });
Changelog
---------
1.1.1 (2010-09-14)
- First Formally Versioned Release
1.0.0 (2010-05-18)
- First released

6
video-js/demo.html
View File

@ -74,7 +74,7 @@
<video id="example_video_1" class="video-js" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" controls preload> <video id="example_video_1" class="video-js" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" controls preload>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="http://video-js.zencoder.com/oceans-clip.ogg" type='video/ogg; codecs="theora, vorbis"'> <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"'>
<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. --> <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
<object class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash" <object class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"> data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
@ -90,9 +90,9 @@
<p class="vjs-no-video"><strong>Download Video:</strong> <p class="vjs-no-video"><strong>Download Video:</strong>
<a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>, <a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
<a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>, <a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
<a href="http://video-js.zencoder.com/oceans-clip.ogg">Ogg</a><br> <a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a><br>
<!-- Support VideoJS by keeping this link. --> <!-- Support VideoJS by keeping this link. -->
<a href="http://videojs.com">HTML5 Video Player</a> by <a href="http://videojs.com">VideoJS</a> <a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
</p> </p>
</div> </div>
<!-- End VideoJS --> <!-- End VideoJS -->

58
video-js/skins/hu.css
View File

@ -1,77 +1,77 @@
.hu-css .vjs-controls { .hu-css ul.vjs-controls {
height: 47px; opacity: 0.95; color: #fff; height: 47px; opacity: 0.95; color: #fff;
padding-left: 84px; /* Width of play button + margin */ padding-left: 84px; /* Width of play button + margin */
padding-right: 0px; /* Width of all the controls to the right of the progress control + margins */ padding-right: 0px; /* Width of all the controls to the right of the progress control + margins */
background: #3A3835; background: #3A3835;
} }
.hu-css .vjs-controls > li { .hu-css ul.vjs-controls > li {
background: none; background: none;
border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;
box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;
} }
/* Top Level Items */ /* Top Level Items */
.hu-css .vjs-controls > li.vjs-play-control, .hu-css ul.vjs-controls > li.vjs-play-control,
.hu-css .vjs-controls > li.vjs-volume-control, .hu-css ul.vjs-controls > li.vjs-volume-control,
.hu-css .vjs-controls > li.vjs-fullscreen-control { .hu-css ul.vjs-controls > li.vjs-fullscreen-control {
bottom: 20px; height: 27px; bottom: 20px; height: 27px;
} }
/* Bottom Level Items */ /* Bottom Level Items */
.hu-css .vjs-controls > li.vjs-progress-control, .hu-css .vjs-controls > li.vjs-time-control { .hu-css ul.vjs-controls > li.vjs-progress-control, .hu-css ul.vjs-controls > li.vjs-time-control {
margin-top: 28px; height: 19px; margin-top: 28px; height: 19px;
} }
/* Placement of Control Items */ /* Placement of Control Items */
.hu-css .vjs-controls > li.vjs-play-control { width: 33px; left: 0px; } .hu-css ul.vjs-controls > li.vjs-play-control { width: 33px; left: 0px; }
.hu-css .vjs-controls > li.vjs-progress-control { width: 100%; position: relative; } .hu-css ul.vjs-controls > li.vjs-progress-control { width: 100%; position: relative; }
.hu-css .vjs-controls > li.vjs-time-control { width: 84px; left: 0px; } .hu-css ul.vjs-controls > li.vjs-time-control { width: 84px; left: 0px; }
.hu-css .vjs-controls > li.vjs-volume-control { width: 43px; right: 44px; } .hu-css ul.vjs-controls > li.vjs-volume-control { width: 43px; right: 44px; }
.hu-css .vjs-controls > li.vjs-fullscreen-control { width: 43px; right: 0px; } .hu-css ul.vjs-controls > li.vjs-fullscreen-control { width: 43px; right: 0px; }
/* Play/Pause /* Play/Pause
-------------------------------------------------------------------------------- */ -------------------------------------------------------------------------------- */
.hu-css .vjs-play-control.vjs-play span { margin: 9px 0 0 12px; } .hu-css li.vjs-play-control.vjs-play span { margin: 9px 0 0 12px; }
.hu-css .vjs-play-control.vjs-pause span { margin: 9px 0 0 12px; } .hu-css li.vjs-play-control.vjs-pause span { margin: 9px 0 0 12px; }
.hu-css .vjs-play-control:hover { background-color: #000; } .hu-css li.vjs-play-control:hover { background-color: #000; }
/* Progress /* Progress
-------------------------------------------------------------------------------- */ -------------------------------------------------------------------------------- */
.hu-css .vjs-progress-holder { /* Box containing play and load progresses */ .hu-css ul.vjs-progress-holder { /* Box containing play and load progresses */
height: 19px; border: none; height: 19px; border: none;
margin: 0px 0px 0 0px; /* Placement within the progress control item */ margin: 0px 0px 0 0px; /* Placement within the progress control item */
background: #000; background: #000;
border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;
} }
.hu-css .vjs-progress-holder li { height: 13px; margin-top: 3px; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; } .hu-css ul.vjs-progress-holder li { height: 13px; margin-top: 3px; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; }
.hu-css .vjs-play-progress { .hu-css li.vjs-play-progress {
/* Default */ background: #777; /* Default */ background: #777;
/* Webkit */ background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#777)); /* Webkit */ background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#777));
/* Firefox */ background: -moz-linear-gradient(top, #999, #777); /* Firefox */ background: -moz-linear-gradient(top, #999, #777);
} }
.hu-css .vjs-load-progress { background: #555; } .hu-css li.vjs-load-progress { background: #555; }
/* Time Display /* Time Display
-------------------------------------------------------------------------------- */ -------------------------------------------------------------------------------- */
.hu-css .vjs-controls .vjs-time-control { font-size: 11px; background: #000; } .hu-css ul.vjs-controls li.vjs-time-control { font-size: 11px; background: #000; }
.hu-css .vjs-controls .vjs-time-control span { line-height: 19px; /* Centering vertically */ } .hu-css ul.vjs-controls li.vjs-time-control span { line-height: 19px; /* Centering vertically */ }
/* Volume /* Volume
-------------------------------------------------------------------------------- */ -------------------------------------------------------------------------------- */
/*.hu-css .vjs-volume-control:hover { background-color: #000; }*/ /*.hu-css li.vjs-volume-control:hover { background-color: #000; }*/
.hu-css .vjs-volume-control ul { margin: 0 5px 0 5px; padding: 9px 0 0 0; } .hu-css li.vjs-volume-control ul { margin: 0 5px 0 5px; padding: 9px 0 0 0; }
.hu-css .vjs-volume-control ul li { /* Individual volume bars */ .hu-css li.vjs-volume-control ul li { /* Individual volume bars */
margin: 0 2px 0 0; /* Space between */ margin: 0 2px 0 0; /* Space between */
width: 3px; height: 0px; /* Total height is height + bottom border */ width: 3px; height: 0px; /* Total height is height + bottom border */
border-bottom: 12px solid #555; /* Default (off) color and height of visible portion */ border-bottom: 12px solid #555; /* Default (off) color and height of visible portion */
} }
.hu-css .vjs-volume-control ul li.vjs-volume-level-on { border-color: #fff; /* Volume on bar color */ } .hu-css li.vjs-volume-control ul li.vjs-volume-level-on { border-color: #fff; /* Volume on bar color */ }
/* Creating differnt bar heights through height (transparent) and bottom border (visible). */ /* Creating differnt bar heights through height (transparent) and bottom border (visible). */
.hu-css .vjs-volume-control ul li:nth-child(1) { border-bottom-width: 2px; height: 10px; } .hu-css li.vjs-volume-control ul li:nth-child(1) { border-bottom-width: 2px; height: 10px; }
.hu-css .vjs-volume-control ul li:nth-child(2) { border-bottom-width: 4px; height: 8px; } .hu-css li.vjs-volume-control ul li:nth-child(2) { border-bottom-width: 4px; height: 8px; }
.hu-css .vjs-volume-control ul li:nth-child(3) { border-bottom-width: 6px; height: 6px; } .hu-css li.vjs-volume-control ul li:nth-child(3) { border-bottom-width: 6px; height: 6px; }
.hu-css .vjs-volume-control ul li:nth-child(4) { border-bottom-width: 8px; height: 4px; } .hu-css li.vjs-volume-control ul li:nth-child(4) { border-bottom-width: 8px; height: 4px; }
.hu-css .vjs-volume-control ul li:nth-child(5) { border-bottom-width: 10px; height: 2px; } .hu-css li.vjs-volume-control ul li:nth-child(5) { border-bottom-width: 10px; height: 2px; }
/* Fullscreen /* Fullscreen
-------------------------------------------------------------------------------- */ -------------------------------------------------------------------------------- */

46
video-js/skins/tube.css
View File

@ -1,4 +1,4 @@
.tube-css .vjs-controls { .tube-css ul.vjs-controls {
opacity: 1; color: #000; opacity: 1; color: #000;
height: 25px; height: 25px;
padding-left: 102px; /* Width of play button + margin */ padding-left: 102px; /* Width of play button + margin */
@ -9,7 +9,7 @@
background: #fcfcfc -moz-linear-gradient(top, #fcfcfc, #d0d0d0) left top; background: #fcfcfc -moz-linear-gradient(top, #fcfcfc, #d0d0d0) left top;
} }
.tube-css .vjs-controls > li { .tube-css ul.vjs-controls > li {
height: 23px; margin: 0; background: none; height: 23px; margin: 0; background: none;
border: 1px solid #b1b1b1; border-left-color: #eee; border: 1px solid #b1b1b1; border-left-color: #eee;
border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;
@ -17,33 +17,33 @@
} }
/* Placement of Control Items */ /* Placement of Control Items */
.tube-css .vjs-controls > li.vjs-play-control { width: 25px; left: 0; } .tube-css ul.vjs-controls > li.vjs-play-control { width: 25px; left: 0; }
.tube-css .vjs-controls > li.vjs-progress-control { width: 100%; position: relative; } .tube-css ul.vjs-controls > li.vjs-progress-control { width: 100%; position: relative; }
.tube-css .vjs-controls > li.vjs-time-control { width: 75px; left: 27px; } .tube-css ul.vjs-controls > li.vjs-time-control { width: 75px; left: 27px; }
.tube-css .vjs-controls > li.vjs-volume-control { width: 50px; right: 30px; } .tube-css ul.vjs-controls > li.vjs-volume-control { width: 50px; right: 30px; }
.tube-css .vjs-controls > li.vjs-fullscreen-control { width: 30px; right: 0; } .tube-css ul.vjs-controls > li.vjs-fullscreen-control { width: 30px; right: 0; }
/* Removing borders on time & progress to join them */ /* Removing borders on time & progress to join them */
.tube-css .vjs-controls > li.vjs-progress-control { border-left: none; } .tube-css ul.vjs-controls > li.vjs-progress-control { border-left: none; }
.tube-css .vjs-controls > li.vjs-time-control { border-right: none; } .tube-css ul.vjs-controls > li.vjs-time-control { border-right: none; }
/* Play/Pause /* Play/Pause
-------------------------------------------------------------------------------- */ -------------------------------------------------------------------------------- */
.tube-css .vjs-controls > li:first-child { margin-left: 0; border-left-color: #b1b1b1; } .tube-css ul.vjs-controls > li:first-child { margin-left: 0; border-left-color: #b1b1b1; }
.tube-css .vjs-play-control.vjs-play span { border-left-color: #333; border-top-width: 7px; border-left-width: 13px; border-bottom-width: 7px; margin: 5px 0 0 7px; } .tube-css li.vjs-play-control.vjs-play span { border-left-color: #333; border-top-width: 7px; border-left-width: 13px; border-bottom-width: 7px; margin: 5px 0 0 7px; }
.tube-css .vjs-play-control.vjs-pause span { height: 14px; margin: 5px auto 0; border-left: 4px solid #333; border-right: 4px solid #333; } .tube-css li.vjs-play-control.vjs-pause span { height: 14px; margin: 5px auto 0; border-left: 4px solid #333; border-right: 4px solid #333; }
.tube-css .vjs-play-control.vjs-play:hover span { border-left-color: #CF1A1A; } .tube-css li.vjs-play-control.vjs-play:hover span { border-left-color: #CF1A1A; }
.tube-css .vjs-play-control.vjs-pause:hover span { border-left-color: #CF1A1A; border-right-color: #CF1A1A; } .tube-css li.vjs-play-control.vjs-pause:hover span { border-left-color: #CF1A1A; border-right-color: #CF1A1A; }
/* Time Display /* Time Display
-------------------------------------------------------------------------------- */ -------------------------------------------------------------------------------- */
.tube-css .vjs-controls .vjs-time-control { font-size: 11px; } .tube-css ul.vjs-controls li.vjs-time-control { font-size: 11px; }
.tube-css .vjs-controls .vjs-time-control span { line-height: 25px; /* Centering vertically */ } .tube-css ul.vjs-controls li.vjs-time-control span { line-height: 25px; /* Centering vertically */ }
/* Progress /* Progress
-------------------------------------------------------------------------------- */ -------------------------------------------------------------------------------- */
.tube-css .vjs-progress-holder { .tube-css ul.vjs-progress-holder {
margin-right: 10px; margin-right: 10px;
background-color: #b1b1b1; background-color: #b1b1b1;
background: #b1b1b1 -webkit-gradient(linear, left top, left bottom, from(#b1b1b1), to(#cacaca)) left top; background: #b1b1b1 -webkit-gradient(linear, left top, left bottom, from(#b1b1b1), to(#cacaca)) left top;
@ -51,17 +51,17 @@
border-color: #CACACA; border-bottom-color: #eaeaea; border-color: #CACACA; border-bottom-color: #eaeaea;
border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;
} }
.tube-css .vjs-progress-control .vjs-load-progress { background: #C89191; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; } .tube-css li.vjs-progress-control li.vjs-load-progress { background: #C89191; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; }
.tube-css .vjs-progress-control .vjs-play-progress { background: #f33; background: -webkit-gradient(linear, left top, left bottom, from(#f33), to(#CF1A1A)); background: -moz-linear-gradient(top, #f33, #CF1A1A); -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .tube-css li.vjs-progress-control li.vjs-play-progress { background: #f33; background: -webkit-gradient(linear, left top, left bottom, from(#f33), to(#CF1A1A)); background: -moz-linear-gradient(top, #f33, #CF1A1A); -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }
/* Volume /* Volume
-------------------------------------------------------------------------------- */ -------------------------------------------------------------------------------- */
.tube-css .vjs-volume-control ul { padding: 3px 0 0 0; } .tube-css li.vjs-volume-control ul { padding: 3px 0 0 0; }
.tube-css .vjs-volume-control ul li { border-bottom-color: #ccc; } .tube-css li.vjs-volume-control ul li { border-bottom-color: #ccc; }
/* Volume icon color */ /* Volume icon color */
.tube-css .vjs-volume-control ul li.vjs-volume-level-on { border-color: #333; } .tube-css li.vjs-volume-control ul li.vjs-volume-level-on { border-color: #333; }
/* Volume icon hovering color */ /* Volume icon hovering color */
.tube-css .vjs-volume-control:hover ul li.vjs-volume-level-on { border-color: #CF1A1A; } .tube-css li.vjs-volume-control:hover ul li.vjs-volume-level-on { border-color: #CF1A1A; }
/* Fullscreen /* Fullscreen
-------------------------------------------------------------------------------- */ -------------------------------------------------------------------------------- */

44
video-js/skins/vim.css
View File

@ -1,53 +1,53 @@
.vim-css .vjs-controls { .vim-css ul.vjs-controls {
height: 50px; opacity: 0.9; color: #fff; height: 50px; opacity: 0.9; color: #fff;
padding-left: 85px; /* Width of play button + margin */ padding-left: 85px; /* Width of play button + margin */
padding-right: 160px; /* Width of all the controls to the right of the progress control + margins */ padding-right: 160px; /* Width of all the controls to the right of the progress control + margins */
} }
.vim-css .vjs-controls > li { .vim-css ul.vjs-controls > li {
height: 32px; width: 25px; margin: 8px 0 0 0; padding: 0; text-align: center; background: rgba(23, 35, 34, 0.746094); height: 32px; width: 25px; margin: 8px 0 0 0; padding: 0; text-align: center; background: rgba(23, 35, 34, 0.746094);
border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;
box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;
} }
/* Placement of Control Items */ /* Placement of Control Items */
.vim-css .vjs-controls > li.vjs-play-control { width: 65px; left: 10px; } .vim-css ul.vjs-controls > li.vjs-play-control { width: 65px; left: 10px; }
.vim-css .vjs-controls > li.vjs-progress-control { width: 100%; position: relative; } .vim-css ul.vjs-controls > li.vjs-progress-control { width: 100%; position: relative; }
.vim-css .vjs-controls > li.vjs-time-control { width: 75px; right: 85px; } .vim-css ul.vjs-controls > li.vjs-time-control { width: 75px; right: 85px; }
.vim-css .vjs-controls > li.vjs-volume-control { width: 50px; right: 35px; } .vim-css ul.vjs-controls > li.vjs-volume-control { width: 50px; right: 35px; }
.vim-css .vjs-controls > li.vjs-fullscreen-control { width: 25px; right: 10px; } .vim-css ul.vjs-controls > li.vjs-fullscreen-control { width: 25px; right: 10px; }
/* Play/Pause /* 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 ul.vjs-controls li.vjs-play-control { margin: 0; height: 40px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
.vim-css .vjs-play-control.vjs-play span { border-left-color: #fff; border-top-width: 9px; border-left-width: 18px; border-bottom-width: 9px; margin: 11px 0 0 24px; } .vim-css li.vjs-play-control.vjs-play 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-play-control:hover { background: #00ADEF; } .vim-css li.vjs-play-control:hover { background: #00ADEF; }
.vim-css .vjs-play-control.vjs-pause span { width: 5px; height: 18px; margin: 5px auto 0; border-left: 5px solid #fff; border-right: 5px solid #fff; margin: 11px 0 0 24px; } .vim-css li.vjs-play-control.vjs-pause span { width: 5px; height: 18px; margin: 5px auto 0; border-left: 5px solid #fff; border-right: 5px solid #fff; margin: 11px 0 0 24px; }
/* Progress /* Progress
-------------------------------------------------------------------------------- */ -------------------------------------------------------------------------------- */
.vim-css .vjs-controls .vjs-progress-control { border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; } .vim-css ul.vjs-controls li.vjs-progress-control { border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; }
.vim-css .vjs-progress-control .vjs-progress-holder { height: 8px; padding: 1px; margin: 10px 5px 0 10px; border-color: #666666; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; } .vim-css li.vjs-progress-control ul.vjs-progress-holder { height: 8px; padding: 1px; margin: 10px 5px 0 10px; border-color: #666666; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; }
.vim-css .vjs-progress-control .vjs-play-progress { height: 8px; background: #00ADEF; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; } .vim-css li.vjs-progress-control li.vjs-play-progress { height: 8px; background: #00ADEF; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; }
.vim-css .vjs-progress-control .vjs-load-progress { height: 8px; background: #898F8F; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; } .vim-css li.vjs-progress-control li.vjs-load-progress { height: 8px; background: #898F8F; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; }
/* Time Display /* Time Display
-------------------------------------------------------------------------------- */ -------------------------------------------------------------------------------- */
.vim-css .vjs-controls .vjs-time-control { font-size: 11px; } .vim-css ul.vjs-controls li.vjs-time-control { font-size: 11px; }
.vim-css .vjs-controls .vjs-time-control span { line-height: 32px; /* Centering vertically */ } .vim-css ul.vjs-controls li.vjs-time-control span { line-height: 32px; /* Centering vertically */ }
/* Volume /* Volume
-------------------------------------------------------------------------------- */ -------------------------------------------------------------------------------- */
.vim-css .vjs-volume-control ul { padding: 7px 0 0 5px; width: 30px; } .vim-css li.vjs-volume-control ul { padding: 7px 0 0 5px; width: 30px; }
.vim-css .vjs-volume-control ul li { .vim-css li.vjs-volume-control ul li {
float: left; margin: 0 2px 0 0; padding: 0; list-style: none; width: 3px; height: 3px; border-bottom: 12px solid #666666; float: left; margin: 0 2px 0 0; padding: 0; list-style: none; width: 3px; height: 3px; border-bottom: 12px solid #666666;
-webkit-transition: all 100ms linear; -moz-transition: all 100ms linear; -webkit-transition: all 100ms linear; -moz-transition: all 100ms linear;
} }
.vim-css .vjs-volume-control ul li.vjs-volume-level-on { border-color: #00ADEF; } .vim-css li.vjs-volume-control ul li.vjs-volume-level-on { border-color: #00ADEF; }
.vim-css .vjs-volume-control ul li:hover { height: 0; border-bottom-width: 15px; } .vim-css li.vjs-volume-control ul li:hover { height: 0; border-bottom-width: 15px; }
/* Fullscreen /* Fullscreen
-------------------------------------------------------------------------------- */ -------------------------------------------------------------------------------- */
.vim-css .vjs-fullscreen-control ul { margin: 10px 0 0 0; } .vim-css .vjs-fullscreen-control ul { margin: 10px 0 0 0; }
.vim-css .vjs-controls .vjs-fullscreen-control { border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; } .vim-css ul.vjs-controls .vjs-fullscreen-control { border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; }
/* Making default fullscreen icon smaller */ /* Making default fullscreen icon smaller */
.vim-css .vjs-fullscreen-control ul li:nth-child(1) { margin: 0 4px 4px 0; border: none; border-top: 4px solid #fff; border-right: 4px solid rgba(0,0,0,0); } .vim-css .vjs-fullscreen-control ul li:nth-child(1) { margin: 0 4px 4px 0; border: none; border-top: 4px solid #fff; border-right: 4px solid rgba(0,0,0,0); }
.vim-css .vjs-fullscreen-control ul li:nth-child(2) { border: none; border-top: 4px solid #fff; border-left: 4px solid rgba(0,0,0,0); } .vim-css .vjs-fullscreen-control ul li:nth-child(2) { border: none; border-top: 4px solid #fff; border-left: 4px solid rgba(0,0,0,0); }

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

@ -11,10 +11,10 @@ video.video-js { background-color: #000; position: relative; }
/* Fullscreen styles for main elements */ /* Fullscreen styles for main elements */
.video-js-box.vjs-fullscreen { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: 1000; } .video-js-box.vjs-fullscreen { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: 1000; }
.video-js-box.vjs-fullscreen video.video-js { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1001; } .video-js-box.vjs-fullscreen video.video-js { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1001; }
.video-js-box.vjs-fullscreen .vjs-controls { z-index: 1002; } .video-js-box.vjs-fullscreen ul.vjs-controls { z-index: 1002; }
/* Poster Style */ /* Poster Style */
.video-js-box .vjs-poster { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .video-js-box img.vjs-poster { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; }
/* Subtiles Style */ /* Subtiles Style */
.video-js-box .vjs-subtitles { color:#fff; font-size: 20px; text-align: center; bottom: 20px; left: 0; right: 0; position: absolute; z-index: 1002; } .video-js-box .vjs-subtitles { color:#fff; font-size: 20px; text-align: center; bottom: 20px; left: 0; right: 0; position: absolute; z-index: 1002; }
@ -28,18 +28,19 @@ so you can upgrade to newer versions easier. */
/* Controls Layout /* Controls Layout
Using a Holy Grail type method to allow the progress bar holder to expand into all available space, Using a Holy Grail type method to allow the progress bar holder to expand into all available space,
but using abosolute positioning for individual controls. http://www.alistapart.com/articles/holygrail */ but using abosolute positioning for individual controls. http://www.alistapart.com/articles/holygrail */
.vjs-controls { .video-js-box ul.vjs-controls {
list-style: none; position: absolute; margin: 0; border: none; opacity: 0.85; color: #fff; list-style: none; position: absolute; margin: 0; border: none; opacity: 0.85; color: #fff;
display: none; /* Start hidden */ display: none; /* Start hidden */
left: 0; right: 0; /* 100% width of video-js-box */ left: 0; right: 0; /* 100% width of video-js-box */
height: 35px; /* Including any margin you want above or below control items */ height: 35px; /* Including any margin you want above or below control items */
padding-left: 35px; /* Width of play button + margin */ padding-left: 35px; /* Width of play button + margin */
padding-right: 165px; /* Width of all the controls to the right of the progress control + margins */ padding-right: 165px; /* Width of all the controls to the right of the progress control + margins */
padding-top: 0; padding-bottom: 0;
} }
/* Controls styles when below the video */ /* Controls styles when below the video */
.video-js-box.vjs-controls-below .vjs-controls { background-color: #000; } .video-js-box.vjs-controls-below ul.vjs-controls { background-color: #000; }
.vjs-controls > li { /* Direct li children of control bar */ .video-js-box ul.vjs-controls > li { /* Direct li children of control bar */
position: absolute; list-style: none; float: left; padding: 0; text-align: center; position: absolute; list-style: none; float: left; padding: 0; text-align: center;
height: 25px; /* Default height of individual controls */ height: 25px; /* Default height of individual controls */
margin: 5px 0 0 0; /* Top margin to put space between video and controls when controls are below */ margin: 5px 0 0 0; /* Top margin to put space between video and controls when controls are below */
@ -56,34 +57,34 @@ so you can upgrade to newer versions easier. */
box-shadow: 1px 1px 2px #000; -webkit-box-shadow: 1px 1px 2px #000; -moz-box-shadow: 1px 1px 2px #000; box-shadow: 1px 1px 2px #000; -webkit-box-shadow: 1px 1px 2px #000; -moz-box-shadow: 1px 1px 2px #000;
} }
/* Placement of Control Items */ /* Placement of Control Items */
.vjs-controls > li.vjs-play-control { width: 25px; left: 5px; } ul.vjs-controls > li.vjs-play-control { width: 25px; left: 5px; }
.vjs-controls > li.vjs-progress-control { width: 100%; position: relative; } ul.vjs-controls > li.vjs-progress-control { width: 100%; position: relative; }
.vjs-controls > li.vjs-time-control { width: 75px; right: 90px; } ul.vjs-controls > li.vjs-time-control { width: 75px; right: 90px; }
.vjs-controls > li.vjs-volume-control { width: 50px; right: 35px; } ul.vjs-controls > li.vjs-volume-control { width: 50px; right: 35px; }
.vjs-controls > li.vjs-fullscreen-control { width: 25px; right: 5px; } ul.vjs-controls > li.vjs-fullscreen-control { width: 25px; right: 5px; }
/* Removing curves on progress control and time control to join them. */ /* Removing curves on progress control and time control to join them. */
.vjs-controls > li.vjs-progress-control { ul.vjs-controls > li.vjs-progress-control {
border-top-right-radius: 0; -webkit-border-top-right-radius: 0; -moz-border-radius-topright: 0; border-top-right-radius: 0; -webkit-border-top-right-radius: 0; -moz-border-radius-topright: 0;
border-bottom-right-radius: 0; -webkit-border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0; border-bottom-right-radius: 0; -webkit-border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0;
} }
.vjs-controls > li.vjs-time-control { ul.vjs-controls > li.vjs-time-control {
border-top-left-radius: 0; -webkit-border-top-left-radius: 0; -moz-border-radius-topleft: 0; border-top-left-radius: 0; -webkit-border-top-left-radius: 0; -moz-border-radius-topleft: 0;
border-bottom-left-radius: 0; -webkit-border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0; border-bottom-left-radius: 0; -webkit-border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0;
} }
/* Play/Pause /* Play/Pause
-------------------------------------------------------------------------------- */ -------------------------------------------------------------------------------- */
.vjs-play-control { cursor: pointer !important; } li.vjs-play-control { cursor: pointer !important; }
.vjs-play-control span { display: block; font-size: 0; line-height: 0; } li.vjs-play-control span { display: block; font-size: 0; line-height: 0; }
.vjs-play-control.vjs-play span { li.vjs-play-control.vjs-play span {
width: 0; height: 0; margin: 8px 0 0 8px; width: 0; height: 0; margin: 8px 0 0 8px;
/* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */ /* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */
border-left: 10px solid #fff; /* Width & Color of play icon */ border-left: 10px solid #fff; /* Width & Color of play icon */
/* Height of play icon is total top & bottom border widths. Color is transparent. */ /* 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); border-top: 5px solid rgba(0,0,0,0); border-bottom: 5px solid rgba(0,0,0,0);
} }
.vjs-play-control.vjs-pause span { li.vjs-play-control.vjs-pause span {
width: 3px; height: 10px; margin: 8px auto 0; width: 3px; height: 10px; margin: 8px auto 0;
/* Drawing the pause bars with borders */ /* Drawing the pause bars with borders */
border-top: 0px; border-left: 3px solid #fff; border-bottom: 0px; border-right: 3px solid #fff; border-top: 0px; border-left: 3px solid #fff; border-bottom: 0px; border-right: 3px solid #fff;
@ -91,22 +92,22 @@ so you can upgrade to newer versions easier. */
/* Progress /* Progress
-------------------------------------------------------------------------------- */ -------------------------------------------------------------------------------- */
.vjs-progress-holder { /* Box containing play and load progresses */ ul.vjs-progress-holder { /* Box containing play and load progresses */
position: relative; list-style: none; padding: 0; overflow:hidden; cursor: pointer !important; position: relative; list-style: none; padding: 0; overflow:hidden; cursor: pointer !important;
height: 9px; border: 1px solid #777; height: 9px; border: 1px solid #777;
margin: 7px 1px 0 5px; /* Placement within the progress control item */ margin: 7px 1px 0 5px; /* Placement within the progress control item */
border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
} }
.vjs-progress-holder li { /* Progress Bars */ ul.vjs-progress-holder li { /* Progress Bars */
position: absolute; display: block; width: 0; height: 9px; position: absolute; display: block; width: 0; height: 9px; margin: 0; padding: 0; list-style: none;
border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
} }
.vjs-play-progress { li.vjs-play-progress {
/* Default */ background: #fff; /* Default */ background: #fff;
/* Webkit */ background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#777)); /* Webkit */ background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#777));
/* Firefox */ background: -moz-linear-gradient(top, #fff, #777); /* Firefox */ background: -moz-linear-gradient(top, #fff, #777);
} }
.vjs-load-progress { li.vjs-load-progress {
opacity: 0.8; opacity: 0.8;
/* Default */ background-color: #555; /* Default */ background-color: #555;
/* Webkit */ background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#aaa)); /* Webkit */ background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#aaa));
@ -115,53 +116,53 @@ so you can upgrade to newer versions easier. */
/* Time Display /* Time Display
-------------------------------------------------------------------------------- */ -------------------------------------------------------------------------------- */
.vjs-controls .vjs-time-control { font-size: 10px; line-height: 1; font-weight: normal; font-family: Helvetica, Arial, sans-serif; } ul.vjs-controls li.vjs-time-control { font-size: 10px; line-height: 1; font-weight: normal; font-family: Helvetica, Arial, sans-serif; }
.vjs-controls .vjs-time-control span { line-height: 25px; /* Centering vertically */ } ul.vjs-controls li.vjs-time-control span { line-height: 25px; /* Centering vertically */ }
/* Volume /* Volume
-------------------------------------------------------------------------------- */ -------------------------------------------------------------------------------- */
.vjs-volume-control { cursor: pointer !important; } li.vjs-volume-control { cursor: pointer !important; }
.vjs-volume-control ul { list-style: none; display: block; margin: 0 5px 0 5px; padding: 4px 0 0 0; } li.vjs-volume-control ul { list-style: none; display: block; margin: 0 5px 0 5px; padding: 4px 0 0 0; }
/* Drawing the volume icon using 6 li elements */ /* Drawing the volume icon using 6 li elements */
.vjs-volume-control ul li { /* Individual volume bars */ li.vjs-volume-control ul li { /* Individual volume bars */
list-style: none; float: left; padding: 0; list-style: none; float: left; padding: 0;
margin: 0 2px 0 0; /* Space between */ margin: 0 2px 0 0; /* Space between */
width: 5px; height: 0px; /* Total height is height + bottom border */ width: 5px; height: 0px; /* Total height is height + bottom border */
border-bottom: 18px solid #555; /* Default (off) color and height of visible portion */ border-bottom: 18px solid #555; /* Default (off) color and height of visible portion */
} }
.vjs-volume-control ul li.vjs-volume-level-on { border-color: #fff; /* Volume on bar color */ } li.vjs-volume-control ul li.vjs-volume-level-on { border-color: #fff; /* Volume on bar color */ }
/* Creating differnt bar heights through height (transparent) and bottom border (visible). */ /* Creating differnt bar heights through height (transparent) and bottom border (visible). */
.vjs-volume-control ul li:nth-child(1) { border-bottom-width: 2px; height: 16px; } li.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; } li.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; } li.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; } li.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; } li.vjs-volume-control ul li:nth-child(5) { border-bottom-width: 14px; height: 4px; }
.vjs-volume-control ul li:nth-child(6) { margin-right: 0; } li.vjs-volume-control ul li:nth-child(6) { margin-right: 0; }
/* Fullscreen /* Fullscreen
-------------------------------------------------------------------------------- */ -------------------------------------------------------------------------------- */
.vjs-fullscreen-control { cursor: pointer !important; } li.vjs-fullscreen-control { cursor: pointer !important; }
.vjs-fullscreen-control ul { li.vjs-fullscreen-control ul {
list-style: none; padding: 0; text-align: left; vertical-align: top; cursor: pointer !important; list-style: none; padding: 0; text-align: left; vertical-align: top; cursor: pointer !important;
margin: 5px 0 0 5px; /* Placement within the fullscreen control item */ margin: 5px 0 0 5px; /* Placement within the fullscreen control item */
width: 20px; height: 20px; width: 20px; height: 20px;
} }
/* Drawing the fullscreen icon using 4 li elements */ /* Drawing the fullscreen icon using 4 li elements */
.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; } li.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) { /* Top-left triangle */ li.vjs-fullscreen-control ul li:nth-child(1) { /* Top-left triangle */
margin-right: 3px; /* Space between top-left and top-right */ margin-right: 3px; /* Space between top-left and top-right */
margin-bottom: 3px; /* Space between top-left and bottom-left */ margin-bottom: 3px; /* Space between top-left and bottom-left */
border-top: 6px solid #fff; /* Height and color */ border-top: 6px solid #fff; /* Height and color */
border-right: 6px solid rgba(0,0,0,0); /* Width */ border-right: 6px solid rgba(0,0,0,0); /* Width */
} }
.vjs-fullscreen-control ul li:nth-child(2) { border-top: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); } li.vjs-fullscreen-control ul li:nth-child(2) { border-top: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); }
.vjs-fullscreen-control ul li:nth-child(3) { clear: both; margin: 0 3px 0 0; border-bottom: 6px solid #fff; border-right: 6px solid rgba(0,0,0,0); } li.vjs-fullscreen-control ul li:nth-child(3) { clear: both; margin: 0 3px 0 0; border-bottom: 6px solid #fff; border-right: 6px solid rgba(0,0,0,0); }
.vjs-fullscreen-control ul li:nth-child(4) { border-bottom: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); } li.vjs-fullscreen-control ul li:nth-child(4) { border-bottom: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); }
/* Icon when video is in fullscreen mode */ /* Icon when video is in fullscreen mode */
.vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(1) { border: none; border-bottom: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); } .vjs-fullscreen li.vjs-fullscreen-control ul li:nth-child(1) { border: none; border-bottom: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); }
.vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(2) { border: none; border-bottom: 6px solid #fff; border-right: 6px solid rgba(0,0,0,0); } .vjs-fullscreen li.vjs-fullscreen-control ul li:nth-child(2) { border: none; border-bottom: 6px solid #fff; border-right: 6px solid rgba(0,0,0,0); }
.vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(3) { border: none; border-top: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); } .vjs-fullscreen li.vjs-fullscreen-control ul li:nth-child(3) { border: none; border-top: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); }
.vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(4) { border: none; border-top: 6px solid #fff; border-right: 6px solid rgba(0,0,0,0); } .vjs-fullscreen li.vjs-fullscreen-control ul li:nth-child(4) { border: none; border-top: 6px solid #fff; border-right: 6px solid rgba(0,0,0,0); }
/* Download Links - Used for browsers that don't support any video. /* Download Links - Used for browsers that don't support any video.
-------------------------------------------------------------------------------- */ -------------------------------------------------------------------------------- */

198
video-js/video.js
View File

@ -50,10 +50,10 @@ var VideoJS = JRClass.extend({
}; };
// Override default options with global options // Override default options with global options
if (typeof VideoJS.options == "object") _V_.merge(this.options, VideoJS.options); if (typeof VideoJS.options == "object") { _V_.merge(this.options, VideoJS.options); }
// Override global options with options specific to this video // Override global options with options specific to this video
if (typeof setOptions == "object") _V_.merge(this.options, setOptions); if (typeof setOptions == "object") { _V_.merge(this.options, setOptions); }
this.box = this.video.parentNode; this.box = this.video.parentNode;
this.flashFallback = this.getFlashFallback(); this.flashFallback = this.getFlashFallback();
@ -67,7 +67,7 @@ var VideoJS = JRClass.extend({
// Check if browser can play HTML5 video // Check if browser can play HTML5 video
if (VideoJS.browserSupportsVideo()) { if (VideoJS.browserSupportsVideo()) {
// Force flash fallback when there's no supported source, or flash is dominant // Force flash fallback when there's no supported source, or flash is dominant
if (this.canPlaySource() == false || this.options.flashIsDominant) { if (!this.canPlaySource() || this.options.flashIsDominant) {
this.replaceWithFlash(); this.replaceWithFlash();
return; return;
} }
@ -75,12 +75,8 @@ var VideoJS = JRClass.extend({
return; return;
} }
// For iPads, controls need to always show because there's no hover if (VideoJS.isIpad()) { this.iPadFix(); }
// The controls also have to be below for the full-window mode to work. if (VideoJS.isAndroid()) { this.androidFix(); }
if (VideoJS.isIpad()) {
this.options.controlsBelow = true;
this.options.controlsHiding = false;
}
if (this.options.controlsBelow) { if (this.options.controlsBelow) {
_V_.addClass(this.box, "vjs-controls-below"); _V_.addClass(this.box, "vjs-controls-below");
@ -120,7 +116,7 @@ var VideoJS = JRClass.extend({
// Make a click on the video act like a click on the play button. // Make a click on the video act like a click on the play button.
this.video.addEventListener("click", this.onPlayControlClick.context(this), false); this.video.addEventListener("click", this.onPlayControlClick.context(this), false);
// Make a click on the poster act like a click on the play button. // Make a click on the poster act like a click on the play button.
if (this.poster) this.poster.addEventListener("click", this.onPlayControlClick.context(this), false); if (this.poster) { this.poster.addEventListener("click", this.onPlayControlClick.context(this), false); }
// Listen for drags on the progress bar // Listen for drags on the progress bar
this.progressHolder.addEventListener("mousedown", this.onProgressHolderMouseDown.context(this), false); this.progressHolder.addEventListener("mousedown", this.onProgressHolderMouseDown.context(this), false);
@ -140,14 +136,16 @@ var VideoJS = JRClass.extend({
this.fullscreenControl.addEventListener("click", this.onFullscreenControlClick.context(this), false); this.fullscreenControl.addEventListener("click", this.onFullscreenControlClick.context(this), false);
// Listen for the mouse move the video. Used to reveal the controller. // Listen for the mouse move the video. Used to reveal the controller.
this.video.addEventListener("mousemove", this.onVideoMouseMove.context(this), false); this.box.addEventListener("mousemove", this.onVideoMouseMove.context(this), false);
// Listen for the mouse moving out of the video. Used to hide the controller. // Listen for the mouse moving out of the video. Used to hide the controller.
this.video.addEventListener("mouseout", this.onVideoMouseOut.context(this), false); this.box.addEventListener("mouseout", this.onVideoMouseOut.context(this), false);
// Listen for the mouse move the poster image. Used to reveal the controller. if (this.poster) {
if (this.poster) this.poster.addEventListener("mousemove", this.onVideoMouseMove.context(this), false); // Listen for the mouse move the poster image. Used to reveal the controller.
// Listen for the mouse moving out of the poster image. Used to hide the controller. this.poster.addEventListener("mousemove", this.onVideoMouseMove.context(this), false);
if (this.poster) this.poster.addEventListener("mouseout", this.onVideoMouseOut.context(this), false); // Listen for the mouse moving out of the poster image. Used to hide the controller.
this.poster.addEventListener("mouseout", this.onVideoMouseOut.context(this), false);
}
// Have to add the mouseout to the controller too or it may not hide. // Have to add the mouseout to the controller too or it may not hide.
// For some reason the same isn't needed for mouseover // For some reason the same isn't needed for mouseover
@ -171,11 +169,11 @@ var VideoJS = JRClass.extend({
// Load subtitles. Based on http://matroska.org/technical/specs/subtitles/srt.html // Load subtitles. Based on http://matroska.org/technical/specs/subtitles/srt.html
this.subtitlesSource = this.video.getAttribute("data-subtitles"); this.subtitlesSource = this.video.getAttribute("data-subtitles");
if (this.subtitlesSource != null) { if (this.subtitlesSource !== null) {
this.loadSubtitles(); this.loadSubtitles();
this.buildSubtitles(); this.buildSubtitles();
} }
}, },
// Support older browsers that used "autobuffer" // Support older browsers that used "autobuffer"
@ -237,7 +235,7 @@ var VideoJS = JRClass.extend({
// Create the loading progress display // Create the loading progress display
this.loadProgress = _V_.createElement("li", { className: "vjs-load-progress" }); this.loadProgress = _V_.createElement("li", { className: "vjs-load-progress" });
this.progressHolder.appendChild(this.loadProgress) this.progressHolder.appendChild(this.loadProgress);
// Create the playing progress display // Create the playing progress display
this.playProgress = _V_.createElement("li", { className: "vjs-play-progress" }); this.playProgress = _V_.createElement("li", { className: "vjs-play-progress" });
@ -265,7 +263,7 @@ var VideoJS = JRClass.extend({
innerHTML: "<ul><li></li><li></li><li></li><li></li><li></li><li></li></ul>" innerHTML: "<ul><li></li><li></li><li></li><li></li><li></li><li></li></ul>"
}); });
this.controls.appendChild(this.volumeControl); this.controls.appendChild(this.volumeControl);
this.volumeDisplay = this.volumeControl.children[0] this.volumeDisplay = this.volumeControl.children[0];
// Crete the fullscreen control // Crete the fullscreen control
this.fullscreenControl = _V_.createElement("li", { this.fullscreenControl = _V_.createElement("li", {
@ -282,16 +280,14 @@ var VideoJS = JRClass.extend({
// Hide no-video download paragraph // Hide no-video download paragraph
hideLinksFallback: function(){ hideLinksFallback: function(){
if (this.options.linksHiding && this.linksFallback) this.linksFallback.style.display = "none"; if (this.options.linksHiding && this.linksFallback) { this.linksFallback.style.display = "none"; }
}, },
getFlashFallback: function(){ getFlashFallback: function(){
if (VideoJS.isIE()) return; if (VideoJS.isIE()) { return; }
var children = this.box.getElementsByClassName("vjs-flash-fallback"); var children = this.box.getElementsByClassName("vjs-flash-fallback");
for (var i=0,j=children.length; i<j; i++) { for (var i=0,j=children.length; i<j; i++) {
if (children[i].tagName.toUpperCase() == "OBJECT") { return children[i];
return children[i];
}
} }
}, },
@ -312,7 +308,7 @@ var VideoJS = JRClass.extend({
// Place controller relative to the video's position // Place controller relative to the video's position
positionController: function(){ positionController: function(){
// Make sure the controls are visible // Make sure the controls are visible
if (this.controls.style.display == 'none') return; if (this.controls.style.display == 'none') { return; }
// Sometimes the CSS styles haven't been applied to the controls yet // Sometimes the CSS styles haven't been applied to the controls yet
// when we're trying to calculate the height and position them correctly. // when we're trying to calculate the height and position them correctly.
@ -323,7 +319,7 @@ var VideoJS = JRClass.extend({
&& this.playControl.offsetWidth == this.timeControl.offsetWidth && this.playControl.offsetWidth == this.timeControl.offsetWidth
&& this.playControl.offsetWidth == this.volumeControl.offsetWidth) { && this.playControl.offsetWidth == this.volumeControl.offsetWidth) {
// Don't want to create an endless loop either. // Don't want to create an endless loop either.
if (!this.positionRetries) this.positionRetries = 1; if (!this.positionRetries) { this.positionRetries = 1; }
if (this.positionRetries++ < 100) { if (this.positionRetries++ < 100) {
this.controls.style.display = "none"; this.controls.style.display = "none";
setTimeout(this.showController.context(this),0); setTimeout(this.showController.context(this),0);
@ -356,7 +352,7 @@ var VideoJS = JRClass.extend({
// Hide the controller // Hide the controller
hideController: function(){ hideController: function(){
if (this.options.controlsHiding) this.controls.style.display = "none"; if (this.options.controlsHiding) { this.controls.style.display = "none"; }
}, },
// Update poster source from attribute or fallback image // Update poster source from attribute or fallback image
@ -364,7 +360,7 @@ var VideoJS = JRClass.extend({
updatePosterSource: function(){ updatePosterSource: function(){
if (!this.video.poster) { if (!this.video.poster) {
var images = this.video.getElementsByTagName("img"); var images = this.video.getElementsByTagName("img");
if (images.length > 0) this.video.poster = images[0].src; if (images.length > 0) { this.video.poster = images[0].src; }
} }
}, },
@ -386,7 +382,7 @@ var VideoJS = JRClass.extend({
// Add the video poster to the video's container, to fix autobuffer/preload bug // Add the video poster to the video's container, to fix autobuffer/preload bug
showPoster: function(){ showPoster: function(){
if (!this.poster) return; if (!this.poster) { return; }
this.poster.style.display = "block"; this.poster.style.display = "block";
this.positionPoster(); this.positionPoster();
}, },
@ -394,13 +390,13 @@ var VideoJS = JRClass.extend({
// Size the poster image // Size the poster image
positionPoster: function(){ positionPoster: function(){
// Only if the poster is visible // Only if the poster is visible
if (this.poster == false || this.poster.style.display == 'none') return; if (!this.poster || this.poster.style.display == 'none') { return; }
this.poster.style.height = this.video.offsetHeight + "px"; this.poster.style.height = this.video.offsetHeight + "px";
this.poster.style.width = this.video.offsetWidth + "px"; this.poster.style.width = this.video.offsetWidth + "px";
}, },
hidePoster: function(){ hidePoster: function(){
if (!this.poster) return; if (!this.poster) { return; }
this.poster.style.display = "none"; this.poster.style.display = "none";
}, },
@ -480,7 +476,7 @@ var VideoJS = JRClass.extend({
}, },
updateLoadProgress: function(){ updateLoadProgress: function(){
if (this.controls.style.display == 'none') return; if (this.controls.style.display == 'none') { return; }
this.loadProgress.style.width = (this.percentLoaded * (_V_.getComputedStyleValue(this.progressHolder, "width").replace("px", ""))) + "px"; this.loadProgress.style.width = (this.percentLoaded * (_V_.getComputedStyleValue(this.progressHolder, "width").replace("px", ""))) + "px";
}, },
@ -586,19 +582,19 @@ var VideoJS = JRClass.extend({
// Get the space between controls. For more flexible styling. // Get the space between controls. For more flexible styling.
getControlsPadding: function(){ getControlsPadding: function(){
return _V_.findPosX(this.playControl) - _V_.findPosX(this.controls) return _V_.findPosX(this.playControl) - _V_.findPosX(this.controls);
}, },
// When dynamically placing controls, if there are borders on the controls, it can break to a new line. // When dynamically placing controls, if there are borders on the controls, it can break to a new line.
getControlBorderAdjustment: function(){ getControlBorderAdjustment: function(){
var leftBorder = parseInt(_V_.getComputedStyleValue(this.playControl, "border-left-width").replace("px", "")); var leftBorder = parseInt(_V_.getComputedStyleValue(this.playControl, "border-left-width").replace("px", ""), 10);
var rightBorder = parseInt(_V_.getComputedStyleValue(this.playControl, "border-right-width").replace("px", "")); var rightBorder = parseInt(_V_.getComputedStyleValue(this.playControl, "border-right-width").replace("px", ""), 10);
return leftBorder + rightBorder; return leftBorder + rightBorder;
}, },
// Track & display the current play progress // Track & display the current play progress
trackPlayProgress: function(){ trackPlayProgress: function(){
if(this.playProgressInterval) clearInterval(this.playProgressInterval); if(this.playProgressInterval) { clearInterval(this.playProgressInterval); }
this.playProgressInterval = setInterval(function(){ this.updatePlayProgress(); }.context(this), 33); this.playProgressInterval = setInterval(function(){ this.updatePlayProgress(); }.context(this), 33);
}, },
@ -609,7 +605,7 @@ var VideoJS = JRClass.extend({
// Ajust the play progress bar's width based on the current play time // Ajust the play progress bar's width based on the current play time
updatePlayProgress: function(){ updatePlayProgress: function(){
if (this.controls.style.display == 'none') return; if (this.controls.style.display == 'none') { return; }
this.playProgress.style.width = ((this.video.currentTime / this.video.duration) * (_V_.getComputedStyleValue(this.progressHolder, "width").replace("px", ""))) + "px"; this.playProgress.style.width = ((this.video.currentTime / this.video.duration) * (_V_.getComputedStyleValue(this.progressHolder, "width").replace("px", ""))) + "px";
this.updateTimeDisplay(); this.updateTimeDisplay();
}, },
@ -620,7 +616,7 @@ var VideoJS = JRClass.extend({
this.playProgress.style.width = newProgress * (_V_.getComputedStyleValue(this.progressHolder, "width").replace("px", "")) + "px"; this.playProgress.style.width = newProgress * (_V_.getComputedStyleValue(this.progressHolder, "width").replace("px", "")) + "px";
this.updateTimeDisplay(); this.updateTimeDisplay();
// currentTime changed, reset subtitles // currentTime changed, reset subtitles
if (this.subtitles != null) { this.currentSubtitlePosition = 0; } if (!this.subtitles) { this.currentSubtitlePosition = 0; }
}, },
setPlayProgressWithEvent: function(event){ setPlayProgressWithEvent: function(event){
@ -631,7 +627,7 @@ var VideoJS = JRClass.extend({
// Update the displayed time (00:00) // Update the displayed time (00:00)
updateTimeDisplay: function(){ updateTimeDisplay: function(){
this.currentTimeDisplay.innerHTML = _V_.formatTime(this.video.currentTime); this.currentTimeDisplay.innerHTML = _V_.formatTime(this.video.currentTime);
if (this.video.duration) this.durationDisplay.innerHTML = _V_.formatTime(this.video.duration); if (this.video.duration) { this.durationDisplay.innerHTML = _V_.formatTime(this.video.duration); }
}, },
// Set a new volume based on where the user clicked on the volume control // Set a new volume based on where the user clicked on the volume control
@ -651,7 +647,7 @@ var VideoJS = JRClass.extend({
var volNum = Math.ceil(this.video.volume * 6); var volNum = Math.ceil(this.video.volume * 6);
for(var i=0; i<6; i++) { for(var i=0; i<6; i++) {
if (i < volNum) { if (i < volNum) {
_V_.addClass(this.volumeDisplay.children[i], "vjs-volume-level-on") _V_.addClass(this.volumeDisplay.children[i], "vjs-volume-level-on");
} else { } else {
_V_.removeClass(this.volumeDisplay.children[i], "vjs-volume-level-on"); _V_.removeClass(this.volumeDisplay.children[i], "vjs-volume-level-on");
} }
@ -728,9 +724,9 @@ var VideoJS = JRClass.extend({
try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
catch (e) {} catch (e) {}
try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
catch (e) {} catch (f) {}
try { return new ActiveXObject("Msxml2.XMLHTTP"); } try { return new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e) {} catch (g) {}
//Microsoft.XMLHTTP points to Msxml2.XMLHTTP.3.0 and is redundant //Microsoft.XMLHTTP points to Msxml2.XMLHTTP.3.0 and is redundant
throw new Error("This browser does not support XMLHttpRequest."); throw new Error("This browser does not support XMLHttpRequest.");
}; };
@ -745,9 +741,9 @@ var VideoJS = JRClass.extend({
request.send(); request.send();
}, },
parseSubtitles: function(text) { parseSubtitles: function(subText) {
var lines = text.replace("\r",'').split("\n"); var lines = subText.replace("\r",'').split("\n");
this.subtitles = new Array(); this.subtitles = [];
this.currentSubtitlePosition = 0; this.currentSubtitlePosition = 0;
var i = 0; var i = 0;
@ -756,7 +752,7 @@ var VideoJS = JRClass.extend({
var subtitle = {}; var subtitle = {};
// get the number // get the number
subtitle.id = lines[i++]; subtitle.id = lines[i++];
if (subtitle.id=="") { if (!subtitle.id) {
break; break;
} }
@ -766,7 +762,7 @@ var VideoJS = JRClass.extend({
subtitle.endTime = this.parseSubtitleTime(time[1]); subtitle.endTime = this.parseSubtitleTime(time[1]);
// get subtitle text // get subtitle text
var text = new Array(); var text = [];
while(lines[i].length>0 && lines[i]!="\r") { while(lines[i].length>0 && lines[i]!="\r") {
text.push(lines[i++]); text.push(lines[i++]);
} }
@ -784,14 +780,14 @@ var VideoJS = JRClass.extend({
var parts = timeText.split(':'); var parts = timeText.split(':');
var time = 0; var time = 0;
// hours => seconds // hours => seconds
time += parseInt(parts[0])*60*60; time += parseFloat(parts[0])*60*60;
// minutes => seconds // minutes => seconds
time += parseInt(parts[1])*60; time += parseFloat(parts[1])*60;
// get seconds // get seconds
var seconds = parts[2].split(','); var seconds = parts[2].split(',');
time += parseInt(seconds[0]); time += parseFloat(seconds[0]);
// add miliseconds // add miliseconds
time = time + parseInt(seconds[1])/1000; time = time + parseFloat(seconds[1])/1000;
return time; return time;
}, },
@ -806,7 +802,7 @@ var VideoJS = JRClass.extend({
onTimeUpdate: function(){ onTimeUpdate: function(){
// show the subtitles // show the subtitles
if (this.subtitles != null) { if (this.subtitles) {
var x = this.currentSubtitlePosition; var x = this.currentSubtitlePosition;
while (x<this.subtitles.length && this.video.currentTime>this.subtitles[x].endTime) { while (x<this.subtitles.length && this.video.currentTime>this.subtitles[x].endTime) {
@ -818,16 +814,37 @@ var VideoJS = JRClass.extend({
x = this.currentSubtitlePosition; x = this.currentSubtitlePosition;
} }
if (this.currentSubtitlePosition>=this.subtitles.length) if (this.currentSubtitlePosition>=this.subtitles.length) { return; }
return;
if (this.video.currentTime>=this.subtitles[x].startTime && this.video.currentTime<=this.subtitles[x].endTime) { if (this.video.currentTime>=this.subtitles[x].startTime && this.video.currentTime<=this.subtitles[x].endTime) {
this.subtitlesDiv.innerHTML = this.subtitles[x].text; this.subtitlesDiv.innerHTML = this.subtitles[x].text;
this.subtitles[x].showing = true; this.subtitles[x].showing = true;
} }
} }
},
/* Device Fixes
================================================================================ */
// For iPads, controls need to always show because there's no hover
// The controls also have to be below for the full-window mode to work.
iPadFix: function(){
this.options.controlsBelow = true;
this.options.controlsHiding = false;
},
// For Androids, add the MP4 source directly to the video tag otherwise it will not play
androidFix: function() {
var children = this.video.children;
for (var i=0,j=children.length; i<j; i++) {
if (children[i].tagName.toUpperCase() == "SOURCE" && children[i].src.match(/\.mp4$/i)) {
this.video.src = children[i].src;
}
}
} }
})
});
//////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////
// Convenience Functions (mini library) // Convenience Functions (mini library)
@ -835,18 +852,23 @@ var VideoJS = JRClass.extend({
//////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////
var _V_ = { var _V_ = {
addClass: function(element, classToAdd){ addClass: function(element, classToAdd){
if (element.className.split(/\s+/).lastIndexOf(classToAdd) == -1) { element.className = element.className == "" ? classToAdd : element.className + " " + classToAdd; } if (element.className.split(/\s+/).lastIndexOf(classToAdd) == -1) { element.className = element.className === "" ? classToAdd : element.className + " " + classToAdd; }
}, },
removeClass: function(element, classToRemove){ removeClass: function(element, classToRemove){
if (element.className.indexOf(classToRemove) == -1) return; if (element.className.indexOf(classToRemove) == -1) { return; }
var classNames = element.className.split(/\s+/); var classNames = element.className.split(/\s+/);
classNames.splice(classNames.lastIndexOf(classToRemove),1); classNames.splice(classNames.lastIndexOf(classToRemove),1);
element.className = classNames.join(" "); element.className = classNames.join(" ");
}, },
merge: function(obj1, obj2){ merge: function(obj1, obj2){
for(attrname in obj2){obj1[attrname]=obj2[attrname];} return obj1; for(var attrname in obj2){
if (obj2.hasOwnProperty(attrname)) {
obj1[attrname]=obj2[attrname];
}
}
return obj1;
}, },
createElement: function(tagName, attributes){ createElement: function(tagName, attributes){
@ -865,9 +887,9 @@ var _V_ = {
}, },
// Return seconds as MM:SS // Return seconds as MM:SS
formatTime: function(seconds) { formatTime: function(secs) {
seconds = Math.round(seconds); var seconds = Math.round(secs);
minutes = Math.floor(seconds / 60); var minutes = Math.floor(seconds / 60);
minutes = (minutes >= 10) ? minutes : "0" + minutes; minutes = (minutes >= 10) ? minutes : "0" + minutes;
seconds = Math.floor(seconds % 60); seconds = Math.floor(seconds % 60);
seconds = (seconds >= 10) ? seconds : "0" + seconds; seconds = (seconds >= 10) ? seconds : "0" + seconds;
@ -922,7 +944,7 @@ var _V_ = {
DOMReadyList: [], DOMReadyList: [],
addToDOMReady: function(fn){ addToDOMReady: function(fn){
if (_V_.DOMIsReady) { if (_V_.DOMIsReady) {
fn.call(document) fn.call(document);
} else { } else {
_V_.DOMReadyList.push(fn); _V_.DOMReadyList.push(fn);
} }
@ -930,19 +952,17 @@ var _V_ = {
DOMIsReady: false, DOMIsReady: false,
DOMReady: function(){ DOMReady: function(){
if (_V_.DOMIsReady) return; if (_V_.DOMIsReady) { return; }
if (!document.body) { return setTimeout(_V_.DOMReady, 13); } if (!document.body) { return setTimeout(_V_.DOMReady, 13); }
_V_.DOMIsReady = true; _V_.DOMIsReady = true;
if (_V_.DOMReadyList) { if (_V_.DOMReadyList) {
for (var i=0; i<_V_.DOMReadyList.length; i++) { for (var i=0; i<_V_.DOMReadyList.length; i++) {
_V_.DOMReadyList[i].call(document);
_V_.DOMReadyList[i].call(document)
} }
_V_.DOMReadyList = null; _V_.DOMReadyList = null;
} }
} }
};
}
_V_.bindDOMReady(); _V_.bindDOMReady();
//////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////
@ -955,12 +975,12 @@ VideoJS.setupAllWhenReady = function(options){
// Options is stored globally, and added ot any new player on init // Options is stored globally, and added ot any new player on init
VideoJS.options = options; VideoJS.options = options;
VideoJS.DOMReady(VideoJS.setup); VideoJS.DOMReady(VideoJS.setup);
} };
// Run the supplied function when the DOM is ready // Run the supplied function when the DOM is ready
VideoJS.DOMReady = function(fn){ VideoJS.DOMReady = function(fn){
_V_.addToDOMReady(fn); _V_.addToDOMReady(fn);
} };
// Set up a specific video or array of video elements // Set up a specific video or array of video elements
// "video" can be: // "video" can be:
@ -994,7 +1014,7 @@ VideoJS.setup = function(videos, options){
// Return one or all depending on what was passed in // Return one or all depending on what was passed in
return (returnSingular) ? playerList[0] : playerList; return (returnSingular) ? playerList[0] : playerList;
} };
// Find video tags with the video-js class // Find video tags with the video-js class
VideoJS.getVideoJSTags = function() { VideoJS.getVideoJSTags = function() {
@ -1009,47 +1029,51 @@ VideoJS.getVideoJSTags = function() {
} }
return videoJSTags; return videoJSTags;
} };
// Check if the browser supports video. // Check if the browser supports video.
VideoJS.browserSupportsVideo = function() { VideoJS.browserSupportsVideo = function() {
if (typeof VideoJS.videoSupport != "undefined") return VideoJS.videoSupport; if (typeof VideoJS.videoSupport != "undefined") { return VideoJS.videoSupport; }
return VideoJS.videoSupport = !!document.createElement('video').canPlayType; VideoJS.videoSupport = !!document.createElement('video').canPlayType;
} return VideoJS.videoSupport;
};
VideoJS.getFlashVersion = function(){ VideoJS.getFlashVersion = function(){
// Cache Version // Cache Version
if (typeof VideoJS.flashVersion != "undefined") return VideoJS.flashVersion; if (typeof VideoJS.flashVersion != "undefined") { return VideoJS.flashVersion; }
var version = 0; var version = 0;
if (typeof navigator.plugins != "undefined" && typeof navigator.plugins["Shockwave Flash"] == "object") { if (typeof navigator.plugins != "undefined" && typeof navigator.plugins["Shockwave Flash"] == "object") {
desc = navigator.plugins["Shockwave Flash"].description; desc = navigator.plugins["Shockwave Flash"].description;
if (desc && !(typeof navigator.mimeTypes != "undefined" && navigator.mimeTypes["application/x-shockwave-flash"] && !navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin)) { if (desc && !(typeof navigator.mimeTypes != "undefined" && navigator.mimeTypes["application/x-shockwave-flash"] && !navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin)) {
version = parseInt(desc.match(/^.*\s+([^\s]+)\.[^\s]+\s+[^\s]+$/)[1]); version = parseInt(desc.match(/^.*\s+([^\s]+)\.[^\s]+\s+[^\s]+$/)[1], 10);
} }
} else if (typeof window.ActiveXObject != "undefined") { } else if (typeof window.ActiveXObject != "undefined") {
try { try {
var testObject = new ActiveXObject("ShockwaveFlash.ShockwaveFlash"); var testObject = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
if (testObject) { if (testObject) {
version = parseInt(testObject.GetVariable("$version").match(/^[^\s]+\s(\d+)/)[1]); version = parseInt(testObject.GetVariable("$version").match(/^[^\s]+\s(\d+)/)[1], 10);
} }
} }
catch(e) {} catch(e) {}
} }
return VideoJS.flashVersion = version; VideoJS.flashVersion = version;
} return VideoJS.flashVersion;
};
VideoJS.isIE = function(){ return !+"\v1"; } VideoJS.isIE = function(){ return !+"\v1"; };
VideoJS.isIpad = function(){ return navigator.userAgent.match(/iPad/i) != null; } VideoJS.isIpad = function(){ return navigator.userAgent.match(/iPad/i) !== null; };
VideoJS.isIphone = function(){ return navigator.userAgent.match(/iPhone/i) !== null; };
VideoJS.isAndroid = function(){ return navigator.userAgent.match(/Android/i) !== null; };
// Allows for binding context to functions // Allows for binding context to functions
// when using in event listeners and timeouts // when using in event listeners and timeouts
Function.prototype.context = function(obj) { Function.prototype.context = function(obj) {
var method = this var method = this;
temp = function() { temp = function() {
return method.apply(obj, arguments) return method.apply(obj, arguments);
} };
return temp return temp;
} };
// jQuery Plugin // jQuery Plugin
if (window.jQuery) { if (window.jQuery) {