diff options
| -rw-r--r-- | assets/css/_mejs_hacks.less | 96 | ||||
| -rw-r--r-- | assets/css/_room.less | 8 | ||||
| -rw-r--r-- | assets/css/_structure.less | 1 | ||||
| -rw-r--r-- | assets/js/lustiges-script.js | 4 | ||||
| -rw-r--r-- | template/assemblies/player/video.phtml | 2 | ||||
| -rw-r--r-- | template/page.phtml | 8 |
6 files changed, 110 insertions, 9 deletions
diff --git a/assets/css/_mejs_hacks.less b/assets/css/_mejs_hacks.less new file mode 100644 index 0000000..32767a8 --- /dev/null +++ b/assets/css/_mejs_hacks.less @@ -0,0 +1,96 @@ +.mejs-container { + .mejs-subs-line { + position: absolute; + bottom: 50px; + height: 85px; + width: 100%; + background-color: fade(white, 85%); + color: black; + font-size: 65px; + text-align: center; + opacity: 0; + display: none; + padding: 5px 0; + overflow: hidden; + + .silence { + font-size: 49%; + opacity: 0; + display: none; + color: #555; + } + &.silence .silence { opacity: 1; display: block; } + + .error { + color: red; + opacity: 0; + display: none; + } + &.error .error { opacity: 1; display: block; } + } + + .mejs-controls { + @factor: 1.5; + visibility: visible !important; + + .mejs-subs-button > span { + cursor: pointer; + color: #e3e3e3; + font-size: 28px; + padding-top: 5px; + padding-left: 5px; + } + + height: 12px + 18px * @factor; + div { + width: 26px * @factor; + height: 26px * @factor; + } + .mejs-button button { + background-size: 144px * @factor 32px * @factor !important; + width: 16px * @factor; + height: 16px * @factor; + } + .mejs-playpause-button { + &.mejs-play button { + background-position: 0 0; + } + &.mejs-pause button { + background-position: 0 -16px * @factor; + } + } + .mejs-volume-button { + &.mejs-mute button { + background-position: -16px * @factor -16px * @factor; + } + &.mejs-unmute button { + background-position: -16px * @factor 0; + } + .mejs-volume-slider { + left: 4px * @factor; + } + } + .mejs-fullscreen-button button { + background-position: -32px * @factor 0; + } + + @top: @factor * 12px - 12px; + .mejs-time { + padding-top: @top + 8px; + } + .mejs-horizontal-volume-slider { + width: 110px; + top: @top; + .mejs-horizontal-volume-total { + width: 100px; + } + } + } + + &.mejs-audio { + margin: 0 auto; + } + .mejs-overlay-loading { + background: none !important; + } +} diff --git a/assets/css/_room.less b/assets/css/_room.less index 3bb9d81..a0a9bdf 100644 --- a/assets/css/_room.less +++ b/assets/css/_room.less @@ -1,7 +1,3 @@ -video, audio { - display: block; -} - .tab-content { border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; @@ -23,3 +19,7 @@ video, audio { .player-wrap { margin-bottom: 60px; } + +.video-wrap { + margin: 0 auto; +} diff --git a/assets/css/_structure.less b/assets/css/_structure.less index 970425d..ae4dcca 100644 --- a/assets/css/_structure.less +++ b/assets/css/_structure.less @@ -1,5 +1,6 @@ @import "fa/font-awesome.less"; @import "_bootstrap-selection.less"; +@import "_mejs_hacks.less"; @import "_footer.less"; @img: '../img/'; diff --git a/assets/js/lustiges-script.js b/assets/js/lustiges-script.js index accedb9..ffd1e95 100644 --- a/assets/js/lustiges-script.js +++ b/assets/js/lustiges-script.js @@ -160,6 +160,10 @@ $(function() { $('audio').mediaelementplayer({ features: ['playpause', 'volume', 'current'] }); + + $(window).on('load', function() { + $(window).trigger('resize'); + }); }); diff --git a/template/assemblies/player/video.phtml b/template/assemblies/player/video.phtml index 0955492..1508aba 100644 --- a/template/assemblies/player/video.phtml +++ b/template/assemblies/player/video.phtml @@ -1,4 +1,4 @@ -<div style="width: 100%; height: 100%; max-width: <?=h($width)?>px; margin: 0 auto;"> +<div style="max-width: <?=h($width)?>px; max-height: <?=h($height)?>px;" class="video-wrap"> <video autoplay="autoplay" preload="auto" diff --git a/template/page.phtml b/template/page.phtml index b3f49b0..2815c77 100644 --- a/template/page.phtml +++ b/template/page.phtml @@ -41,15 +41,15 @@ <link href="assets/img/favicon/32x32.png" rel="icon" type="image/png" sizes="32x32" /> <link href="assets/img/favicon/16x16.png" rel="icon" type="image/png" sizes="16x16" /> + <link type="text/css" rel="stylesheet" href="assets/mejs/mediaelementplayer.min.css" /> + <link type="text/css" rel="stylesheet" href="assets/css/main.css" /> + <script type="text/javascript" src="assets/js/lib/jquery.min.js"></script> <script type="text/javascript" src="assets/js/lib/jquery.scrollTo.min.js"></script> <script type="text/javascript" src="assets/js/lib/bootstrap.min.js"></script> - <link type="text/css" rel="stylesheet" href="assets/css/mejs/mediaelementplayer.min.css" /> - <script type="text/javascript" src="assets/js/lib/mediaelement-and-player.min.js"></script> + <script type="text/javascript" src="assets/mejs/mediaelement-and-player.min.js"></script> <script type="text/javascript" src="assets/js/lustiges-script.js"></script> - - <link type="text/css" rel="stylesheet" href="assets/css/main.css" /> </head> <body class="<?=h($page)?>"> <? include("$assemblies/header.phtml") ?> |