Feature detection for captions and fullscreen

This commit is contained in:
Sam Potts
2015-02-15 14:05:15 +11:00
parent 0102e990ef
commit 21c20614d5
4 changed files with 54 additions and 17 deletions

View File

@ -49,10 +49,19 @@
stopped: "stopped", stopped: "stopped",
playing: "playing", playing: "playing",
muted: "muted", muted: "muted",
captions: "captions" captions: {
active: "captions-active",
enabled: "captions-enabled"
},
fullscreen: {
enabled: "fullscreen-enabled"
}
}, },
captions: { captions: {
default: true defaultActive: true
},
fullscreen: {
enabled: true
} }
}; };
@ -159,9 +168,11 @@
} }
} }
// Display captions container and button (for initialization) // Display captions container and button (for initialization)
function showCaptionContainerAndButton(player) { function showCaptions(player) {
if (config.captions.default) { player.container.className += " " + config.classes.captions.enabled;
player.container.className += " " + config.classes.captions;
if (config.captions.defaultActive) {
player.container.className += " " + config.classes.captions.active;
player.buttons.captions.setAttribute("checked", "checked"); player.buttons.captions.setAttribute("checked", "checked");
} }
} }
@ -508,7 +519,7 @@
// If no caption file exists, hide container for caption text // If no caption file exists, hide container for caption text
if (!player.captionExists) { if (!player.captionExists) {
player.container.className = player.container.className.replace(config.classes.captions, ""); player.container.className = player.container.className.replace(config.classes.captions.enabled, "");
} }
// If caption file exists, process captions // If caption file exists, process captions
@ -540,7 +551,7 @@
if (config.debug) { if (config.debug) {
console.log("textTracks supported"); console.log("textTracks supported");
} }
showCaptionContainerAndButton(player); showCaptions(player);
track = {}; track = {};
tracks = player.media.textTracks; tracks = player.media.textTracks;
@ -563,7 +574,7 @@
if (config.debug) { if (config.debug) {
console.log("textTracks not supported so rendering captions manually"); console.log("textTracks not supported so rendering captions manually");
} }
showCaptionContainerAndButton(player); showCaptions(player);
// Render captions from array at appropriate time // Render captions from array at appropriate time
player.currentCaption = ""; player.currentCaption = "";
@ -646,6 +657,15 @@
player.seekTime[1].innerHTML = config.seekInterval; player.seekTime[1].innerHTML = config.seekInterval;
} }
// Setup fullscreen
function setupFullscreen() {
console.log(fullscreen.supportsFullScreen ? "Fullscreen supported" : "No fullscreen supported");
if(config.fullscreen.enabled && fullscreen.supportsFullScreen) {
player.container.className += " " + config.classes.fullscreen.enabled;
}
}
// Listen for events // Listen for events
function listeners() { function listeners() {
// Fullscreen // Fullscreen
@ -774,10 +794,10 @@
// Captions // Captions
player.buttons.captions.addEventListener("click", function() { player.buttons.captions.addEventListener("click", function() {
if (this.checked) { if (this.checked) {
player.container.className += " " + config.classes.captions; player.container.className += " " + config.classes.captions.active;
} }
else { else {
player.container.className = player.container.className.replace(config.classes.captions, ""); player.container.className = player.container.className.replace(config.classes.captions.active, "");
} }
}, false); }, false);
@ -817,6 +837,9 @@
// Set volume // Set volume
setVolume(); setVolume();
// Setup fullscreen
setupFullscreen();
// Captions // Captions
setupCaptions(); setupCaptions();
@ -833,7 +856,6 @@
config = extend(defaults, options); config = extend(defaults, options);
// Setup the fullscreen api // Setup the fullscreen api
// Check for support to hide/show the button
fullscreen = fullscreenApi(); fullscreen = fullscreenApi();
// Sniff // Sniff
@ -843,7 +865,6 @@
// Debug info // Debug info
if(config.debug) { if(config.debug) {
console.log(fullscreen.supportsFullScreen ? "Fullscreen supported" : "No fullscreen supported");
console.log(player.browserName + " " + player.browserMajorVersion); console.log(player.browserName + " " + player.browserMajorVersion);
} }

View File

@ -127,7 +127,7 @@
text-align: center; text-align: center;
.font-smoothing(); .font-smoothing();
} }
&.captions &-captions { &.captions-active &-captions {
display: block; display: block;
} }
@ -229,17 +229,18 @@
border: none; border: none;
background: @progress-bg; background: @progress-bg;
cursor: pointer; cursor: pointer;
color: @progress-value-bg;
&::-webkit-progress-bar { &::-webkit-progress-bar {
background: @progress-bg; background: @progress-bg;
} }
// The value // Inherit from currentColor;
&::-webkit-progress-value { &::-webkit-progress-value {
background: @progress-value-bg; background: currentColor;
} }
&::-moz-progress-bar { &::-moz-progress-bar {
background: @progress-value-bg; background: currentColor;
} }
} }
} }
@ -351,6 +352,20 @@
} }
} }
} }
// Some options are hidden by default
[data-player='captions'],
[data-player='captions'] + label,
[data-player='fullscreen'],
[data-player='fullscreen'] + label {
display: none;
}
&.captions-enabled [data-player='captions'],
&.captions-enabled [data-player='captions'] + label,
&.fullscreen-enabled [data-player='fullscreen'],
&.fullscreen-enabled [data-player='fullscreen'] + label {
display: inline-block;
}
} }
// Fixing display for IE10+ // Fixing display for IE10+

1
dist/css/simple-media.css vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long