From 483bef85a730ebe57130a788dc554f5f10cf7fce Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Fri, 2 Jun 2017 12:04:12 +0200 Subject: [PATCH] Commit remaining files before merging --- _index.html | 2 +- js/libs/fluidbook/fluidbook.links.js | 2 +- js/libs/fluidbook/fluidbook.video.js | 41 +--- style/videojs/videojs.css | 330 +++++++++++++-------------- style/videojs/videojs.less | 21 +- 5 files changed, 172 insertions(+), 224 deletions(-) diff --git a/_index.html b/_index.html index 786bd25e..8cfd2bdc 100644 --- a/_index.html +++ b/_index.html @@ -18,7 +18,7 @@ - +

diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js index b799880f..085b21b2 100644 --- 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 e1284ec4..218519a7 100644 --- 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 3b729b4f..b38e2c3f 100644 --- 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 314821af..2b2ceb9e 100644 --- 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; -- 2.39.5