mirror of
https://github.com/videojs/video.js.git
synced 2025-01-02 06:32:07 +02:00
Updated to latest version
This commit is contained in:
Steve Heffernan
parent
6fec224945
commit
548554fbe2
@ -1,5 +1,7 @@
|
||||
VideoJS - [HTML5 Video Player](http://videojs.com)
|
||||
==================================================
|
||||
Version 1.1.1
|
||||
|
||||
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.
|
||||
@ -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/).
|
||||
|
||||
Contributors (Github Username)
|
||||
------------------------------
|
||||
heff, dz0ny, sentientbit, tvdeyen, brandonarbini, gordonbrander, Shraymonks, albertogasparin, sandaru1, nicholasbs, majornista
|
||||
|
||||
|
||||
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>
|
||||
<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.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. -->
|
||||
<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">
|
||||
@ -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>
|
||||
<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.ogg">Ogg</a><br>
|
||||
<a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a><br>
|
||||
<!-- 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>
|
||||
</div>
|
||||
<!-- 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
|
||||
|
||||
@ -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>
|
||||
<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.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. -->
|
||||
<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">
|
||||
@ -90,9 +90,9 @@
|
||||
<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.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. -->
|
||||
<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>
|
||||
</div>
|
||||
<!-- End VideoJS -->
|
||||
|
||||
@ -1,77 +1,77 @@
|
||||
.hu-css .vjs-controls {
|
||||
.hu-css ul.vjs-controls {
|
||||
height: 47px; opacity: 0.95; color: #fff;
|
||||
padding-left: 84px; /* Width of play button + margin */
|
||||
padding-right: 0px; /* Width of all the controls to the right of the progress control + margins */
|
||||
background: #3A3835;
|
||||
}
|
||||
|
||||
.hu-css .vjs-controls > li {
|
||||
.hu-css ul.vjs-controls > li {
|
||||
background: none;
|
||||
border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;
|
||||
box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;
|
||||
}
|
||||
|
||||
/* Top Level Items */
|
||||
.hu-css .vjs-controls > li.vjs-play-control,
|
||||
.hu-css .vjs-controls > li.vjs-volume-control,
|
||||
.hu-css .vjs-controls > li.vjs-fullscreen-control {
|
||||
.hu-css ul.vjs-controls > li.vjs-play-control,
|
||||
.hu-css ul.vjs-controls > li.vjs-volume-control,
|
||||
.hu-css ul.vjs-controls > li.vjs-fullscreen-control {
|
||||
bottom: 20px; height: 27px;
|
||||
}
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* Placement of Control Items */
|
||||
.hu-css .vjs-controls > li.vjs-play-control { width: 33px; left: 0px; }
|
||||
.hu-css .vjs-controls > li.vjs-progress-control { width: 100%; position: relative; }
|
||||
.hu-css .vjs-controls > li.vjs-time-control { width: 84px; left: 0px; }
|
||||
.hu-css .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-play-control { width: 33px; left: 0px; }
|
||||
.hu-css ul.vjs-controls > li.vjs-progress-control { width: 100%; position: relative; }
|
||||
.hu-css ul.vjs-controls > li.vjs-time-control { width: 84px; left: 0px; }
|
||||
.hu-css ul.vjs-controls > li.vjs-volume-control { width: 43px; right: 44px; }
|
||||
.hu-css ul.vjs-controls > li.vjs-fullscreen-control { width: 43px; right: 0px; }
|
||||
|
||||
/* Play/Pause
|
||||
-------------------------------------------------------------------------------- */
|
||||
.hu-css .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 .vjs-play-control:hover { background-color: #000; }
|
||||
.hu-css li.vjs-play-control.vjs-play span { margin: 9px 0 0 12px; }
|
||||
.hu-css li.vjs-play-control.vjs-pause span { margin: 9px 0 0 12px; }
|
||||
.hu-css li.vjs-play-control:hover { background-color: #000; }
|
||||
|
||||
/* 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;
|
||||
margin: 0px 0px 0 0px; /* Placement within the progress control item */
|
||||
background: #000;
|
||||
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 .vjs-play-progress {
|
||||
.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 li.vjs-play-progress {
|
||||
/* Default */ background: #777;
|
||||
/* Webkit */ background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#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
|
||||
-------------------------------------------------------------------------------- */
|
||||
.hu-css .vjs-controls .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 { font-size: 11px; background: #000; }
|
||||
.hu-css ul.vjs-controls li.vjs-time-control span { line-height: 19px; /* Centering vertically */ }
|
||||
|
||||
/* Volume
|
||||
-------------------------------------------------------------------------------- */
|
||||
/*.hu-css .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 .vjs-volume-control ul li { /* Individual volume bars */
|
||||
/*.hu-css li.vjs-volume-control:hover { background-color: #000; }*/
|
||||
.hu-css li.vjs-volume-control ul { margin: 0 5px 0 5px; padding: 9px 0 0 0; }
|
||||
.hu-css li.vjs-volume-control ul li { /* Individual volume bars */
|
||||
margin: 0 2px 0 0; /* Space between */
|
||||
width: 3px; height: 0px; /* Total height is height + bottom border */
|
||||
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). */
|
||||
.hu-css .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 .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 .vjs-volume-control ul li:nth-child(5) { border-bottom-width: 10px; height: 2px; }
|
||||
.hu-css li.vjs-volume-control ul li:nth-child(1) { border-bottom-width: 2px; height: 10px; }
|
||||
.hu-css li.vjs-volume-control ul li:nth-child(2) { border-bottom-width: 4px; height: 8px; }
|
||||
.hu-css li.vjs-volume-control ul li:nth-child(3) { border-bottom-width: 6px; height: 6px; }
|
||||
.hu-css li.vjs-volume-control ul li:nth-child(4) { border-bottom-width: 8px; height: 4px; }
|
||||
.hu-css li.vjs-volume-control ul li:nth-child(5) { border-bottom-width: 10px; height: 2px; }
|
||||
|
||||
/* Fullscreen
|
||||
-------------------------------------------------------------------------------- */
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.tube-css .vjs-controls {
|
||||
.tube-css ul.vjs-controls {
|
||||
opacity: 1; color: #000;
|
||||
height: 25px;
|
||||
padding-left: 102px; /* Width of play button + margin */
|
||||
@ -9,7 +9,7 @@
|
||||
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;
|
||||
border: 1px solid #b1b1b1; border-left-color: #eee;
|
||||
border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;
|
||||
@ -17,33 +17,33 @@
|
||||
}
|
||||
|
||||
/* Placement of Control Items */
|
||||
.tube-css .vjs-controls > li.vjs-play-control { width: 25px; left: 0; }
|
||||
.tube-css .vjs-controls > li.vjs-progress-control { width: 100%; position: relative; }
|
||||
.tube-css .vjs-controls > li.vjs-time-control { width: 75px; left: 27px; }
|
||||
.tube-css .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-play-control { width: 25px; left: 0; }
|
||||
.tube-css ul.vjs-controls > li.vjs-progress-control { width: 100%; position: relative; }
|
||||
.tube-css ul.vjs-controls > li.vjs-time-control { width: 75px; left: 27px; }
|
||||
.tube-css ul.vjs-controls > li.vjs-volume-control { width: 50px; right: 30px; }
|
||||
.tube-css ul.vjs-controls > li.vjs-fullscreen-control { width: 30px; right: 0; }
|
||||
|
||||
/* Removing borders on time & progress to join them */
|
||||
.tube-css .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-progress-control { border-left: none; }
|
||||
.tube-css ul.vjs-controls > li.vjs-time-control { border-right: none; }
|
||||
|
||||
|
||||
/* Play/Pause
|
||||
-------------------------------------------------------------------------------- */
|
||||
.tube-css .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 .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 .vjs-play-control.vjs-pause:hover span { border-left-color: #CF1A1A; border-right-color: #CF1A1A; }
|
||||
.tube-css ul.vjs-controls > li:first-child { margin-left: 0; border-left-color: #b1b1b1; }
|
||||
.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 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 li.vjs-play-control.vjs-play:hover span { border-left-color: #CF1A1A; }
|
||||
.tube-css li.vjs-play-control.vjs-pause:hover span { border-left-color: #CF1A1A; border-right-color: #CF1A1A; }
|
||||
|
||||
/* Time Display
|
||||
-------------------------------------------------------------------------------- */
|
||||
.tube-css .vjs-controls .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 { font-size: 11px; }
|
||||
.tube-css ul.vjs-controls li.vjs-time-control span { line-height: 25px; /* Centering vertically */ }
|
||||
|
||||
/* Progress
|
||||
-------------------------------------------------------------------------------- */
|
||||
.tube-css .vjs-progress-holder {
|
||||
.tube-css ul.vjs-progress-holder {
|
||||
margin-right: 10px;
|
||||
background-color: #b1b1b1;
|
||||
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-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 .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-load-progress { background: #C89191; border-radius: 0; -webkit-border-radius: 0; -moz-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
|
||||
-------------------------------------------------------------------------------- */
|
||||
.tube-css .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 { padding: 3px 0 0 0; }
|
||||
.tube-css li.vjs-volume-control ul li { border-bottom-color: #ccc; }
|
||||
/* 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 */
|
||||
.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
|
||||
-------------------------------------------------------------------------------- */
|
||||
|
||||
@ -1,53 +1,53 @@
|
||||
.vim-css .vjs-controls {
|
||||
.vim-css ul.vjs-controls {
|
||||
height: 50px; opacity: 0.9; color: #fff;
|
||||
padding-left: 85px; /* Width of play button + margin */
|
||||
padding-right: 160px; /* Width of all the controls to the right of the progress control + margins */
|
||||
}
|
||||
.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);
|
||||
border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;
|
||||
box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;
|
||||
}
|
||||
/* Placement of Control Items */
|
||||
.vim-css .vjs-controls > li.vjs-play-control { width: 65px; left: 10px; }
|
||||
.vim-css .vjs-controls > li.vjs-progress-control { width: 100%; position: relative; }
|
||||
.vim-css .vjs-controls > li.vjs-time-control { width: 75px; right: 85px; }
|
||||
.vim-css .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-play-control { width: 65px; left: 10px; }
|
||||
.vim-css ul.vjs-controls > li.vjs-progress-control { width: 100%; position: relative; }
|
||||
.vim-css ul.vjs-controls > li.vjs-time-control { width: 75px; right: 85px; }
|
||||
.vim-css ul.vjs-controls > li.vjs-volume-control { width: 50px; right: 35px; }
|
||||
.vim-css ul.vjs-controls > li.vjs-fullscreen-control { width: 25px; right: 10px; }
|
||||
|
||||
/* Play/Pause
|
||||
-------------------------------------------------------------------------------- */
|
||||
.vim-css .vjs-controls .vjs-play-control { margin: 0; height: 40px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
|
||||
.vim-css .vjs-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 .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 ul.vjs-controls li.vjs-play-control { margin: 0; height: 40px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
|
||||
.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 li.vjs-play-control:hover { background: #00ADEF; }
|
||||
.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
|
||||
-------------------------------------------------------------------------------- */
|
||||
.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 .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 .vjs-progress-control .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 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 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 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 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
|
||||
-------------------------------------------------------------------------------- */
|
||||
.vim-css .vjs-controls .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 { font-size: 11px; }
|
||||
.vim-css ul.vjs-controls li.vjs-time-control span { line-height: 32px; /* Centering vertically */ }
|
||||
|
||||
/* Volume
|
||||
-------------------------------------------------------------------------------- */
|
||||
.vim-css .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 { padding: 7px 0 0 5px; width: 30px; }
|
||||
.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;
|
||||
-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 .vjs-volume-control ul li:hover { height: 0; border-bottom-width: 15px; }
|
||||
.vim-css li.vjs-volume-control ul li.vjs-volume-level-on { border-color: #00ADEF; }
|
||||
.vim-css li.vjs-volume-control ul li:hover { height: 0; border-bottom-width: 15px; }
|
||||
|
||||
/* Fullscreen
|
||||
-------------------------------------------------------------------------------- */
|
||||
.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 */
|
||||
.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); }
|
||||
|
||||
@ -11,10 +11,10 @@ video.video-js { background-color: #000; position: relative; }
|
||||
/* 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 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 */
|
||||
.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 */
|
||||
.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
|
||||
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 */
|
||||
.vjs-controls {
|
||||
.video-js-box ul.vjs-controls {
|
||||
list-style: none; position: absolute; margin: 0; border: none; opacity: 0.85; color: #fff;
|
||||
display: none; /* Start hidden */
|
||||
left: 0; right: 0; /* 100% width of video-js-box */
|
||||
height: 35px; /* Including any margin you want above or below control items */
|
||||
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-top: 0; padding-bottom: 0;
|
||||
}
|
||||
/* 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;
|
||||
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 */
|
||||
@ -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;
|
||||
}
|
||||
/* Placement of Control Items */
|
||||
.vjs-controls > li.vjs-play-control { width: 25px; left: 5px; }
|
||||
.vjs-controls > li.vjs-progress-control { width: 100%; position: relative; }
|
||||
.vjs-controls > li.vjs-time-control { width: 75px; right: 90px; }
|
||||
.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-play-control { width: 25px; left: 5px; }
|
||||
ul.vjs-controls > li.vjs-progress-control { width: 100%; position: relative; }
|
||||
ul.vjs-controls > li.vjs-time-control { width: 75px; right: 90px; }
|
||||
ul.vjs-controls > li.vjs-volume-control { width: 50px; right: 35px; }
|
||||
ul.vjs-controls > li.vjs-fullscreen-control { width: 25px; right: 5px; }
|
||||
|
||||
/* 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-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-bottom-left-radius: 0; -webkit-border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0;
|
||||
}
|
||||
|
||||
/* Play/Pause
|
||||
-------------------------------------------------------------------------------- */
|
||||
.vjs-play-control { cursor: pointer !important; }
|
||||
.vjs-play-control span { display: block; font-size: 0; line-height: 0; }
|
||||
.vjs-play-control.vjs-play span {
|
||||
li.vjs-play-control { cursor: pointer !important; }
|
||||
li.vjs-play-control span { display: block; font-size: 0; line-height: 0; }
|
||||
li.vjs-play-control.vjs-play 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-play-control.vjs-pause span {
|
||||
li.vjs-play-control.vjs-pause 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;
|
||||
@ -91,22 +92,22 @@ so you can upgrade to newer versions easier. */
|
||||
|
||||
/* 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;
|
||||
height: 9px; border: 1px solid #777;
|
||||
margin: 7px 1px 0 5px; /* Placement within the progress control item */
|
||||
border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
|
||||
}
|
||||
.vjs-progress-holder li { /* Progress Bars */
|
||||
position: absolute; display: block; width: 0; height: 9px;
|
||||
ul.vjs-progress-holder li { /* Progress Bars */
|
||||
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;
|
||||
}
|
||||
.vjs-play-progress {
|
||||
li.vjs-play-progress {
|
||||
/* 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-load-progress {
|
||||
li.vjs-load-progress {
|
||||
opacity: 0.8;
|
||||
/* Default */ background-color: #555;
|
||||
/* 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
|
||||
-------------------------------------------------------------------------------- */
|
||||
.vjs-controls .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 { font-size: 10px; line-height: 1; font-weight: normal; font-family: Helvetica, Arial, sans-serif; }
|
||||
ul.vjs-controls li.vjs-time-control span { line-height: 25px; /* Centering vertically */ }
|
||||
|
||||
/* Volume
|
||||
-------------------------------------------------------------------------------- */
|
||||
.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 { cursor: pointer !important; }
|
||||
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 */
|
||||
.vjs-volume-control ul li { /* Individual volume bars */
|
||||
li.vjs-volume-control ul li { /* Individual volume bars */
|
||||
list-style: none; float: left; padding: 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-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). */
|
||||
.vjs-volume-control ul li:nth-child(1) { border-bottom-width: 2px; height: 16px; }
|
||||
.vjs-volume-control ul li:nth-child(2) { border-bottom-width: 4px; height: 14px; }
|
||||
.vjs-volume-control ul li:nth-child(3) { border-bottom-width: 7px; height: 11px; }
|
||||
.vjs-volume-control ul li:nth-child(4) { border-bottom-width: 10px; height: 8px; }
|
||||
.vjs-volume-control ul li:nth-child(5) { border-bottom-width: 14px; height: 4px; }
|
||||
.vjs-volume-control ul li:nth-child(6) { margin-right: 0; }
|
||||
li.vjs-volume-control ul li:nth-child(1) { border-bottom-width: 2px; height: 16px; }
|
||||
li.vjs-volume-control ul li:nth-child(2) { border-bottom-width: 4px; height: 14px; }
|
||||
li.vjs-volume-control ul li:nth-child(3) { border-bottom-width: 7px; height: 11px; }
|
||||
li.vjs-volume-control ul li:nth-child(4) { border-bottom-width: 10px; height: 8px; }
|
||||
li.vjs-volume-control ul li:nth-child(5) { border-bottom-width: 14px; height: 4px; }
|
||||
li.vjs-volume-control ul li:nth-child(6) { margin-right: 0; }
|
||||
|
||||
/* Fullscreen
|
||||
-------------------------------------------------------------------------------- */
|
||||
.vjs-fullscreen-control { cursor: pointer !important; }
|
||||
.vjs-fullscreen-control ul {
|
||||
li.vjs-fullscreen-control { cursor: pointer !important; }
|
||||
li.vjs-fullscreen-control ul {
|
||||
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 */
|
||||
width: 20px; height: 20px;
|
||||
}
|
||||
/* 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; }
|
||||
.vjs-fullscreen-control ul li:nth-child(1) { /* Top-left triangle */
|
||||
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; }
|
||||
li.vjs-fullscreen-control ul li:nth-child(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-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); }
|
||||
.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(2) { border-top: 6px solid #fff; border-left: 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); }
|
||||
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 */
|
||||
.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 .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 .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(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(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(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(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.
|
||||
-------------------------------------------------------------------------------- */
|
||||
|
||||
@ -50,10 +50,10 @@ var VideoJS = JRClass.extend({
|
||||
};
|
||||
|
||||
// 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
|
||||
if (typeof setOptions == "object") _V_.merge(this.options, setOptions);
|
||||
if (typeof setOptions == "object") { _V_.merge(this.options, setOptions); }
|
||||
|
||||
this.box = this.video.parentNode;
|
||||
this.flashFallback = this.getFlashFallback();
|
||||
@ -67,7 +67,7 @@ var VideoJS = JRClass.extend({
|
||||
// Check if browser can play HTML5 video
|
||||
if (VideoJS.browserSupportsVideo()) {
|
||||
// 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();
|
||||
return;
|
||||
}
|
||||
@ -75,12 +75,8 @@ var VideoJS = JRClass.extend({
|
||||
return;
|
||||
}
|
||||
|
||||
// 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.
|
||||
if (VideoJS.isIpad()) {
|
||||
this.options.controlsBelow = true;
|
||||
this.options.controlsHiding = false;
|
||||
}
|
||||
if (VideoJS.isIpad()) { this.iPadFix(); }
|
||||
if (VideoJS.isAndroid()) { this.androidFix(); }
|
||||
|
||||
if (this.options.controlsBelow) {
|
||||
_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.
|
||||
this.video.addEventListener("click", this.onPlayControlClick.context(this), false);
|
||||
// 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
|
||||
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);
|
||||
|
||||
// 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.
|
||||
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) this.poster.addEventListener("mousemove", this.onVideoMouseMove.context(this), false);
|
||||
// Listen for the mouse moving out of the poster image. Used to hide the controller.
|
||||
if (this.poster) this.poster.addEventListener("mouseout", this.onVideoMouseOut.context(this), false);
|
||||
if (this.poster) {
|
||||
// Listen for the mouse move the poster image. Used to reveal the controller.
|
||||
this.poster.addEventListener("mousemove", this.onVideoMouseMove.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.
|
||||
// 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
|
||||
this.subtitlesSource = this.video.getAttribute("data-subtitles");
|
||||
if (this.subtitlesSource != null) {
|
||||
if (this.subtitlesSource !== null) {
|
||||
this.loadSubtitles();
|
||||
this.buildSubtitles();
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
|
||||
// Support older browsers that used "autobuffer"
|
||||
@ -237,7 +235,7 @@ var VideoJS = JRClass.extend({
|
||||
|
||||
// Create the loading progress display
|
||||
this.loadProgress = _V_.createElement("li", { className: "vjs-load-progress" });
|
||||
this.progressHolder.appendChild(this.loadProgress)
|
||||
this.progressHolder.appendChild(this.loadProgress);
|
||||
|
||||
// Create the playing progress display
|
||||
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>"
|
||||
});
|
||||
this.controls.appendChild(this.volumeControl);
|
||||
this.volumeDisplay = this.volumeControl.children[0]
|
||||
this.volumeDisplay = this.volumeControl.children[0];
|
||||
|
||||
// Crete the fullscreen control
|
||||
this.fullscreenControl = _V_.createElement("li", {
|
||||
@ -282,16 +280,14 @@ var VideoJS = JRClass.extend({
|
||||
|
||||
// Hide no-video download paragraph
|
||||
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(){
|
||||
if (VideoJS.isIE()) return;
|
||||
if (VideoJS.isIE()) { return; }
|
||||
var children = this.box.getElementsByClassName("vjs-flash-fallback");
|
||||
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
|
||||
positionController: function(){
|
||||
// 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
|
||||
// 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.volumeControl.offsetWidth) {
|
||||
// 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) {
|
||||
this.controls.style.display = "none";
|
||||
setTimeout(this.showController.context(this),0);
|
||||
@ -356,7 +352,7 @@ var VideoJS = JRClass.extend({
|
||||
|
||||
// Hide the controller
|
||||
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
|
||||
@ -364,7 +360,7 @@ var VideoJS = JRClass.extend({
|
||||
updatePosterSource: function(){
|
||||
if (!this.video.poster) {
|
||||
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
|
||||
showPoster: function(){
|
||||
if (!this.poster) return;
|
||||
if (!this.poster) { return; }
|
||||
this.poster.style.display = "block";
|
||||
this.positionPoster();
|
||||
},
|
||||
@ -394,13 +390,13 @@ var VideoJS = JRClass.extend({
|
||||
// Size the poster image
|
||||
positionPoster: function(){
|
||||
// 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.width = this.video.offsetWidth + "px";
|
||||
},
|
||||
|
||||
hidePoster: function(){
|
||||
if (!this.poster) return;
|
||||
if (!this.poster) { return; }
|
||||
this.poster.style.display = "none";
|
||||
},
|
||||
|
||||
@ -480,7 +476,7 @@ var VideoJS = JRClass.extend({
|
||||
},
|
||||
|
||||
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";
|
||||
},
|
||||
|
||||
@ -586,19 +582,19 @@ var VideoJS = JRClass.extend({
|
||||
|
||||
// Get the space between controls. For more flexible styling.
|
||||
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.
|
||||
getControlBorderAdjustment: function(){
|
||||
var leftBorder = parseInt(_V_.getComputedStyleValue(this.playControl, "border-left-width").replace("px", ""));
|
||||
var rightBorder = parseInt(_V_.getComputedStyleValue(this.playControl, "border-right-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", ""), 10);
|
||||
return leftBorder + rightBorder;
|
||||
},
|
||||
|
||||
// Track & display the current play progress
|
||||
trackPlayProgress: function(){
|
||||
if(this.playProgressInterval) clearInterval(this.playProgressInterval);
|
||||
if(this.playProgressInterval) { clearInterval(this.playProgressInterval); }
|
||||
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
|
||||
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.updateTimeDisplay();
|
||||
},
|
||||
@ -620,7 +616,7 @@ var VideoJS = JRClass.extend({
|
||||
this.playProgress.style.width = newProgress * (_V_.getComputedStyleValue(this.progressHolder, "width").replace("px", "")) + "px";
|
||||
this.updateTimeDisplay();
|
||||
// currentTime changed, reset subtitles
|
||||
if (this.subtitles != null) { this.currentSubtitlePosition = 0; }
|
||||
if (!this.subtitles) { this.currentSubtitlePosition = 0; }
|
||||
},
|
||||
|
||||
setPlayProgressWithEvent: function(event){
|
||||
@ -631,7 +627,7 @@ var VideoJS = JRClass.extend({
|
||||
// Update the displayed time (00:00)
|
||||
updateTimeDisplay: function(){
|
||||
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
|
||||
@ -651,7 +647,7 @@ var VideoJS = JRClass.extend({
|
||||
var volNum = Math.ceil(this.video.volume * 6);
|
||||
for(var i=0; i<6; i++) {
|
||||
if (i < volNum) {
|
||||
_V_.addClass(this.volumeDisplay.children[i], "vjs-volume-level-on")
|
||||
_V_.addClass(this.volumeDisplay.children[i], "vjs-volume-level-on");
|
||||
} else {
|
||||
_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"); }
|
||||
catch (e) {}
|
||||
try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
|
||||
catch (e) {}
|
||||
catch (f) {}
|
||||
try { return new ActiveXObject("Msxml2.XMLHTTP"); }
|
||||
catch (e) {}
|
||||
catch (g) {}
|
||||
//Microsoft.XMLHTTP points to Msxml2.XMLHTTP.3.0 and is redundant
|
||||
throw new Error("This browser does not support XMLHttpRequest.");
|
||||
};
|
||||
@ -745,9 +741,9 @@ var VideoJS = JRClass.extend({
|
||||
request.send();
|
||||
},
|
||||
|
||||
parseSubtitles: function(text) {
|
||||
var lines = text.replace("\r",'').split("\n");
|
||||
this.subtitles = new Array();
|
||||
parseSubtitles: function(subText) {
|
||||
var lines = subText.replace("\r",'').split("\n");
|
||||
this.subtitles = [];
|
||||
this.currentSubtitlePosition = 0;
|
||||
|
||||
var i = 0;
|
||||
@ -756,7 +752,7 @@ var VideoJS = JRClass.extend({
|
||||
var subtitle = {};
|
||||
// get the number
|
||||
subtitle.id = lines[i++];
|
||||
if (subtitle.id=="") {
|
||||
if (!subtitle.id) {
|
||||
break;
|
||||
}
|
||||
|
||||
@ -766,7 +762,7 @@ var VideoJS = JRClass.extend({
|
||||
subtitle.endTime = this.parseSubtitleTime(time[1]);
|
||||
|
||||
// get subtitle text
|
||||
var text = new Array();
|
||||
var text = [];
|
||||
while(lines[i].length>0 && lines[i]!="\r") {
|
||||
text.push(lines[i++]);
|
||||
}
|
||||
@ -784,14 +780,14 @@ var VideoJS = JRClass.extend({
|
||||
var parts = timeText.split(':');
|
||||
var time = 0;
|
||||
// hours => seconds
|
||||
time += parseInt(parts[0])*60*60;
|
||||
time += parseFloat(parts[0])*60*60;
|
||||
// minutes => seconds
|
||||
time += parseInt(parts[1])*60;
|
||||
time += parseFloat(parts[1])*60;
|
||||
// get seconds
|
||||
var seconds = parts[2].split(',');
|
||||
time += parseInt(seconds[0]);
|
||||
time += parseFloat(seconds[0]);
|
||||
// add miliseconds
|
||||
time = time + parseInt(seconds[1])/1000;
|
||||
time = time + parseFloat(seconds[1])/1000;
|
||||
return time;
|
||||
},
|
||||
|
||||
@ -806,7 +802,7 @@ var VideoJS = JRClass.extend({
|
||||
|
||||
onTimeUpdate: function(){
|
||||
// show the subtitles
|
||||
if (this.subtitles != null) {
|
||||
if (this.subtitles) {
|
||||
var x = this.currentSubtitlePosition;
|
||||
|
||||
while (x<this.subtitles.length && this.video.currentTime>this.subtitles[x].endTime) {
|
||||
@ -818,16 +814,37 @@ var VideoJS = JRClass.extend({
|
||||
x = this.currentSubtitlePosition;
|
||||
}
|
||||
|
||||
if (this.currentSubtitlePosition>=this.subtitles.length)
|
||||
return;
|
||||
if (this.currentSubtitlePosition>=this.subtitles.length) { return; }
|
||||
|
||||
if (this.video.currentTime>=this.subtitles[x].startTime && this.video.currentTime<=this.subtitles[x].endTime) {
|
||||
this.subtitlesDiv.innerHTML = this.subtitles[x].text;
|
||||
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)
|
||||
@ -835,18 +852,23 @@ var VideoJS = JRClass.extend({
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
var _V_ = {
|
||||
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){
|
||||
if (element.className.indexOf(classToRemove) == -1) return;
|
||||
if (element.className.indexOf(classToRemove) == -1) { return; }
|
||||
var classNames = element.className.split(/\s+/);
|
||||
classNames.splice(classNames.lastIndexOf(classToRemove),1);
|
||||
element.className = classNames.join(" ");
|
||||
},
|
||||
|
||||
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){
|
||||
@ -865,9 +887,9 @@ var _V_ = {
|
||||
},
|
||||
|
||||
// Return seconds as MM:SS
|
||||
formatTime: function(seconds) {
|
||||
seconds = Math.round(seconds);
|
||||
minutes = Math.floor(seconds / 60);
|
||||
formatTime: function(secs) {
|
||||
var seconds = Math.round(secs);
|
||||
var minutes = Math.floor(seconds / 60);
|
||||
minutes = (minutes >= 10) ? minutes : "0" + minutes;
|
||||
seconds = Math.floor(seconds % 60);
|
||||
seconds = (seconds >= 10) ? seconds : "0" + seconds;
|
||||
@ -922,7 +944,7 @@ var _V_ = {
|
||||
DOMReadyList: [],
|
||||
addToDOMReady: function(fn){
|
||||
if (_V_.DOMIsReady) {
|
||||
fn.call(document)
|
||||
fn.call(document);
|
||||
} else {
|
||||
_V_.DOMReadyList.push(fn);
|
||||
}
|
||||
@ -930,19 +952,17 @@ var _V_ = {
|
||||
|
||||
DOMIsReady: false,
|
||||
DOMReady: function(){
|
||||
if (_V_.DOMIsReady) return;
|
||||
if (_V_.DOMIsReady) { return; }
|
||||
if (!document.body) { return setTimeout(_V_.DOMReady, 13); }
|
||||
_V_.DOMIsReady = true;
|
||||
if (_V_.DOMReadyList) {
|
||||
for (var i=0; i<_V_.DOMReadyList.length; i++) {
|
||||
|
||||
_V_.DOMReadyList[i].call(document)
|
||||
_V_.DOMReadyList[i].call(document);
|
||||
}
|
||||
_V_.DOMReadyList = null;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
_V_.bindDOMReady();
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
@ -955,12 +975,12 @@ VideoJS.setupAllWhenReady = function(options){
|
||||
// Options is stored globally, and added ot any new player on init
|
||||
VideoJS.options = options;
|
||||
VideoJS.DOMReady(VideoJS.setup);
|
||||
}
|
||||
};
|
||||
|
||||
// Run the supplied function when the DOM is ready
|
||||
VideoJS.DOMReady = function(fn){
|
||||
_V_.addToDOMReady(fn);
|
||||
}
|
||||
};
|
||||
|
||||
// Set up a specific video or array of video elements
|
||||
// "video" can be:
|
||||
@ -994,7 +1014,7 @@ VideoJS.setup = function(videos, options){
|
||||
|
||||
// Return one or all depending on what was passed in
|
||||
return (returnSingular) ? playerList[0] : playerList;
|
||||
}
|
||||
};
|
||||
|
||||
// Find video tags with the video-js class
|
||||
VideoJS.getVideoJSTags = function() {
|
||||
@ -1009,47 +1029,51 @@ VideoJS.getVideoJSTags = function() {
|
||||
}
|
||||
|
||||
return videoJSTags;
|
||||
}
|
||||
};
|
||||
|
||||
// Check if the browser supports video.
|
||||
VideoJS.browserSupportsVideo = function() {
|
||||
if (typeof VideoJS.videoSupport != "undefined") return VideoJS.videoSupport;
|
||||
return VideoJS.videoSupport = !!document.createElement('video').canPlayType;
|
||||
}
|
||||
if (typeof VideoJS.videoSupport != "undefined") { return VideoJS.videoSupport; }
|
||||
VideoJS.videoSupport = !!document.createElement('video').canPlayType;
|
||||
return VideoJS.videoSupport;
|
||||
};
|
||||
|
||||
VideoJS.getFlashVersion = function(){
|
||||
// Cache Version
|
||||
if (typeof VideoJS.flashVersion != "undefined") return VideoJS.flashVersion;
|
||||
if (typeof VideoJS.flashVersion != "undefined") { return VideoJS.flashVersion; }
|
||||
var version = 0;
|
||||
if (typeof navigator.plugins != "undefined" && typeof navigator.plugins["Shockwave Flash"] == "object") {
|
||||
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)) {
|
||||
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") {
|
||||
try {
|
||||
var testObject = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
|
||||
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) {}
|
||||
}
|
||||
return VideoJS.flashVersion = version;
|
||||
}
|
||||
VideoJS.flashVersion = version;
|
||||
return VideoJS.flashVersion;
|
||||
};
|
||||
|
||||
VideoJS.isIE = function(){ return !+"\v1"; }
|
||||
VideoJS.isIpad = function(){ return navigator.userAgent.match(/iPad/i) != null; }
|
||||
VideoJS.isIE = function(){ return !+"\v1"; };
|
||||
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
|
||||
// when using in event listeners and timeouts
|
||||
Function.prototype.context = function(obj) {
|
||||
var method = this
|
||||
var method = this;
|
||||
temp = function() {
|
||||
return method.apply(obj, arguments)
|
||||
}
|
||||
return temp
|
||||
}
|
||||
return method.apply(obj, arguments);
|
||||
};
|
||||
return temp;
|
||||
};
|
||||
|
||||
// jQuery Plugin
|
||||
if (window.jQuery) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user