aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMaZderMind2015-02-27 19:59:23 +0100
committerMaZderMind2015-02-27 19:59:23 +0100
commit40c0a97e7b4ec5aad5549669f1481f5b257652d0 (patch)
treecdb7584d1f6718f9dd820b8dfbf69c2eda9b9ea8
parented8b20bc6cb03a8f3521b169e8778d8ede23ea26 (diff)
Video-Player placement & fixes
Diffstat (limited to '')
-rw-r--r--assets/css/_mejs_hacks.less96
-rw-r--r--assets/css/_room.less8
-rw-r--r--assets/css/_structure.less1
-rw-r--r--assets/js/lustiges-script.js4
-rw-r--r--template/assemblies/player/video.phtml2
-rw-r--r--template/page.phtml8
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") ?>