]> _ Git - fluidbook-html5.git/commitdiff
projects / fluidbook-html5.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 498da9c)
Commit remaining files before merging
authorStephen Cameron <stephen@Stephen.local>
Fri, 2 Jun 2017 10:04:12 +0000 (12:04 +0200)
committerStephen Cameron <stephen@Stephen.local>
Fri, 2 Jun 2017 10:04:12 +0000 (12:04 +0200)
_index.html patch | blob | history
js/libs/fluidbook/fluidbook.links.js patch | blob | history
js/libs/fluidbook/fluidbook.video.js patch | blob | history
style/videojs/videojs.css patch | blob | history
style/videojs/videojs.less patch | blob | history

diff --git a/_index.html b/_index.html
index 786bd25ec398507216d2aa8c6344da0b5fe02e11..8cfd2bdcb61549f5041a56afa9cc926d45b9d1ac 100644 (file)
--- a/_index.html
+++ b/_index.html
@@ -18,7 +18,7 @@
        <!-- $ga -->
        <!-- $favicon -->
 </head>
-<body style="background-color:#<!-- $bgcolor -->;" data-branch="html5video">
+<body style="background-color:#<!-- $bgcolor -->;" data-branch="master">
 <!--googleoff: all-->
 <!-- $svg -->
 <div id="message"><!-- $message --></div>
diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js
index b799880f46f3bf7b61b74a3734b699bb93b08d31..085b21b23ee6bd0d62c9d69599eb37cbffbe80b0 100644 (file)
--- a/js/libs/fluidbook/fluidbook.links.js
+++ b/js/libs/fluidbook/fluidbook.links.js
@@ -62,7 +62,7 @@ FluidbookLinks.prototype = {
         if (this.fluidbook.datas.linkBlinkTime > 0 && this.fluidbook.datas.mobileLinksRevealAnim) {
             setTimeout(function () {
                 $this.animateLinks();
-            }, 200);
+            }, 1000);
         }
         setTimeout(function () {
             console.info('initVideos called from fluidbook.links');
diff --git a/js/libs/fluidbook/fluidbook.video.js b/js/libs/fluidbook/fluidbook.video.js
index e1284ec404c2220b70724979abd5be5c4f6e5190..218519a71b1dadde8bb1cfa66c79a309f258ea51 100644 (file)
--- a/js/libs/fluidbook/fluidbook.video.js
+++ b/js/libs/fluidbook/fluidbook.video.js
@@ -180,33 +180,14 @@ FluidbookVideo.prototype = {
                                var settings = fluidbook.video.players[id];
                                console.log(settings);
 
-                               // In the case of autoplay videos, we don't want the autoplay to fire
-                               // more than once (ie. never after we have these settings reccorded)
-                               // It interferes with play/pausing
-                               player.autoplay(false);
-
                                // Restore settings
                                player.volume(settings.volume);
                                player.muted(settings.muted);
                                player.currentTime(settings.currentTime);
-
-                // Start player to go to current position - necessary even if it will be paused immediately
-                setTimeout(function() { player.play(); }, 100);
-
-                // ToDo: try setting a single (.one(...)) event handler for the "play" event
-
-                player.one('play', function() {
-                    fb('Player has started playing... ID: ' + id);
-                    // Handle pause in here if needed.. Better than using the timeout...
-
-                    if (settings.paused) {
-                        fb(id + ' should be paused');
-                        setTimeout(function() { player.pause(); }, 200);
-                    }
-
-                });
-
-
+                               player.play(); // Start player to go to current position - necessary even if it will be paused immediately
+                               if (settings.paused) {
+                                       player.pause();
+                               }
 
                                // var playPromise = player.play();
                                // if (settings.paused) {
@@ -224,15 +205,7 @@ FluidbookVideo.prototype = {
 
                player.on('pause', function() {
                        fb(id + ' player paused');
-                       // Show play button (ref: http://stackoverflow.com/a/25296575)
-
-                       this.bigPlayButton.show();
-
-                       // Now the issue is that we need to hide it again if we start playing
-                       // So every time we do this, we can create a one-time listener for play events.
-                       player.one('play', function() {
-                               this.bigPlayButton.hide();
-                       });
+                       // Todo: show/hide play button: http://stackoverflow.com/a/25296575
                });
 
                // player.on('fullscreenchange', function() {
@@ -375,8 +348,8 @@ FluidbookVideo.prototype = {
                $('.video-js').each(function() {
                        var id = $(this).attr('id');
 
-                       // When the player is in fullscreen mode or view popup, we don't want to have the controls scaled
-                       if (videojs(id) && (videojs(id).isFullscreen() || $('body').hasClass('view'))) {
+                       // When the player is in fullscreen mode, we don't want to have the controls scaled
+                       if (videojs(id) && videojs(id).isFullscreen()) {
                                $(this).attr('style', ''); // Clear scaling for fullscreen player
                        } else {
                                $(this).css('fontSize', 12 / fluidbook.resize.bookScale);
diff --git a/style/videojs/videojs.css b/style/videojs/videojs.css
index 3b729b4fbab9c72fb0037e17854ff41789ff522d..b38e2c3f4642436a0934454aacdffff097aa495a 100644 (file)
--- a/style/videojs/videojs.css
+++ b/style/videojs/videojs.css
@@ -25,78 +25,78 @@
   font-family: VideoJS;
   font-weight: normal;
   font-style: normal; }
-  .vjs-icon-play:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before, .video-js .vjs-play-control .vjs-icon-placeholder:before {
-    content: "\f101"; }
+.vjs-icon-play:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before, .video-js .vjs-play-control .vjs-icon-placeholder:before {
+  content: "\f101"; }
 
 .vjs-icon-play-circle {
   font-family: VideoJS;
   font-weight: normal;
   font-style: normal; }
-  .vjs-icon-play-circle:before {
-    content: "\f102"; }
+.vjs-icon-play-circle:before {
+  content: "\f102"; }
 
 .vjs-icon-pause, .video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder {
   font-family: VideoJS;
   font-weight: normal;
   font-style: normal; }
-  .vjs-icon-pause:before, .video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder:before {
-    content: "\f103"; }
+.vjs-icon-pause:before, .video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder:before {
+  content: "\f103"; }
 
 .vjs-icon-volume-mute, .video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder {
   font-family: VideoJS;
   font-weight: normal;
   font-style: normal; }
-  .vjs-icon-volume-mute:before, .video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:before {
-    content: "\f104"; }
+.vjs-icon-volume-mute:before, .video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:before {
+  content: "\f104"; }
 
 .vjs-icon-volume-low, .video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder {
   font-family: VideoJS;
   font-weight: normal;
   font-style: normal; }
-  .vjs-icon-volume-low:before, .video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder:before {
-    content: "\f105"; }
+.vjs-icon-volume-low:before, .video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder:before {
+  content: "\f105"; }
 
 .vjs-icon-volume-mid, .video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder {
   font-family: VideoJS;
   font-weight: normal;
   font-style: normal; }
-  .vjs-icon-volume-mid:before, .video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder:before {
-    content: "\f106"; }
+.vjs-icon-volume-mid:before, .video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder:before {
+  content: "\f106"; }
 
 .vjs-icon-volume-high, .video-js .vjs-mute-control .vjs-icon-placeholder {
   font-family: VideoJS;
   font-weight: normal;
   font-style: normal; }
-  .vjs-icon-volume-high:before, .video-js .vjs-mute-control .vjs-icon-placeholder:before {
-    content: "\f107"; }
+.vjs-icon-volume-high:before, .video-js .vjs-mute-control .vjs-icon-placeholder:before {
+  content: "\f107"; }
 
 .vjs-icon-fullscreen-enter, .video-js .vjs-fullscreen-control .vjs-icon-placeholder {
   font-family: VideoJS;
   font-weight: normal;
   font-style: normal; }
-  .vjs-icon-fullscreen-enter:before, .video-js .vjs-fullscreen-control .vjs-icon-placeholder:before {
-    content: "\f108"; }
+.vjs-icon-fullscreen-enter:before, .video-js .vjs-fullscreen-control .vjs-icon-placeholder:before {
+  content: "\f108"; }
 
 .vjs-icon-fullscreen-exit, .video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder {
   font-family: VideoJS;
   font-weight: normal;
   font-style: normal; }
-  .vjs-icon-fullscreen-exit:before, .video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before {
-    content: "\f109"; }
+.vjs-icon-fullscreen-exit:before, .video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before {
+  content: "\f109"; }
 
 .vjs-icon-square {
   font-family: VideoJS;
   font-weight: normal;
   font-style: normal; }
-  .vjs-icon-square:before {
-    content: "\f10a"; }
+.vjs-icon-square:before {
+  content: "\f10a"; }
 
 .vjs-icon-spinner {
   font-family: VideoJS;
   font-weight: normal;
   font-style: normal; }
-  .vjs-icon-spinner:before {
-    content: "\f10b"; }
+.vjs-icon-spinner:before {
+  content: "\f10b"; }
 
 .vjs-icon-subtitles, .video-js .vjs-subtitles-button .vjs-icon-placeholder, .video-js .vjs-subs-caps-button .vjs-icon-placeholder,
 .video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder,
@@ -106,140 +106,140 @@
   font-family: VideoJS;
   font-weight: normal;
   font-style: normal; }
-  .vjs-icon-subtitles:before, .video-js .vjs-subtitles-button .vjs-icon-placeholder:before, .video-js .vjs-subs-caps-button .vjs-icon-placeholder:before,
-  .video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder:before,
-  .video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder:before,
-  .video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder:before,
-  .video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder:before {
-    content: "\f10c"; }
+.vjs-icon-subtitles:before, .video-js .vjs-subtitles-button .vjs-icon-placeholder:before, .video-js .vjs-subs-caps-button .vjs-icon-placeholder:before,
+.video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder:before,
+.video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder:before,
+.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder:before,
+.video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder:before {
+  content: "\f10c"; }
 
 .vjs-icon-captions, .video-js .vjs-captions-button .vjs-icon-placeholder, .video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder,
 .video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder {
   font-family: VideoJS;
   font-weight: normal;
   font-style: normal; }
-  .vjs-icon-captions:before, .video-js .vjs-captions-button .vjs-icon-placeholder:before, .video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder:before,
-  .video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder:before {
-    content: "\f10d"; }
+.vjs-icon-captions:before, .video-js .vjs-captions-button .vjs-icon-placeholder:before, .video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder:before,
+.video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder:before {
+  content: "\f10d"; }
 
 .vjs-icon-chapters, .video-js .vjs-chapters-button .vjs-icon-placeholder {
   font-family: VideoJS;
   font-weight: normal;
   font-style: normal; }
-  .vjs-icon-chapters:before, .video-js .vjs-chapters-button .vjs-icon-placeholder:before {
-    content: "\f10e"; }
+.vjs-icon-chapters:before, .video-js .vjs-chapters-button .vjs-icon-placeholder:before {
+  content: "\f10e"; }
 
 .vjs-icon-share {
   font-family: VideoJS;
   font-weight: normal;
   font-style: normal; }
-  .vjs-icon-share:before {
-    content: "\f10f"; }
+.vjs-icon-share:before {
+  content: "\f10f"; }
 
 .vjs-icon-cog {
   font-family: VideoJS;
   font-weight: normal;
   font-style: normal; }
-  .vjs-icon-cog:before {
-    content: "\f110"; }
+.vjs-icon-cog:before {
+  content: "\f110"; }
 
 .vjs-icon-circle, .video-js .vjs-play-progress, .video-js .vjs-volume-level {
   font-family: VideoJS;
   font-weight: normal;
   font-style: normal; }
-  .vjs-icon-circle:before, .video-js .vjs-play-progress:before, .video-js .vjs-volume-level:before {
-    content: "\f111"; }
+.vjs-icon-circle:before, .video-js .vjs-play-progress:before, .video-js .vjs-volume-level:before {
+  content: "\f111"; }
 
 .vjs-icon-circle-outline {
   font-family: VideoJS;
   font-weight: normal;
   font-style: normal; }
-  .vjs-icon-circle-outline:before {
-    content: "\f112"; }
+.vjs-icon-circle-outline:before {
+  content: "\f112"; }
 
 .vjs-icon-circle-inner-circle {
   font-family: VideoJS;
   font-weight: normal;
   font-style: normal; }
-  .vjs-icon-circle-inner-circle:before {
-    content: "\f113"; }
+.vjs-icon-circle-inner-circle:before {
+  content: "\f113"; }
 
 .vjs-icon-hd {
   font-family: VideoJS;
   font-weight: normal;
   font-style: normal; }
-  .vjs-icon-hd:before {
-    content: "\f114"; }
+.vjs-icon-hd:before {
+  content: "\f114"; }
 
 .vjs-icon-cancel, .video-js .vjs-control.vjs-close-button .vjs-icon-placeholder {
   font-family: VideoJS;
   font-weight: normal;
   font-style: normal; }
-  .vjs-icon-cancel:before, .video-js .vjs-control.vjs-close-button .vjs-icon-placeholder:before {
-    content: "\f115"; }
+.vjs-icon-cancel:before, .video-js .vjs-control.vjs-close-button .vjs-icon-placeholder:before {
+  content: "\f115"; }
 
 .vjs-icon-replay, .video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder {
   font-family: VideoJS;
   font-weight: normal;
   font-style: normal; }
-  .vjs-icon-replay:before, .video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder:before {
-    content: "\f116"; }
+.vjs-icon-replay:before, .video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder:before {
+  content: "\f116"; }
 
 .vjs-icon-facebook {
   font-family: VideoJS;
   font-weight: normal;
   font-style: normal; }
-  .vjs-icon-facebook:before {
-    content: "\f117"; }
+.vjs-icon-facebook:before {
+  content: "\f117"; }
 
 .vjs-icon-gplus {
   font-family: VideoJS;
   font-weight: normal;
   font-style: normal; }
-  .vjs-icon-gplus:before {
-    content: "\f118"; }
+.vjs-icon-gplus:before {
+  content: "\f118"; }
 
 .vjs-icon-linkedin {
   font-family: VideoJS;
   font-weight: normal;
   font-style: normal; }
-  .vjs-icon-linkedin:before {
-    content: "\f119"; }
+.vjs-icon-linkedin:before {
+  content: "\f119"; }
 
 .vjs-icon-twitter {
   font-family: VideoJS;
   font-weight: normal;
   font-style: normal; }
-  .vjs-icon-twitter:before {
-    content: "\f11a"; }
+.vjs-icon-twitter:before {
+  content: "\f11a"; }
 
 .vjs-icon-tumblr {
   font-family: VideoJS;
   font-weight: normal;
   font-style: normal; }
-  .vjs-icon-tumblr:before {
-    content: "\f11b"; }
+.vjs-icon-tumblr:before {
+  content: "\f11b"; }
 
 .vjs-icon-pinterest {
   font-family: VideoJS;
   font-weight: normal;
   font-style: normal; }
-  .vjs-icon-pinterest:before {
-    content: "\f11c"; }
+.vjs-icon-pinterest:before {
+  content: "\f11c"; }
 
 .vjs-icon-audio-description, .video-js .vjs-descriptions-button .vjs-icon-placeholder {
   font-family: VideoJS;
   font-weight: normal;
   font-style: normal; }
-  .vjs-icon-audio-description:before, .video-js .vjs-descriptions-button .vjs-icon-placeholder:before {
-    content: "\f11d"; }
+.vjs-icon-audio-description:before, .video-js .vjs-descriptions-button .vjs-icon-placeholder:before {
+  content: "\f11d"; }
 
 .vjs-icon-audio, .video-js .vjs-audio-button .vjs-icon-placeholder {
   font-family: VideoJS;
   font-weight: normal;
   font-style: normal; }
-  .vjs-icon-audio:before, .video-js .vjs-audio-button .vjs-icon-placeholder:before {
-    content: "\f11e"; }
+.vjs-icon-audio:before, .video-js .vjs-audio-button .vjs-icon-placeholder:before {
+  content: "\f11e"; }
 
 .video-js {
   display: block;
@@ -254,11 +254,11 @@
   font-weight: normal;
   font-style: normal;
   font-family: Arial, Helvetica, sans-serif; }
-  .video-js:-moz-full-screen {
-    position: absolute; }
-  .video-js:-webkit-full-screen {
-    width: 100% !important;
-    height: 100% !important; }
+.video-js:-moz-full-screen {
+  position: absolute; }
+.video-js:-webkit-full-screen {
+  width: 100% !important;
+  height: 100% !important; }
 
 .video-js[tabindex="-1"] {
   outline: none; }
@@ -717,12 +717,12 @@ body.vjs-full-window {
 
 .video-js .vjs-play-progress {
   background-color: #fff; }
-  .video-js .vjs-play-progress:before {
-    font-size: 0.9em;
-    position: absolute;
-    right: -0.5em;
-    top: -0.333333333333333em;
-    z-index: 1; }
+.video-js .vjs-play-progress:before {
+  font-size: 0.9em;
+  position: absolute;
+  right: -0.5em;
+  top: -0.333333333333333em;
+  z-index: 1; }
 
 .video-js .vjs-load-progress {
   background: #bfc7d3;
@@ -838,9 +838,9 @@ body.vjs-full-window {
 
 .vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
-  .vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical .vjs-volume-bar,
-  .vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical .vjs-volume-level {
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
+.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical .vjs-volume-bar,
+.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical .vjs-volume-level {
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
 
 .video-js .vjs-volume-panel {
   -webkit-transition: width 1s;
@@ -848,75 +848,75 @@ body.vjs-full-window {
   -ms-transition: width 1s;
   -o-transition: width 1s;
   transition: width 1s; }
-  .video-js .vjs-volume-panel:hover .vjs-volume-control,
-  .video-js .vjs-volume-panel:active .vjs-volume-control,
-  .video-js .vjs-volume-panel:focus .vjs-volume-control,
-  .video-js .vjs-volume-panel .vjs-volume-control:hover,
-  .video-js .vjs-volume-panel .vjs-volume-control:active,
-  .video-js .vjs-volume-panel .vjs-volume-control:focus,
-  .video-js .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control,
-  .video-js .vjs-volume-panel .vjs-mute-control:active ~ .vjs-volume-control,
-  .video-js .vjs-volume-panel .vjs-mute-control:focus ~ .vjs-volume-control,
-  .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active {
-    visibility: visible;
-    opacity: 1;
-    position: relative;
-    -webkit-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
-    -moz-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
-    -ms-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
-    -o-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
-    transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s; }
-    .video-js .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal,
-    .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,
-    .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal,
-    .video-js .vjs-volume-panel .vjs-volume-control:hover.vjs-volume-horizontal,
-    .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal,
-    .video-js .vjs-volume-panel .vjs-volume-control:focus.vjs-volume-horizontal,
-    .video-js .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal,
-    .video-js .vjs-volume-panel .vjs-mute-control:active ~ .vjs-volume-control.vjs-volume-horizontal,
-    .video-js .vjs-volume-panel .vjs-mute-control:focus ~ .vjs-volume-control.vjs-volume-horizontal,
-    .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal {
-      width: 5em;
-      height: 3em; }
-    .video-js .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-vertical,
-    .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical,
-    .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical,
-    .video-js .vjs-volume-panel .vjs-volume-control:hover.vjs-volume-vertical,
-    .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical,
-    .video-js .vjs-volume-panel .vjs-volume-control:focus.vjs-volume-vertical,
-    .video-js .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-vertical,
-    .video-js .vjs-volume-panel .vjs-mute-control:active ~ .vjs-volume-control.vjs-volume-vertical,
-    .video-js .vjs-volume-panel .vjs-mute-control:focus ~ .vjs-volume-control.vjs-volume-vertical,
-    .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical {
-      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
-      .video-js .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-vertical .vjs-volume-bar,
-      .video-js .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-vertical .vjs-volume-level,
-      .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical .vjs-volume-bar,
-      .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical .vjs-volume-level,
-      .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical .vjs-volume-bar,
-      .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical .vjs-volume-level,
-      .video-js .vjs-volume-panel .vjs-volume-control:hover.vjs-volume-vertical .vjs-volume-bar,
-      .video-js .vjs-volume-panel .vjs-volume-control:hover.vjs-volume-vertical .vjs-volume-level,
-      .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical .vjs-volume-bar,
-      .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical .vjs-volume-level,
-      .video-js .vjs-volume-panel .vjs-volume-control:focus.vjs-volume-vertical .vjs-volume-bar,
-      .video-js .vjs-volume-panel .vjs-volume-control:focus.vjs-volume-vertical .vjs-volume-level,
-      .video-js .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-vertical .vjs-volume-bar,
-      .video-js .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-vertical .vjs-volume-level,
-      .video-js .vjs-volume-panel .vjs-mute-control:active ~ .vjs-volume-control.vjs-volume-vertical .vjs-volume-bar,
-      .video-js .vjs-volume-panel .vjs-mute-control:active ~ .vjs-volume-control.vjs-volume-vertical .vjs-volume-level,
-      .video-js .vjs-volume-panel .vjs-mute-control:focus ~ .vjs-volume-control.vjs-volume-vertical .vjs-volume-bar,
-      .video-js .vjs-volume-panel .vjs-mute-control:focus ~ .vjs-volume-control.vjs-volume-vertical .vjs-volume-level,
-      .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical .vjs-volume-bar,
-      .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical .vjs-volume-level {
-        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
-  .video-js .vjs-volume-panel.vjs-volume-panel-horizontal:hover, .video-js .vjs-volume-panel.vjs-volume-panel-horizontal:focus, .video-js .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active {
-    width: 9em;
-    -webkit-transition: width 0.1s;
-    -moz-transition: width 0.1s;
-    -ms-transition: width 0.1s;
-    -o-transition: width 0.1s;
-    transition: width 0.1s; }
+.video-js .vjs-volume-panel:hover .vjs-volume-control,
+.video-js .vjs-volume-panel:active .vjs-volume-control,
+.video-js .vjs-volume-panel:focus .vjs-volume-control,
+.video-js .vjs-volume-panel .vjs-volume-control:hover,
+.video-js .vjs-volume-panel .vjs-volume-control:active,
+.video-js .vjs-volume-panel .vjs-volume-control:focus,
+.video-js .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control,
+.video-js .vjs-volume-panel .vjs-mute-control:active ~ .vjs-volume-control,
+.video-js .vjs-volume-panel .vjs-mute-control:focus ~ .vjs-volume-control,
+.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active {
+  visibility: visible;
+  opacity: 1;
+  position: relative;
+  -webkit-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
+  -moz-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
+  -ms-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
+  -o-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
+  transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s; }
+.video-js .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal,
+.video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,
+.video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal,
+.video-js .vjs-volume-panel .vjs-volume-control:hover.vjs-volume-horizontal,
+.video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal,
+.video-js .vjs-volume-panel .vjs-volume-control:focus.vjs-volume-horizontal,
+.video-js .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal,
+.video-js .vjs-volume-panel .vjs-mute-control:active ~ .vjs-volume-control.vjs-volume-horizontal,
+.video-js .vjs-volume-panel .vjs-mute-control:focus ~ .vjs-volume-control.vjs-volume-horizontal,
+.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal {
+  width: 5em;
+  height: 3em; }
+.video-js .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-vertical,
+.video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical,
+.video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical,
+.video-js .vjs-volume-panel .vjs-volume-control:hover.vjs-volume-vertical,
+.video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical,
+.video-js .vjs-volume-panel .vjs-volume-control:focus.vjs-volume-vertical,
+.video-js .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-vertical,
+.video-js .vjs-volume-panel .vjs-mute-control:active ~ .vjs-volume-control.vjs-volume-vertical,
+.video-js .vjs-volume-panel .vjs-mute-control:focus ~ .vjs-volume-control.vjs-volume-vertical,
+.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical {
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
+.video-js .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-vertical .vjs-volume-bar,
+.video-js .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-vertical .vjs-volume-level,
+.video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical .vjs-volume-bar,
+.video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical .vjs-volume-level,
+.video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical .vjs-volume-bar,
+.video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical .vjs-volume-level,
+.video-js .vjs-volume-panel .vjs-volume-control:hover.vjs-volume-vertical .vjs-volume-bar,
+.video-js .vjs-volume-panel .vjs-volume-control:hover.vjs-volume-vertical .vjs-volume-level,
+.video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical .vjs-volume-bar,
+.video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical .vjs-volume-level,
+.video-js .vjs-volume-panel .vjs-volume-control:focus.vjs-volume-vertical .vjs-volume-bar,
+.video-js .vjs-volume-panel .vjs-volume-control:focus.vjs-volume-vertical .vjs-volume-level,
+.video-js .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-vertical .vjs-volume-bar,
+.video-js .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-vertical .vjs-volume-level,
+.video-js .vjs-volume-panel .vjs-mute-control:active ~ .vjs-volume-control.vjs-volume-vertical .vjs-volume-bar,
+.video-js .vjs-volume-panel .vjs-mute-control:active ~ .vjs-volume-control.vjs-volume-vertical .vjs-volume-level,
+.video-js .vjs-volume-panel .vjs-mute-control:focus ~ .vjs-volume-control.vjs-volume-vertical .vjs-volume-bar,
+.video-js .vjs-volume-panel .vjs-mute-control:focus ~ .vjs-volume-control.vjs-volume-vertical .vjs-volume-level,
+.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical .vjs-volume-bar,
+.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical .vjs-volume-level {
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
+.video-js .vjs-volume-panel.vjs-volume-panel-horizontal:hover, .video-js .vjs-volume-panel.vjs-volume-panel-horizontal:focus, .video-js .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active {
+  width: 9em;
+  -webkit-transition: width 0.1s;
+  -moz-transition: width 0.1s;
+  -ms-transition: width 0.1s;
+  -o-transition: width 0.1s;
+  transition: width 0.1s; }
 
 .video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
   height: 8em;
@@ -976,21 +976,21 @@ body.vjs-full-window {
   bottom: 0;
   left: 0;
   background-color: #fff; }
-  .video-js .vjs-volume-level:before {
-    position: absolute;
-    font-size: 0.9em; }
+.video-js .vjs-volume-level:before {
+  position: absolute;
+  font-size: 0.9em; }
 
 .vjs-slider-vertical .vjs-volume-level {
   width: 0.3em; }
-  .vjs-slider-vertical .vjs-volume-level:before {
-    top: -0.5em;
-    left: -0.3em; }
+.vjs-slider-vertical .vjs-volume-level:before {
+  top: -0.5em;
+  left: -0.3em; }
 
 .vjs-slider-horizontal .vjs-volume-level {
   height: 0.3em; }
-  .vjs-slider-horizontal .vjs-volume-level:before {
-    top: -0.3em;
-    right: -0.5em; }
+.vjs-slider-horizontal .vjs-volume-level:before {
+  top: -0.3em;
+  right: -0.5em; }
 
 .video-js .vjs-volume-panel.vjs-volume-panel-vertical {
   width: 4em; }
@@ -1417,7 +1417,7 @@ video::-webkit-media-text-track-display {
   /* The font size is what makes the big play button...big.
      All width/height values use ems, which are a multiple of the font size.
      If the .video-js font-size is 10px, then 3em equals 30px.*/
-  font-size: 3em;
+  font-size: 10em;
   /* We're using SCSS vars here because the values are used in multiple places.
      Now that font size is set, the following em values will be a multiple of the
      new font size. If the font-size is 3em (30px), then setting any of
@@ -1426,27 +1426,17 @@ video::-webkit-media-text-track-display {
   line-height: 1.5em;
   height: 1.5em;
   width: 3em;
+  background-color: transparent !important;
   opacity: 0.6;
   /* 0.06666em = 2px default */
   border: none;
   /* 0.3em = 9px default */
-  border-radius: 0;
+  border-radius: 0.3em;
   /* Align center */
   left: 50%;
   top: 50%;
   margin-left: -1.5em;
   margin-top: -0.75em;
-  background-color: transparent !important;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 528.65 595.81'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3EAsset 1%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_2-2' data-name='Layer 2'%3E%3Cpath class='cls-1' d='M28.21,2.49l490.88,279a18.88,18.88,0,0,1,0,32.83l-490.88,279A18.88,18.88,0,0,1,0,576.9v-558A18.88,18.88,0,0,1,28.21,2.49Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: contain;
-}
-.vjs-fluidbook-skin .vjs-big-play-button .vjs-icon-placeholder {
-  display: none;
-}
-.vjs-paused.vjs-has-started .vjs-big-play-button {
-  display: block;
 }
 .vjs-fluidbook-skin .vjs-big-play-button:focus,
 .vjs-fluidbook-skin .vjs-big-play-button:hover {
diff --git a/style/videojs/videojs.less b/style/videojs/videojs.less
index 314821afa6fc85740d8fc98c38c1671ebefe6ece..2b2ceb9e9aaa55b33998f12de1c9d4068db50f1d 100644 (file)
--- a/style/videojs/videojs.less
+++ b/style/videojs/videojs.less
@@ -24,7 +24,7 @@
   /* The font size is what makes the big play button...big.
      All width/height values use ems, which are a multiple of the font size.
      If the .video-js font-size is 10px, then 3em equals 30px.*/
-  font-size: 3em;
+  font-size: 10em;
   /* We're using SCSS vars here because the values are used in multiple places.
      Now that font size is set, the following em values will be a multiple of the
      new font size. If the font-size is 3em (30px), then setting any of
@@ -33,34 +33,19 @@
   line-height: 1.5em;
   height: 1.5em;
   width: 3em;
+  background-color: transparent !important;
   opacity: 0.6;
   /* 0.06666em = 2px default */
   border: none;
   /* 0.3em = 9px default */
-  border-radius: 0;
+  border-radius: 0.3em;
   /* Align center */
   left: 50%;
   top: 50%;
   margin-left: -1.5em;
   margin-top: -0.75em;
   //display: block;
-
-  background-color: transparent !important;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 528.65 595.81'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3EAsset 1%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_2-2' data-name='Layer 2'%3E%3Cpath class='cls-1' d='M28.21,2.49l490.88,279a18.88,18.88,0,0,1,0,32.83l-490.88,279A18.88,18.88,0,0,1,0,576.9v-558A18.88,18.88,0,0,1,28.21,2.49Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: contain;
-
-  .vjs-icon-placeholder {
-    display: none;
-  }
 }
-
-// Allow play button to be redisplayed when video is paused
-.vjs-paused.vjs-has-started .vjs-big-play-button {
-  display: block;
-}
-
 .vjs-fluidbook-skin .vjs-big-play-button:focus, .vjs-fluidbook-skin .vjs-big-play-button:hover {
   opacity: 1;
   outline: none;
Unnamed repository; edit this file 'description' to name the repository.