aboutsummaryrefslogtreecommitdiffstats
path: root/assets
diff options
context:
space:
mode:
Diffstat (limited to 'assets')
-rw-r--r--assets/js/docs.js6
-rw-r--r--assets/js/simple-media.js30
-rw-r--r--assets/less/docs.less45
-rw-r--r--assets/less/simple-media.less36
-rw-r--r--assets/templates/controls.html12
5 files changed, 84 insertions, 45 deletions
diff --git a/assets/js/docs.js b/assets/js/docs.js
index fcb05868..010fe06f 100644
--- a/assets/js/docs.js
+++ b/assets/js/docs.js
@@ -6,12 +6,12 @@
// Register a callback
simpleMedia.on("setup", function() {
- console.log(this);
+ //console.log(this);
});
//execute shout
simpleMedia.setup({
- debug: true,
- title: "PayPal demo",
+ //debug: true,
+ title: "Video demo",
html: templates.controls.render({})
}); \ No newline at end of file
diff --git a/assets/js/simple-media.js b/assets/js/simple-media.js
index 3d9b1073..feb59887 100644
--- a/assets/js/simple-media.js
+++ b/assets/js/simple-media.js
@@ -65,8 +65,8 @@
}
};
+ // Credits: http://paypal.github.io/accessible-html5-video-player/
// Unfortunately, due to scattered support, browser sniffing is required
- // http://paypal.github.io/accessible-html5-video-player/
function browserSniff() {
var nAgt = navigator.userAgent,
browserName = navigator.appName,
@@ -128,9 +128,7 @@
// Return data
return [browserName, majorVersion];
}
-
// Utilities for caption time codes
- // http://paypal.github.io/accessible-html5-video-player/
function video_timecode_min(tc) {
var tcpair = [];
tcpair = tc.split(" --> ");
@@ -224,9 +222,7 @@
y: e.clientY - parentPosition.y
};
}
-
// Get element position
- // http://www.kirupa.com/html5/getting_mouse_click_position.htm
function getPosition(element) {
var xPosition = 0;
var yPosition = 0;
@@ -642,7 +638,9 @@
// If Safari 7, removing track from DOM [see "turn off native caption rendering" above]
if (player.browserName === "Safari" && player.browserMajorVersion === 7) {
- console.log("Safari 7 detected; removing track from DOM");
+ if (config.debug) {
+ console.log("Safari 7 detected; removing track from DOM");
+ }
tracks = player.media.getElementsByTagName("track");
player.media.removeChild(tracks[0]);
}
@@ -659,11 +657,23 @@
// Setup fullscreen
function setupFullscreen() {
- console.log(fullscreen.supportsFullScreen ? "Fullscreen supported" : "No fullscreen supported");
+ if(player.type === "video" && config.fullscreen.enabled) {
+
+ if(config.debug) {
+ console.log(fullscreen.supportsFullScreen ? "Fullscreen supported" : "No fullscreen supported");
+ }
+ if(fullscreen.supportsFullScreen) {
+ if(config.debug) {
+ console.log("Fullscreen enabled");
+ }
- if(config.fullscreen.enabled && fullscreen.supportsFullScreen) {
- player.container.className += " " + config.classes.fullscreen.enabled;
+ player.container.className += " " + config.classes.fullscreen.enabled;
+ }
+ else if(config.debug) {
+ console.warn("Fullscreen not supported");
+ }
}
+
}
// Listen for events
@@ -904,7 +914,7 @@
}
setupPlayer(element);
- //now we execute callbacks registered to shout
+ // Trigger the setup event
executeHandlers("setup");
}
diff --git a/assets/less/docs.less b/assets/less/docs.less
index 57b4ad9e..23814f8b 100644
--- a/assets/less/docs.less
+++ b/assets/less/docs.less
@@ -8,21 +8,21 @@
@import "lib/mixins.less";
@font-face {
- font-family: "Avenir";
- src: url("../../assets/fonts/AvenirLTStd-Medium.woff2") format("woff2"),
- url("../../assets/fonts/AvenirLTStd-Medium.woff") format("woff"),
- url("../../assets/fonts/AvenirLTStd-Medium.ttf") format("truetype");
- font-style: normal;
- font-weight: 400;
+ font-family: "Avenir";
+ src: url("../../assets/fonts/AvenirLTStd-Medium.woff2") format("woff2"),
+ url("../../assets/fonts/AvenirLTStd-Medium.woff") format("woff"),
+ url("../../assets/fonts/AvenirLTStd-Medium.ttf") format("truetype");
+ font-style: normal;
+ font-weight: 400;
}
@font-face {
- font-family: "Avenir";
- src: url("../../assets/fonts/AvenirLTStd-Heavy.woff2") format("woff2"),
- url("../../assets/fonts/AvenirLTStd-Heavy.woff") format("woff"),
- url("../../assets/fonts/AvenirLTStd-Heavy.ttf") format("truetype");
- font-style: normal;
- font-weight: 600;
+ font-family: "Avenir";
+ src: url("../../assets/fonts/AvenirLTStd-Heavy.woff2") format("woff2"),
+ url("../../assets/fonts/AvenirLTStd-Heavy.woff") format("woff"),
+ url("../../assets/fonts/AvenirLTStd-Heavy.ttf") format("truetype");
+ font-style: normal;
+ font-weight: 600;
}
// BORDER-BOX ALL THE THINGS!
@@ -38,9 +38,7 @@ body {
.font-size(18);
color: #6D797F;
line-height: 1.5;
- background: #ECF0F1;
- max-width: 960px;
- margin: 40px auto;
+ background: #fff;
text-align: center;
}
h1 {
@@ -56,5 +54,20 @@ p {
margin: 0 0 20px;
}
header {
- margin-bottom: 40px;
+ margin: 40px 0;
+}
+
+.example-audio .player,
+.example-video .player {
+ margin: 0 auto;
+
+ &:fullscreen {
+ max-width: none;
+ }
+}
+.example-audio .player {
+ max-width: 480px;
+}
+.example-video .player {
+ max-width: 1200px;
} \ No newline at end of file
diff --git a/assets/less/simple-media.less b/assets/less/simple-media.less
index 9219b331..fbb0d224 100644
--- a/assets/less/simple-media.less
+++ b/assets/less/simple-media.less
@@ -89,6 +89,7 @@
.player {
position: relative;
max-width: 100%;
+ min-width: 290px;
overflow: hidden; // For the controls
background: #000;
@@ -141,11 +142,18 @@
line-height: 1;
// Layout
- &-playback {
- float: left;
- }
&-sound {
- float: right;
+ display: inline-block;
+ margin-top: @control-spacing;
+ }
+ @media (min-width: 560px) {
+ &-playback {
+ float: left;
+ }
+ &-sound {
+ float: right;
+ margin-top: 0;
+ }
}
input + label,
@@ -327,15 +335,25 @@
// Full screen mode
&:fullscreen {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
height: 100%;
width: 100%;
.player-video {
- position: absolute;
- top: 50%;
- left: 0;
- right: 0;
- transform: translateY(-50%);
+ height: 100%;
+ width: 100%;
+
+ video {
+ height: 100%;
+ }
+ .player-captions {
+ top: auto;
+ bottom: 80px;
+ }
}
.player-controls {
position: absolute;
diff --git a/assets/templates/controls.html b/assets/templates/controls.html
index 3109d795..e6582f47 100644
--- a/assets/templates/controls.html
+++ b/assets/templates/controls.html
@@ -2,8 +2,7 @@
<progress class="player-progress" max="100" value="0">
<span>0</span>% played
</progress>
-
- <div class="player-controls-playback">
+ <span class="player-controls-playback">
<button data-player="restart">
<svg><use xlink:href="#icon-refresh"></use></svg>
<span class="sr-only">Restart</span>
@@ -28,9 +27,8 @@
<span class="sr-only">Time</span>
<span class="player-duration">00:00</span>
</span>
- </div>
-
- <div class="player-controls-sound">
+ </span>
+ <span class="player-controls-sound">
<input class="inverted sr-only" id="mute{id}" type="checkbox" data-player="mute">
<label id="mute{id}" for="mute{id}">
<svg class="icon-muted"><use xlink:href="#icon-muted"></use></svg>
@@ -52,5 +50,5 @@
<svg><use xlink:href="#icon-expand"></use></svg>
<span class="sr-only">Toggle fullscreen</span>
</button>
- </div>
-</div>
+ </span>
+</div> \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-13 04:13:36 +0000