Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

converted music player to use custom control bar with soundmanager

  • Loading branch information...
commit 83a8e1da6894eea212f0dfd75be6cbce129f04e8 1 parent 8364021
Eric Matthys authored
Showing with 6,391 additions and 4,161 deletions.
  1. +306 −654 app/css/plex.css
  2. BIN  app/img/controls.png
  3. BIN  app/img/lens_controls.png
  4. BIN  app/img/lens_play.png
  5. BIN  app/img/lens_replay.png
  6. +140 −2,846 app/js/libs/mediaelement-2.8.1.js
  7. +5,026 −0 app/js/libs/soundmanager2.js
  8. +2 −0  app/js/main.js
  9. +1 −0  app/js/plex/app.js
  10. +16 −0 app/js/plex/control/init/SoundManagerInit.js
  11. +39 −0 app/js/plex/model/PlayerModel.js
  12. +88 −35 app/js/plex/view/players/MusicPlayerView.js
  13. +265 −0 app/js/plex/view/players/core/ControlsView.js
  14. +140 −0 app/js/plex/view/players/core/SeekBarView.js
  15. +150 −0 app/js/plex/view/players/core/SliderView.js
  16. +1 −1  app/less/app.less
  17. +1 −3 app/less/lists.less
  18. +1 −3 app/less/music.less
  19. +194 −616 app/less/player.less
  20. BIN  app/swf/soundmanager2.swf
  21. BIN  app/swf/soundmanager2_debug.swf
  22. BIN  app/swf/soundmanager2_flash9.swf
  23. BIN  app/swf/soundmanager2_flash9_debug.swf
  24. +1 −3 app/templates/players/MusicPlayerView.tpl
  25. +8 −0 app/templates/players/core/ControlsView.tpl
  26. +4 −0 app/templates/players/core/PlayerView.tpl
  27. +3 −0  app/templates/players/core/SeekBarView.tpl
  28. +5 −0 app/templates/players/core/SliderView.tpl
View
960 app/css/plex.css
@@ -7242,7 +7242,7 @@ body {
background-image: url(../img/noise.png);
}
#container.music-player-active > section.content {
- padding-top: 165px;
+ padding-top: 145px;
}
section.content {
padding: 100px 40px 200px;
@@ -8158,14 +8158,17 @@ ul.nav .dropdown-menu:after {
}
.poster-media-list > li .poster-title {
position: absolute;
- overflow: hidden;
left: 0;
bottom: 0;
width: 150px;
- text-overflow: ellipsis;
- white-space: nowrap;
font-size: 14px;
text-shadow: 0 1px 0 #000;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.expanded-media-list {
float: left;
@@ -8635,11 +8638,14 @@ ul.nav .dropdown-menu:after {
text-align: center;
}
.album-art > .album-title {
- overflow: hidden;
margin-top: 5px;
width: 150px;
font-size: 14px;
text-shadow: 0 1px 0 #000;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@@ -8682,8 +8688,8 @@ ul.nav .dropdown-menu:after {
position: fixed;
left: 0;
top: 60px;
+ padding-bottom: 2px;
width: 100%;
- height: 65px;
z-index: 3;
border-bottom: 1px solid #333;
background-color: #141414;
@@ -8711,133 +8717,40 @@ ul.nav .dropdown-menu:after {
-moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
}
-.now-playing {
- padding: 10px 8px 0;
+#music-player .now-playing-label,
+#music-player .now-playing-title {
+ display: inline-block;
+ height: 30px;
font-size: 14px;
+ line-height: 30px;
}
-.next-track {
- float: right;
-}
-.now-playing-label,
-.next-label {
+#music-player .now-playing-label {
margin-right: 4px;
opacity: 0.5;
filter: alpha(opacity=50);
opacity: 0.5;
filter: alpha(opacity=50);
}
-.me-plugin {
- position: absolute;
-}
-.mejs-clear {
- clear: both;
-}
-.mejs-embed,
-.mejs-embed body {
- overflow: hidden;
- margin: 0;
- padding: 0;
- width: 100%;
- height: 100%;
- background: #000;
-}
-.mejs-container {
- position: relative;
- background: #000;
- text-align: left;
- vertical-align: top;
-}
-#music-player .mejs-container {
+#music-player .player-wrapper,
+#music-player .player-controls {
background: none;
}
-.mejs-container-fullscreen {
- position: fixed;
- overflow: hidden;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
- z-index: 1000;
-}
-.mejs-container-fullscreen .mejs-mediaelement,
-.mejs-container-fullscreen video {
- width: 100%;
- height: 100%;
-}
-.mejs-background {
- position: absolute;
- top: 0;
- left: 0;
-}
-.mejs-mediaelement {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
-}
-.mejs-poster {
- position: absolute;
- top: 0;
- left: 0;
-}
-.mejs-poster img {
- display: block;
- padding: 0;
- border: 0;
-}
-.mejs-overlay {
- position: absolute;
- top: 0;
- left: 0;
-}
-.mejs-overlay-play {
- cursor: pointer;
-}
-.mejs-overlay-button {
- position: absolute;
- top: 50%;
- left: 50%;
- margin: -50px 0 0 -50px;
- width: 100px;
- height: 100px;
- background: url(bigplay.png) no-repeat;
-}
-.mejs-overlay:hover .mejs-overlay-button {
- background-position: 0 -100px;
+.player-wrapper {
+ position: relative;
+ padding: 0 !important;
+ border: none !important;
+ background-color: #000000;
+ line-height: 0 !important;
}
-.mejs-overlay-loading {
- position: absolute;
- top: 50%;
- left: 50%;
- margin: -40px 0 0 -40px;
- width: 80px;
- height: 80px;
- background: #333;
- background: url(background.png);
- background: rgba(0, 0, 0, 0.9);
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50, 50, 50, 0.9)), to(rgba(0, 0, 0, 0.9)));
- background: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9));
- background: -moz-linear-gradient(top, rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9));
- background: -o-linear-gradient(top, rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9));
- background: -ms-linear-gradient(top, rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9));
- background: linear-gradient(rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9));
-}
-.mejs-overlay-loading span {
- display: block;
- width: 80px;
- height: 80px;
- background: transparent url(loading.gif) 50% 50% no-repeat;
+video.player-fullscreen {
+ width: 100% !important;
+ height: 100% !important;
}
-.mejs-container .mejs-controls {
- position: absolute;
- bottom: 0;
- left: 0;
- margin: 0;
- padding: 0;
- height: 30px;
+.player-controls {
width: 100%;
- list-style-type: none;
+ height: 38px;
+ overflow: hidden;
+ border-top: 1px solid #000000;
background-color: #141414;
background-image: -moz-linear-gradient(top, #222222, #000000);
background-image: -ms-linear-gradient(top, #222222, #000000);
@@ -8856,592 +8769,331 @@ ul.nav .dropdown-menu:after {
background-image: linear-gradient(top, #222222, #000000);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#222222', endColorstr='#000000', GradientType=0);
-}
-#music-player .mejs-container .mejs-controls {
- background: none;
-}
-.mejs-container .mejs-controls div {
- display: block;
- float: left;
- margin: 0;
- padding: 0;
- width: 26px;
- height: 26px;
- list-style-type: none;
- border: none;
- background: none;
- background-image: none;
- font-size: 11px;
- line-height: 11px;
-}
-.mejs-controls .mejs-button button {
+ -webkit-transition: height 0.3s ease-in-out;
+ -moz-transition: height 0.3s ease-in-out;
+ -ms-transition: height 0.3s ease-in-out;
+ -o-transition: height 0.3s ease-in-out;
+ transition: height 0.3s ease-in-out;
+ -webkit-transition: height 0.3s ease-in-out;
+ -moz-transition: height 0.3s ease-in-out;
+ -ms-transition: height 0.3s ease-in-out;
+ -o-transition: height 0.3s ease-in-out;
+ transition: height 0.3s ease-in-out;
+}
+.player-controls-collapsed {
+ height: 9px;
+}
+.player-controls-overlay {
position: absolute;
- display: block;
- cursor: pointer;
- margin: 7px 5px;
- padding: 0;
- width: 16px;
- height: 16px;
- border: none;
- background: transparent url(../img/controls.png) no-repeat;
- font-size: 0;
- line-height: 0;
- text-decoration: none;
- /* :focus for accessibility */
-
+ bottom: 0;
}
-.mejs-controls .mejs-button button:focus {
- outline: solid 1px yellow;
+.player-overlay-play-button {
+ cursor: pointer !important;
+ position: absolute;
+ left: 0;
+ top: 0;
+ background: url(../img/lens_play.png) no-repeat center;
}
-/* Time (current / duration) */
-.mejs-container .mejs-controls .mejs-time {
- display: block;
- overflow: hidden;
- padding: 8px 3px 0 3px ;
- padding: auto 4px;
- height: 17px;
- width: auto;
- text-align: center;
- color: #fff;
+.player-overlay-replay-button {
+ cursor: pointer !important;
+ position: absolute;
+ left: 0;
+ top: 0;
+ background: url(../img/lens_replay.png) no-repeat center;
}
-.mejs-container .mejs-controls .mejs-time span {
+.player-play-pause-button,
+.player-fullscreen-button,
+.player-slider-button {
float: left;
display: block;
- margin: 1px 2px 0 0;
- width: auto;
- font-size: 11px;
- line-height: 12px;
- color: #fff;
+ left: 0 !important;
+ top: 0 !important;
+ width: 40px;
+ height: 30px;
+ border: none !important;
+ -webkit-transition: none;
+ -moz-transition: none;
+ -ms-transition: none;
+ -o-transition: none;
+ transition: none;
+ -webkit-transition: none;
+ -moz-transition: none;
+ -ms-transition: none;
+ -o-transition: none;
+ transition: none;
}
-/* Progress Bar */
-.mejs-controls div.mejs-time-rail {
- padding-top: 5px;
- width: 200px;
+.player-play-pause-button {
+ background: url(../img/lens_controls.png) no-repeat 0 0;
}
-.mejs-controls .mejs-time-rail span {
- position: absolute;
- display: block;
- cursor: pointer;
- width: 180px;
- height: 10px;
- -webkit-border-radius: 2px;
- -moz-border-radius: 2px;
- border-radius: 2px;
- -webkit-border-radius: 2px;
- -moz-border-radius: 2px;
- border-radius: 2px;
+.player-play-pause-button:hover {
+ background-position: -40px 0;
}
-.mejs-controls .mejs-time-rail .mejs-time-total {
- margin: 5px;
- background: #333;
- background: rgba(50, 50, 50, 0.8);
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30, 30, 30, 0.8)), to(rgba(60, 60, 60, 0.8)));
- background: -webkit-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
- background: -moz-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
- background: -o-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
- background: -ms-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
- background: linear-gradient(rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
-}
-.mejs-controls .mejs-time-rail .mejs-time-loaded {
- width: 0;
- background-color: #1f5587;
- background-image: -moz-linear-gradient(top, #1e5f9d, #214567);
- background-image: -ms-linear-gradient(top, #1e5f9d, #214567);
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#1e5f9d), to(#214567));
- background-image: -webkit-linear-gradient(top, #1e5f9d, #214567);
- background-image: -o-linear-gradient(top, #1e5f9d, #214567);
- background-image: linear-gradient(top, #1e5f9d, #214567);
- background-repeat: repeat-x;
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5f9d', endColorstr='#214567', GradientType=0);
- background-color: #1f5587;
- background-image: -moz-linear-gradient(top, #1e5f9d, #214567);
- background-image: -ms-linear-gradient(top, #1e5f9d, #214567);
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#1e5f9d), to(#214567));
- background-image: -webkit-linear-gradient(top, #1e5f9d, #214567);
- background-image: -o-linear-gradient(top, #1e5f9d, #214567);
- background-image: linear-gradient(top, #1e5f9d, #214567);
- background-repeat: repeat-x;
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5f9d', endColorstr='#214567', GradientType=0);
+.player-pause-button {
+ background-position: 0 -30px !important;
}
-.mejs-controls .mejs-time-rail .mejs-time-current {
- width: 0;
- background-color: #db8e1f;
- background-image: -moz-linear-gradient(top, #e5a433, #cb6d00);
- background-image: -ms-linear-gradient(top, #e5a433, #cb6d00);
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e5a433), to(#cb6d00));
- background-image: -webkit-linear-gradient(top, #e5a433, #cb6d00);
- background-image: -o-linear-gradient(top, #e5a433, #cb6d00);
- background-image: linear-gradient(top, #e5a433, #cb6d00);
- background-repeat: repeat-x;
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5a433', endColorstr='#cb6d00', GradientType=0);
- background-color: #db8e1f;
- background-image: -moz-linear-gradient(top, #e5a433, #cb6d00);
- background-image: -ms-linear-gradient(top, #e5a433, #cb6d00);
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e5a433), to(#cb6d00));
- background-image: -webkit-linear-gradient(top, #e5a433, #cb6d00);
- background-image: -o-linear-gradient(top, #e5a433, #cb6d00);
- background-image: linear-gradient(top, #e5a433, #cb6d00);
- background-repeat: repeat-x;
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5a433', endColorstr='#cb6d00', GradientType=0);
-}
-.mejs-controls .mejs-time-rail .mejs-time-handle {
- position: absolute;
- display: none;
- cursor: pointer;
- top: -2px;
- margin: 0;
- width: 10px;
- border: solid 2px #333;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- border-radius: 5px;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- border-radius: 5px;
- background: #fff;
- text-align: center;
-}
-.mejs-controls .mejs-time-rail .mejs-time-float {
- position: absolute;
- display: none;
- top: -26px;
- width: 36px;
- height: 17px;
- margin-left: -18px;
- border: solid 1px #333;
- background: #eee;
- text-align: center;
- color: #111;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
+.player-pause-button:hover {
+ background-position: -40px -30px !important;
}
-.mejs-controls .mejs-time-rail .mejs-time-float-corner {
- position: absolute;
- display: block;
- left: 13px;
- top: 15px;
- width: 0;
- height: 0;
- border: solid 5px #eee;
- border-color: #eee transparent transparent transparent;
- -webkit-border-radius: 0;
- -moz-border-radius: 0;
- border-radius: 0;
- -webkit-border-radius: 0;
- -moz-border-radius: 0;
- border-radius: 0;
- line-height: 0;
-}
-.mejs-controls .mejs-time-rail .mejs-time-float-current {
- display: block;
- left: 0;
- margin: 3px;
- width: 30px;
- text-align: center;
+.player-fullscreen-button {
+ float: right;
+ background: url(../img/lens_controls.png) no-repeat 0 -330px;
}
-/* Play/Pause */
-.mejs-controls .mejs-play button {
- background-position: 0 0;
+.player-fullscreen-button:hover {
+ background-position: -40px -330px;
}
-.mejs-controls .mejs-pause button {
- background-position: 0 -16px;
+.player-volume > .player-slider-button {
+ float: right;
+ background: url(../img/lens_controls.png) no-repeat 0 -60px;
}
-/* Stop */
-.mejs-controls .mejs-stop button {
- background-position: -112px 0;
+.player-volume > .player-slider-button:hover {
+ background-position: -40px -60px;
}
-/* Fullscreen */
-.mejs-controls .mejs-fullscreen-button button {
- background-position: -32px 0;
+.player-volume-button-low {
+ background-position: 0 -90px !important;
}
-.mejs-controls .mejs-unfullscreen button {
- background-position: -32px -16px;
+.player-volume-button-low:hover {
+ background-position: -40px -90px !important;
}
-/* Mute/Volume */
-.mejs-controls .mejs-mute button {
- background-position: -16px -16px;
+.player-volume-button-off {
+ background-position: 0 -120px !important;
}
-.mejs-controls .mejs-unmute button {
- background-position: -16px 0;
+.player-volume-button-off:hover {
+ background-position: -40px -120px !important;
}
-.mejs-controls .mejs-volume-button {
- position: relative;
+.player-playback-rate > .player-slider-button {
+ background: url(../img/lens_controls.png) no-repeat 0 -150px;
}
-.mejs-controls .mejs-volume-button .mejs-volume-slider {
- position: absolute;
- display: none;
- left: 0;
- top: -115px;
- margin: 0;
- width: 25px;
- height: 115px;
- z-index: 1;
- -webkit-border-radius: 0;
- -moz-border-radius: 0;
- border-radius: 0;
- -webkit-border-radius: 0;
- -moz-border-radius: 0;
- border-radius: 0;
- background: url(background.png);
- background: rgba(50, 50, 50, 0.7);
+.player-playback-rate > .player-slider-button:hover {
+ background-position: -40px -150px;
}
-.mejs-controls .mejs-volume-button:hover {
- -webkit-border-radius: 0 0 4px 4px;
- -moz-border-radius: 0 0 4px 4px;
- border-radius: 0 0 4px 4px;
+.player-playback-rate:hover .player-playback-rate-button-point1x,
+.player-active-slider .player-playback-rate-button-point1x {
+ background-position: 0 -180px;
}
-.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-total {
- position: absolute;
- left: 11px;
- top: 8px;
- margin: 0;
- width: 2px;
- height: 100px;
- background: #ddd;
- background: rgba(255, 255, 255, 0.5);
+.player-playback-rate-button-point1x:hover {
+ background-position: -40px -180px !important;
}
-.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-handle {
- position: absolute;
- cursor: N-resize;
- left: 4px;
- top: -3px;
- margin: 0;
- width: 16px;
- height: 6px;
- -webkit-border-radius: 1px;
- -moz-border-radius: 1px;
- border-radius: 1px;
- -webkit-border-radius: 1px;
- -moz-border-radius: 1px;
- border-radius: 1px;
- background: #ddd;
- background: rgba(255, 255, 255, 0.9);
+.player-playback-rate:hover .player-playback-rate-button-point5x,
+.player-active-slider .player-playback-rate-button-point5x {
+ background-position: 0 -210px;
}
-/* Horizontal Volume */
-.mejs-controls div.mejs-horizontal-volume-slider {
- height: 26px;
- width: 60px;
- position: relative;
+.player-playback-rate-button-point5x:hover {
+ background-position: -40px -210px !important;
}
-.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
- position: absolute;
- left: 0;
- top: 11px;
- margin: 0;
- padding: 0;
- width: 50px;
- height: 8px;
- -webkit-border-radius: 2px;
- -moz-border-radius: 2px;
- border-radius: 2px;
- -webkit-border-radius: 2px;
- -moz-border-radius: 2px;
- border-radius: 2px;
- background: #333;
- background: rgba(50, 50, 50, 0.8);
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30, 30, 30, 0.8)), to(rgba(60, 60, 60, 0.8)));
- background: -webkit-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
- background: -moz-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
- background: -o-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
- background: -ms-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
- background: linear-gradient(rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
- font-size: 1px;
-}
-.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
- position: absolute;
- left: 0;
- top: 11px;
- margin: 0;
- padding: 0;
- width: 50px;
- height: 8px;
- -webkit-border-radius: 2px;
- -moz-border-radius: 2px;
- border-radius: 2px;
- -webkit-border-radius: 2px;
- -moz-border-radius: 2px;
- border-radius: 2px;
- background-color: #db8e1f;
- background-image: -moz-linear-gradient(top, #e5a433, #cb6d00);
- background-image: -ms-linear-gradient(top, #e5a433, #cb6d00);
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e5a433), to(#cb6d00));
- background-image: -webkit-linear-gradient(top, #e5a433, #cb6d00);
- background-image: -o-linear-gradient(top, #e5a433, #cb6d00);
- background-image: linear-gradient(top, #e5a433, #cb6d00);
- background-repeat: repeat-x;
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5a433', endColorstr='#cb6d00', GradientType=0);
- background-color: #db8e1f;
- background-image: -moz-linear-gradient(top, #e5a433, #cb6d00);
- background-image: -ms-linear-gradient(top, #e5a433, #cb6d00);
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e5a433), to(#cb6d00));
- background-image: -webkit-linear-gradient(top, #e5a433, #cb6d00);
- background-image: -o-linear-gradient(top, #e5a433, #cb6d00);
- background-image: linear-gradient(top, #e5a433, #cb6d00);
- background-repeat: repeat-x;
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5a433', endColorstr='#cb6d00', GradientType=0);
- font-size: 1px;
+.player-playback-rate:hover .player-playback-rate-button-1x,
+.player-active-slider .player-playback-rate-button-1x {
+ background-position: 0 -240px;
}
-.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {
- display: none;
+.player-playback-rate-button-1x:hover {
+ background-position: -40px -240px !important;
}
-/* Track (Captions and Chapters) */
-.mejs-controls .mejs-captions-button {
- position: relative;
+.player-playback-rate:hover .player-playback-rate-button-2x,
+.player-active-slider .player-playback-rate-button-2x {
+ background-position: 0 -270px;
}
-.mejs-controls .mejs-captions-button button {
- background-position: -48px 0;
+.player-playback-rate-button-2x:hover {
+ background-position: -40px -270px !important;
}
-.mejs-controls .mejs-captions-button .mejs-captions-selector {
- position: absolute;
- visibility: hidden;
- overflow: hidden;
- bottom: 26px;
- right: -10px;
- padding: 10px;
- width: 130px;
- height: 100px;
- border: solid 1px transparent;
- -webkit-border-radius: 0;
- -moz-border-radius: 0;
- border-radius: 0;
- -webkit-border-radius: 0;
- -moz-border-radius: 0;
- border-radius: 0;
- background: url(background.png);
- background: rgba(50, 50, 50, 0.7);
+.player-playback-rate:hover .player-playback-rate-button-3x,
+.player-active-slider .player-playback-rate-button-3x {
+ background-position: 0 -300px;
}
-.mejs-controls .mejs-captions-button .mejs-captions-selector ul {
- display: block;
- overflow: hidden;
- margin: 0;
- padding: 0;
- list-style-type: none !important;
+.player-playback-rate-button-3x:hover {
+ background-position: -40px -300px !important;
}
-.mejs-controls .mejs-captions-button .mejs-captions-selector ul li {
- display: block;
+.player-volume,
+.player-playback-rate {
+ position: relative;
overflow: hidden;
- margin: 0 0 6px 0;
- padding: 0;
- list-style-type: none !important;
- color: #fff;
+ width: 40px;
+ height: 30px;
+ -webkit-transition: width 0.3s ease-in-out;
+ -moz-transition: width 0.3s ease-in-out;
+ -ms-transition: width 0.3s ease-in-out;
+ -o-transition: width 0.3s ease-in-out;
+ transition: width 0.3s ease-in-out;
+ -webkit-transition: width 0.3s ease-in-out;
+ -moz-transition: width 0.3s ease-in-out;
+ -ms-transition: width 0.3s ease-in-out;
+ -o-transition: width 0.3s ease-in-out;
+ transition: width 0.3s ease-in-out;
+}
+.player-controls-overlay .player-volume,
+.player-controls-overlay .player-playback-rate {
+ overflow: visible !important;
+ width: 150px !important;
+}
+.player-volume {
+ float: right;
}
-.mejs-controls .mejs-captions-button .mejs-captions-selector ul li input {
+.player-playback-rate {
float: left;
- clear: both;
- margin: 3px 3px 0 5px;
}
-.mejs-controls .mejs-captions-button .mejs-captions-selector ul li label {
- float: left;
- width: 100px;
- padding: 4px 0 0 0;
- font-size: 10px;
- line-height: 15px;
+.player-volume:hover,
+.player-playback-rate:hover,
+.player-active-slider {
+ width: 150px;
}
-.mejs-controls .mejs-captions-button .mejs-captions-translations {
- margin: 0 0 5px 0;
- font-size: 10px;
+.player-progress-bar,
+.player-progress-thumb,
+.player-active-slider .player-slider-bar,
+.player-active-slider .player-slider-thumb,
+.player-controls-overlay .player-volume,
+.player-controls-overlay .player-playback-rate {
+ -webkit-transition: none;
+ -moz-transition: none;
+ -ms-transition: none;
+ -o-transition: none;
+ transition: none;
+ -webkit-transition: none;
+ -moz-transition: none;
+ -ms-transition: none;
+ -o-transition: none;
+ transition: none;
}
-.mejs-chapters {
+.player-slider-track {
+ position: relative;
+ cursor: pointer !important;
+ width: 100%;
+ height: 8px;
+ border-top: 1px solid #3a3a3a;
+ border-bottom: 1px solid #333333;
+ background: #2a2a2a;
+ background: -moz-linear-gradient(top, #2a2a2a 0%, #1a1a1a 50%, #000000 51%, #131313 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2a2a2a), color-stop(50%, #1a1a1a), color-stop(51%, #000000), color-stop(100%, #131313));
+ background: -webkit-linear-gradient(top, #2a2a2a 0%, #1a1a1a 50%, #000000 51%, #131313 100%);
+ background: -o-linear-gradient(top, #2a2a2a 0%, #1a1a1a 50%, #000000 51%, #131313 100%);
+ background: -ms-linear-gradient(top, #2a2a2a 0%, #1a1a1a 50%, #000000 51%, #131313 100%);
+ background: linear-gradient(top, #2a2a2a 0%, #1a1a1a 50%, #000000 51%, #131313 100%);
+}
+.player-volume .player-slider-track,
+.player-playback-rate .player-slider-track {
position: absolute;
- left: 0;
top: 0;
- width: 10000px;
- -xborder-right: solid 1px #fff;
-}
-.mejs-chapters .mejs-chapter {
- position: absolute;
- float: left;
- overflow: hidden;
- border: 0;
- background: #222;
- background: rgba(0, 0, 0, 0.7);
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50, 50, 50, 0.7)), to(rgba(0, 0, 0, 0.7)));
- background: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
- background: -moz-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
- background: -o-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
- background: -ms-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
- background: linear-gradient(rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
- filter: progid:dximagetransform.microsoft.gradient(GradientType=0, startColorstr=#323232, endColorstr=#000000);
-}
-.mejs-chapters .mejs-chapter .mejs-chapter-block {
- display: block;
- cursor: pointer;
- padding: 5px;
- border-right: solid 1px #333;
- border-bottom: solid 1px #333;
- font-size: 11px;
- color: #fff;
-}
-.mejs-chapters .mejs-chapter .mejs-chapter-block-last {
- border-right: none;
+ width: 100px;
+ margin: 11px 0 0 0;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
}
-.mejs-chapters .mejs-chapter .mejs-chapter-block:hover {
- background: #666;
- background: rgba(102, 102, 102, 0.7);
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(102, 102, 102, 0.7)), to(rgba(50, 50, 50, 0.6)));
- background: -webkit-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
- background: -moz-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
- background: -o-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
- background: -ms-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
- background: linear-gradient(rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
- filter: progid:dximagetransform.microsoft.gradient(GradientType=0, startColorstr=#666666, endColorstr=#323232);
-}
-.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-title {
- display: block;
- margin: 0 0 3px 0;
- font-size: 12px;
- line-height: 12px;
- font-weight: bold;
- white-space: nowrap;
- text-overflow: ellipsis;
+.player-volume .player-slider-track {
+ right: 40px;
+ margin-left: 10px;
}
-.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-timespan {
- font-size: 12px;
- line-height: 12px;
- margin: 3px 0 4px 0;
- display: block;
- white-space: nowrap;
- text-overflow: ellipsis;
+.player-playback-rate .player-slider-track {
+ left: 40px;
+ margin-right: 10px;
}
-.mejs-captions-layer {
+.player-slider-bar {
+ cursor: pointer !important;
+ width: 4px;
+ height: 8px;
+ background: #2e7ac7;
+ background: -moz-linear-gradient(top, #2e7ac7 0%, #2970b8 50%, #225e9b 51%, #2465a8 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2a2a2a), color-stop(50%, #1a1a1a), color-stop(51%, #225e9b), color-stop(100%, #2465a8));
+ background: -webkit-linear-gradient(top, #2e7ac7 0%, #2970b8 50%, #225e9b 51%, #2465a8 100%);
+ background: -o-linear-gradient(top, #2e7ac7 0%, #2970b8 50%, #225e9b 51%, #2465a8 100%);
+ background: -ms-linear-gradient(top, #2e7ac7 0%, #2970b8 50%, #225e9b 51%, #2465a8 100%);
+ background: linear-gradient(top, #2e7ac7 0%, #2970b8 50%, #225e9b 51%, #2465a8 100%);
+ -webkit-transition: width 0.1s ease-in-out;
+ -moz-transition: width 0.1s ease-in-out;
+ -ms-transition: width 0.1s ease-in-out;
+ -o-transition: width 0.1s ease-in-out;
+ transition: width 0.1s ease-in-out;
+ -webkit-transition: width 0.1s ease-in-out;
+ -moz-transition: width 0.1s ease-in-out;
+ -ms-transition: width 0.1s ease-in-out;
+ -o-transition: width 0.1s ease-in-out;
+ transition: width 0.1s ease-in-out;
+}
+.player-progress-bar {
position: absolute;
left: 0;
- bottom: 0;
- text-align: center;
- font-size: 12px;
- line-height: 22px;
- color: #fff;
-}
-.mejs-captions-layer a {
- color: #fff;
- text-decoration: underline;
-}
-.mejs-captions-layer[lang=ar] {
- font-size: 20px;
- font-weight: normal;
+ top: 0;
+ z-index: 2;
}
-.mejs-captions-position {
+.player-buffer-bar {
+ cursor: pointer !important;
position: absolute;
left: 0;
- bottom: 15px;
- width: 100%;
-}
-.mejs-captions-position-hover {
- bottom: 45px;
-}
-.mejs-captions-text {
- padding: 3px 5px;
- background: url(background.png);
- background: rgba(20, 20, 20, 0.8);
-}
-/* Error */
-.me-cannotplay a {
- color: #fff;
- font-weight: bold;
-}
-.me-cannotplay span {
- display: block;
- padding: 15px;
-}
-/* Loop */
-.mejs-controls .mejs-loop-off button {
- background-position: -64px -16px;
-}
-.mejs-controls .mejs-loop-on button {
- background-position: -64px 0;
-}
-/* Backlight */
-.mejs-controls .mejs-backlight-off button {
- background-position: -80px -16px;
-}
-.mejs-controls .mejs-backlight-on button {
- background-position: -80px 0;
-}
-/* Picture Controls */
-.mejs-controls .mejs-picturecontrols-button {
- background-position: -96px 0;
+ top: 0;
+ width: 0;
+ height: 8px;
+ z-index: 1;
+ background: #4a4a4a;
+ background: -moz-linear-gradient(top, #4a4a4a 0%, #3a3a3a 50%, #222222 51%, #333333 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4a4a4a), color-stop(50%, #3a3a3a), color-stop(51%, #222222), color-stop(100%, #333333));
+ background: -webkit-linear-gradient(top, #4a4a4a 0%, #3a3a3a 50%, #222222 51%, #333333 100%);
+ background: -o-linear-gradient(top, #4a4a4a 0%, #3a3a3a 50%, #222222 51%, #333333 100%);
+ background: -ms-linear-gradient(top, #4a4a4a 0%, #3a3a3a 50%, #222222 51%, #333333 100%);
+ background: linear-gradient(top, #4a4a4a 0%, #3a3a3a 50%, #222222 51%, #333333 100%);
+}
+.player-volume .player-slider-bar,
+.player-playback-rate .player-slider-bar {
+ cursor: pointer !important;
+ height: 8px;
+ -moz-border-radius-topleft: 4px;
+ -webkit-border-top-left-radius: 4px;
+ border-top-left-radius: 4px;
+ -moz-border-radius-bottomleft: 4px;
+ -webkit-border-bottom-left-radius: 4px;
+ border-bottom-left-radius: 4px;
}
-/* Context Menu */
-.mejs-contextmenu {
+.player-slider-thumb {
+ cursor: pointer !important;
position: absolute;
left: 0;
top: 0;
- padding: 10px;
- width: 150px;
+ width: 8px;
+ height: 8px;
+ z-index: 3;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
border-radius: 4px;
- z-index: 1001;
- /* make sure it shows on fullscreen */
-
- border: solid 1px #999;
- background: #fff;
-}
-.mejs-contextmenu .mejs-contextmenu-separator {
- margin: 5px 6px;
- height: 1px;
- background: #333;
- font-size: 0;
-}
-.mejs-contextmenu .mejs-contextmenu-item {
- cursor: pointer;
- padding: 4px 6px;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+ background-color: #aaaaaa;
+ background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(#dddddd), to(#aaaaaa));
+ background-image: -webkit-radial-gradient(circle, #dddddd, #aaaaaa);
+ background-image: -moz-radial-gradient(circle, #dddddd, #aaaaaa);
+ background-image: -ms-radial-gradient(circle, #dddddd, #aaaaaa);
+ background-image: -o-radial-gradient(circle, #dddddd, #aaaaaa);
+ background-repeat: no-repeat;
+ background-color: #aaaaaa;
+ background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(#dddddd), to(#aaaaaa));
+ background-image: -webkit-radial-gradient(circle, #dddddd, #aaaaaa);
+ background-image: -moz-radial-gradient(circle, #dddddd, #aaaaaa);
+ background-image: -ms-radial-gradient(circle, #dddddd, #aaaaaa);
+ background-image: -o-radial-gradient(circle, #dddddd, #aaaaaa);
+ background-repeat: no-repeat;
+ -webkit-transition: left 0.1s ease-in-out;
+ -moz-transition: left 0.1s ease-in-out;
+ -ms-transition: left 0.1s ease-in-out;
+ -o-transition: left 0.1s ease-in-out;
+ transition: left 0.1s ease-in-out;
+ -webkit-transition: left 0.1s ease-in-out;
+ -moz-transition: left 0.1s ease-in-out;
+ -ms-transition: left 0.1s ease-in-out;
+ -o-transition: left 0.1s ease-in-out;
+ transition: left 0.1s ease-in-out;
+}
+.player-active-slider .player-slider-thumb,
+.player-seek-bar:hover .player-progress-thumb,
+.player-slider-track:hover .player-slider-thumb {
+ background: #ffffff !important;
+}
+.player-time {
+ float: right;
+ height: 30px;
+ padding: 0 10px;
font-size: 12px;
- color: #333;
-}
-.mejs-contextmenu .mejs-contextmenu-item:hover {
- background: #2C7C91;
- color: #fff;
-}
-/* Source Chooser */
-.mejs-controls .mejs-sourcechooser-button {
- position: relative;
-}
-.mejs-controls .mejs-sourcechooser-button button {
- background-position: -128px 0;
-}
-.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector {
- visibility: hidden;
- position: absolute;
- bottom: 26px;
- right: -10px;
- width: 130px;
- height: 100px;
- background: url(background.png);
- background: rgba(50, 50, 50, 0.7);
- border: solid 1px transparent;
- padding: 10px;
- overflow: hidden;
- -webkit-border-radius: 0;
- -moz-border-radius: 0;
- border-radius: 0;
-}
-.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul {
- display: block;
- overflow: hidden;
- margin: 0;
- padding: 0;
- list-style-type: none !important;
-}
-.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li {
- display: block;
- overflow: hidden;
- margin: 0 0 6px 0;
- padding: 0;
- list-style-type: none !important;
- color: #fff;
-}
-.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input {
- float: left;
- clear: both;
- margin: 3px 3px 0 5px;
+ line-height: 30px;
+ color: #aaaaaa;
}
-.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li label {
- float: left;
- padding: 4px 0 0 0;
- width: 100px;
- font-size: 10px;
- line-height: 15px;
+.player-current-time {
+ color: #ffffff;
}
View
BIN  app/img/controls.png
Deleted file not rendered
View
BIN  app/img/lens_controls.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  app/img/lens_play.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  app/img/lens_replay.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
2,986 app/js/libs/mediaelement-2.8.1.js
@@ -11,147 +11,147 @@
* Dual licensed under the MIT or GPL Version 2 licenses.
*
*/
-// Namespace
-var mejs = mejs || {};
-
-// version number
-mejs.version = '2.8.1';
-
-// player number (for missing, same id attr)
-mejs.meIndex = 0;
-
-// media types accepted by plugins
-mejs.plugins = {
- silverlight: [
- {version: [3,0], types: ['video/mp4','video/m4v','video/mov','video/wmv','audio/wma','audio/m4a','audio/mp3','audio/wav','audio/mpeg']}
- ],
- flash: [
- {version: [9,0,124], types: ['video/mp4','video/m4v','video/mov','video/flv','video/x-flv','audio/flv','audio/x-flv','audio/mp3','audio/m4a','audio/mpeg', 'video/youtube', 'video/x-youtube']}
- //,{version: [12,0], types: ['video/webm']} // for future reference (hopefully!)
- ],
- youtube: [
- {version: null, types: ['video/youtube', 'video/x-youtube']}
- ],
- vimeo: [
- {version: null, types: ['video/vimeo']}
- ]
-};
-
-/*
-Utility methods
-*/
-mejs.Utility = {
- encodeUrl: function(url) {
- return encodeURIComponent(url); //.replace(/\?/gi,'%3F').replace(/=/gi,'%3D').replace(/&/gi,'%26');
- },
- escapeHTML: function(s) {
- return s.toString().split('&').join('&amp;').split('<').join('&lt;').split('"').join('&quot;');
- },
- absolutizeUrl: function(url) {
- var el = document.createElement('div');
- el.innerHTML = '<a href="' + this.escapeHTML(url) + '">x</a>';
- return el.firstChild.href;
- },
- getScriptPath: function(scriptNames) {
- var
- i = 0,
- j,
- path = '',
- name = '',
- script,
- scripts = document.getElementsByTagName('script'),
- il = scripts.length,
- jl = scriptNames.length;
-
- for (; i < il; i++) {
- script = scripts[i].src;
- for (j = 0; j < jl; j++) {
- name = scriptNames[j];
- if (script.indexOf(name) > -1) {
- path = script.substring(0, script.indexOf(name));
- break;
- }
- }
- if (path !== '') {
- break;
- }
- }
- return path;
- },
- secondsToTimeCode: function(time, forceHours, showFrameCount, fps) {
- //add framecount
- if (typeof showFrameCount == 'undefined') {
- showFrameCount=false;
- } else if(typeof fps == 'undefined') {
- fps = 25;
- }
-
- var hours = Math.floor(time / 3600) % 24,
- minutes = Math.floor(time / 60) % 60,
- seconds = Math.floor(time % 60),
- frames = Math.floor(((time % 1)*fps).toFixed(3)),
- result =
- ( (forceHours || hours > 0) ? (hours < 10 ? '0' + hours : hours) + ':' : '')
- + (minutes < 10 ? '0' + minutes : minutes) + ':'
- + (seconds < 10 ? '0' + seconds : seconds)
- + ((showFrameCount) ? ':' + (frames < 10 ? '0' + frames : frames) : '');
-
- return result;
- },
-
- timeCodeToSeconds: function(hh_mm_ss_ff, forceHours, showFrameCount, fps){
- if (typeof showFrameCount == 'undefined') {
- showFrameCount=false;
- } else if(typeof fps == 'undefined') {
- fps = 25;
- }
-
- var tc_array = hh_mm_ss_ff.split(":"),
- tc_hh = parseInt(tc_array[0], 10),
- tc_mm = parseInt(tc_array[1], 10),
- tc_ss = parseInt(tc_array[2], 10),
- tc_ff = 0,
- tc_in_seconds = 0;
-
- if (showFrameCount) {
- tc_ff = parseInt(tc_array[3])/fps;
- }
-
- tc_in_seconds = ( tc_hh * 3600 ) + ( tc_mm * 60 ) + tc_ss + tc_ff;
-
- return tc_in_seconds;
- },
-
- /* borrowed from SWFObject: http://code.google.com/p/swfobject/source/browse/trunk/swfobject/src/swfobject.js#474 */
- removeSwf: function(id) {
- var obj = document.getElementById(id);
- if (obj && obj.nodeName == "OBJECT") {
- if (mejs.MediaFeatures.isIE) {
- obj.style.display = "none";
- (function(){
- if (obj.readyState == 4) {
- mejs.Utility.removeObjectInIE(id);
- } else {
- setTimeout(arguments.callee, 10);
- }
- })();
- } else {
- obj.parentNode.removeChild(obj);
- }
- }
- },
- removeObjectInIE: function(id) {
- var obj = document.getElementById(id);
- if (obj) {
- for (var i in obj) {
- if (typeof obj[i] == "function") {
- obj[i] = null;
- }
- }
- obj.parentNode.removeChild(obj);
- }
- }
+// Namespace
+var mejs = mejs || {};
+
+// version number
+mejs.version = '2.8.1';
+
+// player number (for missing, same id attr)
+mejs.meIndex = 0;
+
+// media types accepted by plugins
+mejs.plugins = {
+ silverlight: [
+ {version: [3,0], types: ['video/mp4','video/m4v','video/mov','video/wmv','audio/wma','audio/m4a','audio/mp3','audio/wav','audio/mpeg']}
+ ],
+ flash: [
+ {version: [9,0,124], types: ['video/mp4','video/m4v','video/mov','video/flv','video/x-flv','audio/flv','audio/x-flv','audio/mp3','audio/m4a','audio/mpeg', 'video/youtube', 'video/x-youtube']}
+ //,{version: [12,0], types: ['video/webm']} // for future reference (hopefully!)
+ ],
+ youtube: [
+ {version: null, types: ['video/youtube', 'video/x-youtube']}
+ ],
+ vimeo: [
+ {version: null, types: ['video/vimeo']}
+ ]
};
+
+/*
+Utility methods
+*/
+mejs.Utility = {
+ encodeUrl: function(url) {
+ return encodeURIComponent(url); //.replace(/\?/gi,'%3F').replace(/=/gi,'%3D').replace(/&/gi,'%26');
+ },
+ escapeHTML: function(s) {
+ return s.toString().split('&').join('&amp;').split('<').join('&lt;').split('"').join('&quot;');
+ },
+ absolutizeUrl: function(url) {
+ var el = document.createElement('div');
+ el.innerHTML = '<a href="' + this.escapeHTML(url) + '">x</a>';
+ return el.firstChild.href;
+ },
+ getScriptPath: function(scriptNames) {
+ var
+ i = 0,
+ j,
+ path = '',
+ name = '',
+ script,
+ scripts = document.getElementsByTagName('script'),
+ il = scripts.length,
+ jl = scriptNames.length;
+
+ for (; i < il; i++) {
+ script = scripts[i].src;
+ for (j = 0; j < jl; j++) {
+ name = scriptNames[j];
+ if (script.indexOf(name) > -1) {
+ path = script.substring(0, script.indexOf(name));
+ break;
+ }
+ }
+ if (path !== '') {
+ break;
+ }
+ }
+ return path;
+ },
+ secondsToTimeCode: function(time, forceHours, showFrameCount, fps) {
+ //add framecount
+ if (typeof showFrameCount == 'undefined') {
+ showFrameCount=false;
+ } else if(typeof fps == 'undefined') {
+ fps = 25;
+ }
+
+ var hours = Math.floor(time / 3600) % 24,
+ minutes = Math.floor(time / 60) % 60,
+ seconds = Math.floor(time % 60),
+ frames = Math.floor(((time % 1)*fps).toFixed(3)),
+ result =
+ ( (forceHours || hours > 0) ? (hours < 10 ? '0' + hours : hours) + ':' : '')
+ + (minutes < 10 ? '0' + minutes : minutes) + ':'
+ + (seconds < 10 ? '0' + seconds : seconds)
+ + ((showFrameCount) ? ':' + (frames < 10 ? '0' + frames : frames) : '');
+
+ return result;
+ },
+
+ timeCodeToSeconds: function(hh_mm_ss_ff, forceHours, showFrameCount, fps){
+ if (typeof showFrameCount == 'undefined') {
+ showFrameCount=false;
+ } else if(typeof fps == 'undefined') {
+ fps = 25;
+ }
+
+ var tc_array = hh_mm_ss_ff.split(":"),
+ tc_hh = parseInt(tc_array[0], 10),
+ tc_mm = parseInt(tc_array[1], 10),
+ tc_ss = parseInt(tc_array[2], 10),
+ tc_ff = 0,
+ tc_in_seconds = 0;
+
+ if (showFrameCount) {
+ tc_ff = parseInt(tc_array[3])/fps;
+ }
+
+ tc_in_seconds = ( tc_hh * 3600 ) + ( tc_mm * 60 ) + tc_ss + tc_ff;
+
+ return tc_in_seconds;
+ },
+
+ /* borrowed from SWFObject: http://code.google.com/p/swfobject/source/browse/trunk/swfobject/src/swfobject.js#474 */
+ removeSwf: function(id) {
+ var obj = document.getElementById(id);
+ if (obj && obj.nodeName == "OBJECT") {
+ if (mejs.MediaFeatures.isIE) {
+ obj.style.display = "none";
+ (function(){
+ if (obj.readyState == 4) {
+ mejs.Utility.removeObjectInIE(id);
+ } else {
+ setTimeout(arguments.callee, 10);
+ }
+ })();
+ } else {
+ obj.parentNode.removeChild(obj);
+ }
+ }
+ },
+ removeObjectInIE: function(id) {
+ var obj = document.getElementById(id);
+ if (obj) {
+ for (var i in obj) {
+ if (typeof obj[i] == "function") {
+ obj[i] = null;
+ }
+ }
+ obj.parentNode.removeChild(obj);
+ }
+ }
+};
// Core detector, plugins are added below
@@ -1025,9 +1025,6 @@ mejs.HtmlMediaElementShim = {
},
getTypeFromFile: function(url) {
- // Remove query parameters
- url = url.substring(0, url.lastIndexOf('?'));
-
var ext = url.substring(url.lastIndexOf('.') + 1);
return (/(mp4|m4v|ogg|ogv|webm|flv|wmv|mpeg|mov)/gi.test(ext) ? 'video' : 'audio') + '/' + ext;
},
@@ -1518,2706 +1515,3 @@ function onYouTubePlayerReady(id) {
window.mejs = mejs;
window.MediaElement = mejs.MediaElement;
-
-/*!
- * MediaElementPlayer
- * http://mediaelementjs.com/
- *
- * Creates a controller bar for HTML5 <video> add <audio> tags
- * using jQuery and MediaElement.js (HTML5 Flash/Silverlight wrapper)
- *
- * Copyright 2010-2012, John Dyer (http://j.hn/)
- * Dual licensed under the MIT or GPL Version 2 licenses.
- *
- */
-if (typeof jQuery != 'undefined') {
- mejs.$ = jQuery;
-} else if (typeof ender != 'undefined') {
- mejs.$ = ender;
-}
-(function ($) {
-
- // default player values
- mejs.MepDefaults = {
- // url to poster (to fix iOS 3.x)
- poster: '',
- // default if the <video width> is not specified
- defaultVideoWidth: 480,
- // default if the <video height> is not specified
- defaultVideoHeight: 270,
- // if set, overrides <video width>
- videoWidth: -1,
- // if set, overrides <video height>
- videoHeight: -1,
- // default if the user doesn't specify
- defaultAudioWidth: 400,
- // default if the user doesn't specify
- defaultAudioHeight: 30,
- // width of audio player
- audioWidth: -1,
- // height of audio player
- audioHeight: -1,
- // initial volume when the player starts (overrided by user cookie)
- startVolume: 0.8,
- // useful for <audio> player loops
- loop: false,
- // resize to media dimensions
- enableAutosize: true,
- // forces the hour marker (##:00:00)
- alwaysShowHours: false,
-
- // show framecount in timecode (##:00:00:00)
- showTimecodeFrameCount: false,
- // used when showTimecodeFrameCount is set to true
- framesPerSecond: 25,
-
- // automatically calculate the width of the progress bar based on the sizes of other elements
- autosizeProgress : true,
- // Hide controls when playing and mouse is not over the video
- alwaysShowControls: false,
- // force iPad's native controls
- iPadUseNativeControls: false,
- // force iPhone's native controls
- iPhoneUseNativeControls: false,
- // force Android's native controls
- AndroidUseNativeControls: false,
- // features to show
- features: ['playpause','current','progress','duration','tracks','volume','fullscreen'],
- // only for dynamic
- isVideo: true,
-
- // turns keyboard support on and off for this instance
- enableKeyboard: true,
-
- // whenthis player starts, it will pause other players
- pauseOtherPlayers: true,
-
- // array of keyboard actions such as play pause
- keyActions: [
- {
- keys: [
- 32, // SPACE
- 179 // GOOGLE play/pause button
- ],
- action: function(player, media) {
- if (media.paused || media.ended) {
- media.play();
- } else {
- media.pause();
- }
- }
- },
- {
- keys: [38], // UP
- action: function(player, media) {
- var newVolume = Math.min(media.volume + 0.1, 1);
- media.setVolume(newVolume);
- }
- },
- {
- keys: [40], // DOWN
- action: function(player, media) {
- var newVolume = Math.max(media.volume - 0.1, 0);
- media.setVolume(newVolume);
- }
- },
- {
- keys: [
- 37, // LEFT
- 227 // Google TV rewind
- ],
- action: function(player, media) {
- if (!isNaN(media.duration) && media.duration > 0) {
- if (player.isVideo) {
- player.showControls();
- player.startControlsTimer();
- }
-
- // 5%
- var newTime = Math.max(media.currentTime - (media.duration * 0.05), 0);
- media.setCurrentTime(newTime);
- }
- }
- },
- {
- keys: [
- 39, // RIGHT
- 228 // Google TV forward
- ],
- action: function(player, media) {
- if (!isNaN(media.duration) && media.duration > 0) {
- if (player.isVideo) {
- player.showControls();
- player.startControlsTimer();
- }
-
- // 5%
- var newTime = Math.min(media.currentTime + (media.duration * 0.05), media.duration);
- media.setCurrentTime(newTime);
- }
- }
- },
- {
- keys: [70], // f
- action: function(player, media) {
- if (typeof player.enterFullScreen != 'undefined') {
- if (player.isFullScreen) {
- player.exitFullScreen();
- } else {
- player.enterFullScreen();
- }
- }
- }
- }
- ]
- };
-
- mejs.mepIndex = 0;
-
- mejs.players = [];
-
- // wraps a MediaElement object in player controls
- mejs.MediaElementPlayer = function(node, o) {
- // enforce object, even without "new" (via John Resig)
- if ( !(this instanceof mejs.MediaElementPlayer) ) {
- return new mejs.MediaElementPlayer(node, o);
- }
-
- var t = this;
-
- // these will be reset after the MediaElement.success fires
- t.$media = t.$node = $(node);
- t.node = t.media = t.$media[0];
-
- // check for existing player
- if (typeof t.node.player != 'undefined') {
- return t.node.player;
- } else {
- // attach player to DOM node for reference
- t.node.player = t;
- }
-
-
- // try to get options from data-mejsoptions
- if (typeof o == 'undefined') {
- o = t.$node.data('mejsoptions');
- }
-
- // extend default options
- t.options = $.extend({},mejs.MepDefaults,o);
-
- // add to player array (for focus events)
- mejs.players.push(t);
-
- // start up
- t.init();
-
- return t;
- };
-
- // actual player
- mejs.MediaElementPlayer.prototype = {
-
- hasFocus: false,
-
- controlsAreVisible: true,
-
- init: function() {
-
- var
- t = this,
- mf = mejs.MediaFeatures,
- // options for MediaElement (shim)
- meOptions = $.extend(true, {}, t.options, {
- success: function(media, domNode) { t.meReady(media, domNode); },
- error: function(e) { t.handleError(e);}
- }),
- tagName = t.media.tagName.toLowerCase();
-
- t.isDynamic = (tagName !== 'audio' && tagName !== 'video');
-
- if (t.isDynamic) {
- // get video from src or href?
- t.isVideo = t.options.isVideo;
- } else {
- t.isVideo = (tagName !== 'audio' && t.options.isVideo);
- }
-
- // use native controls in iPad, iPhone, and Android
- if ((mf.isiPad && t.options.iPadUseNativeControls) || (mf.isiPhone && t.options.iPhoneUseNativeControls)) {
-
- // add controls and stop
- t.$media.attr('controls', 'controls');
-
- // attempt to fix iOS 3 bug
- //t.$media.removeAttr('poster');
- // no Issue found on iOS3 -ttroxell
-
- // override Apple's autoplay override for iPads
- if (mf.isiPad && t.media.getAttribute('autoplay') !== null) {
- t.media.load();
- t.media.play();
- }
-
- } else if (mf.isAndroid && t.AndroidUseNativeControls) {
-
- // leave default player
-
- } else {
-
- // DESKTOP: use MediaElementPlayer controls
-
- // remove native controls
- t.$media.removeAttr('controls');
-
- // unique ID
- t.id = 'mep_' + mejs.mepIndex++;
-
- // build container
- t.container =
- $('<div id="' + t.id + '" class="mejs-container">'+
- '<div class="mejs-inner">'+
- '<div class="mejs-mediaelement"></div>'+
- '<div class="mejs-layers"></div>'+
- '<div class="mejs-controls"></div>'+
- '<div class="mejs-clear"></div>'+
- '</div>' +
- '</div>')
- .addClass(t.$media[0].className)
- .insertBefore(t.$media);
-
- // add classes for user and content
- t.container.addClass(
- (mf.isAndroid ? 'mejs-android ' : '') +
- (mf.isiOS ? 'mejs-ios ' : '') +
- (mf.isiPad ? 'mejs-ipad ' : '') +
- (mf.isiPhone ? 'mejs-iphone ' : '') +
- (t.isVideo ? 'mejs-video ' : 'mejs-audio ')
- );
-
-
- // move the <video/video> tag into the right spot
- if (mf.isiOS) {
-
- // sadly, you can't move nodes in iOS, so we have to destroy and recreate it!
- var $newMedia = t.$media.clone();
-
- t.container.find('.mejs-mediaelement').append($newMedia);
-
- t.$media.remove();
- t.$node = t.$media = $newMedia;
- t.node = t.media = $newMedia[0]
-
- } else {
-
- // normal way of moving it into place (doesn't work on iOS)
- t.container.find('.mejs-mediaelement').append(t.$media);
- }
-
- // find parts
- t.controls = t.container.find('.mejs-controls');
- t.layers = t.container.find('.mejs-layers');
-
- // determine the size
-
- /* size priority:
- (1) videoWidth (forced),
- (2) style="width;height;"
- (3) width attribute,
- (4) defaultVideoWidth (for unspecified cases)
- */
-
- var capsTagName = tagName.substring(0,1).toUpperCase() + tagName.substring(1);
-
- if (t.options[tagName + 'Width'] > 0 || t.options[tagName + 'Width'].toString().indexOf('%') > -1) {
- t.width = t.options[tagName + 'Width'];
- } else if (t.media.style.width !== '' && t.media.style.width !== null) {
- t.width = t.media.style.width;
- } else if (t.media.getAttribute('width') !== null) {
- t.width = t.$media.attr('width');
- } else {
- t.width = t.options['default' + capsTagName + 'Width'];
- }
-
- if (t.options[tagName + 'Height'] > 0 || t.options[tagName + 'Height'].toString().indexOf('%') > -1) {
- t.height = t.options[tagName + 'Height'];
- } else if (t.media.style.height !== '' && t.media.style.height !== null) {
- t.height = t.media.style.height;
- } else if (t.$media[0].getAttribute('height') !== null) {
- t.height = t.$media.attr('height');
- } else {
- t.height = t.options['default' + capsTagName + 'Height'];
- }
-
- // set the size, while we wait for the plugins to load below
- t.setPlayerSize(t.width, t.height);
-
- // create MediaElementShim
- meOptions.pluginWidth = t.height;
- meOptions.pluginHeight = t.width;
- }
-
-
-
- // create MediaElement shim
- mejs.MediaElement(t.$media[0], meOptions);
- },
-
- showControls: function(doAnimation) {
- var t = this;
-
- doAnimation = typeof doAnimation == 'undefined' || doAnimation;
-
- if (t.controlsAreVisible)
- return;
-
- if (doAnimation) {
- t.controls
- .css('visibility','visible')
- .stop(true, true).fadeIn(200, function() {t.controlsAreVisible = true;});
-
- // any additional controls people might add and want to hide
- t.container.find('.mejs-control')
- .css('visibility','visible')
- .stop(true, true).fadeIn(200, function() {t.controlsAreVisible = true;});
-
- } else {
- t.controls
- .css('visibility','visible')
- .css('display','block');
-
- // any additional controls people might add and want to hide
- t.container.find('.mejs-control')
- .css('visibility','visible')
- .css('display','block');
-
- t.controlsAreVisible = true;
- }
-
- t.setControlsSize();
-
- },
-
- hideControls: function(doAnimation) {
- var t = this;
-
- doAnimation = typeof doAnimation == 'undefined' || doAnimation;
-
- if (!t.controlsAreVisible)
- return;
-
- if (doAnimation) {
- // fade out main controls
- t.controls.stop(true, true).fadeOut(200, function() {
- $(this)
- .css('visibility','hidden')
- .css('display','block');
-
- t.controlsAreVisible = false;
- });
-
- // any additional controls people might add and want to hide
- t.container.find('.mejs-control').stop(true, true).fadeOut(200, function() {
- $(this)
- .css('visibility','hidden')
- .css('display','block');
- });
- } else {
-
- // hide main controls
- t.controls
- .css('visibility','hidden')
- .css('display','block');
-
- // hide others
- t.container.find('.mejs-control')
- .css('visibility','hidden')
- .css('display','block');
-
- t.controlsAreVisible = false;
- }
- },
-
- controlsTimer: null,
-
- startControlsTimer: function(timeout) {
-
- var t = this;
-
- timeout = typeof timeout != 'undefined' ? timeout : 1500;
-
- t.killControlsTimer('start');
-
- t.controlsTimer = setTimeout(function() {
- //console.log('timer fired');
- t.hideControls();
- t.killControlsTimer('hide');
- }, timeout);
- },
-
- killControlsTimer: function(src) {
-
- var t = this;
-
- if (t.controlsTimer !== null) {
- clearTimeout(t.controlsTimer);
- delete t.controlsTimer;
- t.controlsTimer = null;
- }
- },
-
- controlsEnabled: true,
-
- disableControls: function() {
- var t= this;
-
- t.killControlsTimer();
- t.hideControls(false);
- this.controlsEnabled = false;
- },
-
- enableControls: function() {
- var t= this;
-
- t.showControls(false);
-
- t.controlsEnabled = true;
- },
-
-
- // Sets up all controls and events
- meReady: function(media, domNode) {
-
-
- var t = this,
- mf = mejs.MediaFeatures,
- autoplayAttr = domNode.getAttribute('autoplay'),
- autoplay = !(typeof autoplayAttr == 'undefined' || autoplayAttr === null || autoplayAttr === 'false'),
- featureIndex,
- feature;
-
- // make sure it can't create itself again if a plugin reloads
- if (t.created)
- return;
- else
- t.created = true;
-
- t.media = media;
- t.domNode = domNode;
-
- if (!(mf.isAndroid && t.options.AndroidUseNativeControls) && !(mf.isiPad && t.options.iPadUseNativeControls) && !(mf.isiPhone && t.options.iPhoneUseNativeControls)) {
-
- // two built in features
- t.buildposter(t, t.controls, t.layers, t.media);
- t.buildkeyboard(t, t.controls, t.layers, t.media);
- t.buildoverlays(t, t.controls, t.layers, t.media);
-
- // grab for use by features
- t.findTracks();
-
- // add user-defined features/controls
- for (featureIndex in t.options.features) {
- feature = t.options.features[featureIndex];
- if (t['build' + feature]) {
- try {
- t['build' + feature](t, t.controls, t.layers, t.media);
- } catch (e) {
- // TODO: report control error
- //throw e;
- //console.log('error building ' + feature);
- //console.log(e);
- }
- }
- }
-
- t.container.trigger('controlsready');
-
- // reset all layers and controls
- t.setPlayerSize(t.width, t.height);
- t.setControlsSize();
-
-
- // controls fade
- if (t.isVideo) {
-
- if (mejs.MediaFeatures.hasTouch) {
-
- // for touch devices (iOS, Android)
- // show/hide without animation on touch
-
- t.$media.bind('touchstart', function() {
-
-
- // toggle controls
- if (t.controlsAreVisible) {
- t.hideControls(false);
- } else {
- if (t.controlsEnabled) {
- t.showControls(false);
- }
- }
- });
-
- } else {
- // click controls
- var clickElement = (t.media.pluginType == 'native') ? t.$media : $(t.media.pluginElement);
-
- // click to play/pause
- clickElement.click(function() {
- if (media.paused) {
- media.play();
- } else {
- media.pause();
- }
- });
-
-
- // show/hide controls
- t.container
- .bind('mouseenter mouseover', function () {
- if (t.controlsEnabled) {
- if (!t.options.alwaysShowControls) {
- t.killControlsTimer('enter');
- t.showControls();
- t.startControlsTimer(2500);
- }
- }
- })
- .bind('mousemove', function() {
- if (t.controlsEnabled) {
- if (!t.controlsAreVisible) {
- t.showControls();
- }
- //t.killControlsTimer('move');
- if (!t.options.alwaysShowControls) {
- t.startControlsTimer(2500);
- }
- }
- })
- .bind('mouseleave', function () {
- if (t.controlsEnabled) {
- if (!t.media.paused && !t.options.alwaysShowControls) {
- t.startControlsTimer(1000);
- }
- }
- });
- }
-
- // check for autoplay
- if (autoplay && !t.options.alwaysShowControls) {
- t.hideControls();
- }
-
- // resizer
- if (t.options.enableAutosize) {
- t.media.addEventListener('loadedmetadata', function(e) {
- // if the <video height> was not set and the options.videoHeight was not set
- // then resize to the real dimensions
- if (t.options.videoHeight <= 0 && t.domNode.getAttribute('height') === null && !isNaN(e.target.videoHeight)) {
- t.setPlayerSize(e.target.videoWidth, e.target.videoHeight);
- t.setControlsSize();
- t.media.setVideoSize(e.target.videoWidth, e.target.videoHeight);
- }
- }, false);
- }
- }
-
- // EVENTS
-
- // FOCUS: when a video starts playing, it takes focus from other players (possibily pausing them)
- media.addEventListener('play', function() {
-
- // go through all other players
- for (var i=0, il=mejs.players.length; i<il; i++) {
- var p = mejs.players[i];
- if (p.id != t.id && t.options.pauseOtherPlayers && !p.paused && !p.ended) {
- p.pause();
- }
- p.hasFocus = false;
- }
-
- t.hasFocus = true;
- },false);
-
-
- // ended for all
- t.media.addEventListener('ended', function (e) {
- try{
- t.media.setCurrentTime(0);
- } catch (exp) {
-
- }
- t.media.pause();
-
- if (t.setProgressRail)
- t.setProgressRail();
- if (t.setCurrentRail)
- t.setCurrentRail();
-
- if (t.options.loop) {
- t.media.play();
- } else if (!t.options.alwaysShowControls && t.controlsEnabled) {
- t.showControls();
- }
- }, false);
-
- // resize on the first play
- t.media.addEventListener('loadedmetadata', function(e) {
- if (t.updateDuration) {
- t.updateDuration();
- }
- if (t.updateCurrent) {
- t.updateCurrent();
- }
-
- if (!t.isFullScreen) {
- t.setPlayerSize(t.width, t.height);
- t.setControlsSize();
- }
- }, false);
-
-
- // webkit has trouble doing this without a delay
- setTimeout(function () {
- t.setPlayerSize(t.width, t.height);
- t.setControlsSize();
- }, 50);
-
- // adjust controls whenever window sizes (used to be in fullscreen only)
- $(window).resize(function() {
-
- // don't resize for fullscreen mode
- if ( !(t.isFullScreen || (mejs.MediaFeatures.hasTrueNativeFullScreen && document.webkitIsFullScreen)) ) {
- t.setPlayerSize(t.width, t.height);
- }
-
- // always adjust controls
- t.setControlsSize();
- });
-
- // TEMP: needs to be moved somewhere else
- if (t.media.pluginType == 'youtube') {
- t.container.find('.mejs-overlay-play').hide();
- }
- }
-
- // force autoplay for HTML5
- if (autoplay && media.pluginType == 'native') {
- media.load();
- media.play();
- }
-
-
- if (t.options.success) {
-
- if (typeof t.options.success == 'string') {
- window[t.options.success](t.media, t.domNode, t);
- } else {
- t.options.success(t.media, t.domNode, t);
- }
- }
- },
-
- handleError: function(e) {
- var t = this;
-
- t.controls.hide();
-
- // Tell user that the file cannot be played
- if (t.options.error) {
- t.options.error(e);
- }
- },
-
- setPlayerSize: function(width,height) {
- var t = this;
-
- if (typeof width != 'undefined')
- t.width = width;
-
- if (typeof height != 'undefined')
- t.height = height;
-
- // detect 100% mode
- if (t.height.toString().indexOf('%') > 0) {
-
- // do we have the native dimensions yet?
- var
- nativeWidth = (t.media.videoWidth && t.media.videoWidth > 0) ? t.media.videoWidth : t.options.defaultVideoWidth,
- nativeHeight = (t.media.videoHeight && t.media.videoHeight > 0) ? t.media.videoHeight : t.options.defaultVideoHeight,
- parentWidth = t.container.parent().width(),
- newHeight = parseInt(parentWidth * nativeHeight/nativeWidth, 10);
-
- if (t.container.parent()[0].tagName.toLowerCase() === 'body') { // && t.container.siblings().count == 0) {
- parentWidth = $(window).width();
- newHeight = $(window).height();
- }
-
-
- // set outer container size
- t.container
- .width(parentWidth)
- .height(newHeight);
-
- // set native <video>
- t.$media
- .width('100%')
- .height('100%');
-
- // set shims
- t.container.find('object, embed, iframe')
- .width('100%')
- .height('100%');
-
- // if shim is ready, send the size to the embeded plugin
- if (t.media.setVideoSize)
- t.media.setVideoSize(parentWidth, newHeight);
-
- // set the layers
- t.layers.children('.mejs-layer')
- .width('100%')
- .height('100%');
-
-
- } else {
-
- t.container
- .width(t.width)
- .height(t.height);
-
- t.layers.children('.mejs-layer')
- .width(t.width)
- .height(t.height);
-
- }
- },
-
- setControlsSize: function() {
- var t = this,
- usedWidth = 0,
- railWidth = 0,
- rail = t.controls.find('.mejs-time-rail'),
- total = t.controls.find('.mejs-time-total'),
- current = t.controls.find('.mejs-time-current'),
- loaded = t.controls.find('.mejs-time-loaded'),
- others = rail.siblings();
-
-
- // allow the size to come from custom CSS
- if (t.options && !t.options.autosizeProgress) {
- // Also, frontends devs can be more flexible
- // due the opportunity of absolute positioning.
- railWidth = parseInt(rail.css('width'));
- }
-
- // attempt to autosize
- if (railWidth === 0 || !railWidth) {
-
- // find the size of all the other controls besides the rail
- others.each(function() {
- if ($(this).css('position') != 'absolute') {
- usedWidth += $(this).outerWidth(true);
- }
- });
-
- // fit the rail into the remaining space
- railWidth = t.controls.width() - usedWidth - (rail.outerWidth(true) - rail.outerWidth(false));
- }
-
- // outer area
- rail.width(railWidth);
- // dark space
- total.width(railWidth - (total.outerWidth(true) - total.width()));
-
- if (t.setProgressRail)
- t.setProgressRail();
- if (t.setCurrentRail)
- t.setCurrentRail();
- },
-
-
- buildposter: function(player, controls, layers, media) {
- var t = this,
- poster =
- $('<div class="mejs-poster mejs-layer">' +
- '</div>')
- .appendTo(layers),
- posterUrl = player.$media.attr('poster');
-
- // prioriy goes to option (this is useful if you need to support iOS 3.x (iOS completely fails with poster)
- if (player.options.poster !== '') {
- posterUrl = player.options.poster;
- }
-
- // second, try the real poster
- if (posterUrl !== '' && posterUrl != null) {
- t.setPoster(posterUrl);
- } else {
- poster.hide();
- }
-
- media.addEventListener('play',function() {
- poster.hide();
- }, false);
- },
-
- setPoster: function(url) {
- var t = this,
- posterDiv = t.container.find('.mejs-poster'),
- posterImg = posterDiv.find('img');
-
- if (posterImg.length == 0) {
- posterImg = $('<img width="100%" height="100%" />').appendTo(posterDiv);
- }
-
- posterImg.attr('src', url);
- },
-
- buildoverlays: function(player, controls, layers, media) {
- if (!player.isVideo)
- return;
-
- var
- loading =
- $('<div class="mejs-overlay mejs-layer">'+
- '<div class="mejs-overlay-loading"><span></span></div>'+
- '</div>')
- .hide() // start out hidden
- .appendTo(layers),
- error =
- $('<div class="mejs-overlay mejs-layer">'+
- '<div class="mejs-overlay-error"></div>'+
- '</div>')
- .hide() // start out hidden