Feature detection for captions and fullscreen
This commit is contained in:
@ -49,10 +49,19 @@
|
||||
stopped: "stopped",
|
||||
playing: "playing",
|
||||
muted: "muted",
|
||||
captions: "captions"
|
||||
captions: {
|
||||
active: "captions-active",
|
||||
enabled: "captions-enabled"
|
||||
},
|
||||
fullscreen: {
|
||||
enabled: "fullscreen-enabled"
|
||||
}
|
||||
},
|
||||
captions: {
|
||||
default: true
|
||||
defaultActive: true
|
||||
},
|
||||
fullscreen: {
|
||||
enabled: true
|
||||
}
|
||||
};
|
||||
|
||||
@ -159,9 +168,11 @@
|
||||
}
|
||||
}
|
||||
// Display captions container and button (for initialization)
|
||||
function showCaptionContainerAndButton(player) {
|
||||
if (config.captions.default) {
|
||||
player.container.className += " " + config.classes.captions;
|
||||
function showCaptions(player) {
|
||||
player.container.className += " " + config.classes.captions.enabled;
|
||||
|
||||
if (config.captions.defaultActive) {
|
||||
player.container.className += " " + config.classes.captions.active;
|
||||
player.buttons.captions.setAttribute("checked", "checked");
|
||||
}
|
||||
}
|
||||
@ -508,7 +519,7 @@
|
||||
|
||||
// If no caption file exists, hide container for caption text
|
||||
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
|
||||
@ -540,7 +551,7 @@
|
||||
if (config.debug) {
|
||||
console.log("textTracks supported");
|
||||
}
|
||||
showCaptionContainerAndButton(player);
|
||||
showCaptions(player);
|
||||
|
||||
track = {};
|
||||
tracks = player.media.textTracks;
|
||||
@ -563,7 +574,7 @@
|
||||
if (config.debug) {
|
||||
console.log("textTracks not supported so rendering captions manually");
|
||||
}
|
||||
showCaptionContainerAndButton(player);
|
||||
showCaptions(player);
|
||||
|
||||
// Render captions from array at appropriate time
|
||||
player.currentCaption = "";
|
||||
@ -646,6 +657,15 @@
|
||||
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
|
||||
function listeners() {
|
||||
// Fullscreen
|
||||
@ -774,10 +794,10 @@
|
||||
// Captions
|
||||
player.buttons.captions.addEventListener("click", function() {
|
||||
if (this.checked) {
|
||||
player.container.className += " " + config.classes.captions;
|
||||
player.container.className += " " + config.classes.captions.active;
|
||||
}
|
||||
else {
|
||||
player.container.className = player.container.className.replace(config.classes.captions, "");
|
||||
player.container.className = player.container.className.replace(config.classes.captions.active, "");
|
||||
}
|
||||
}, false);
|
||||
|
||||
@ -817,6 +837,9 @@
|
||||
// Set volume
|
||||
setVolume();
|
||||
|
||||
// Setup fullscreen
|
||||
setupFullscreen();
|
||||
|
||||
// Captions
|
||||
setupCaptions();
|
||||
|
||||
@ -833,7 +856,6 @@
|
||||
config = extend(defaults, options);
|
||||
|
||||
// Setup the fullscreen api
|
||||
// Check for support to hide/show the button
|
||||
fullscreen = fullscreenApi();
|
||||
|
||||
// Sniff
|
||||
@ -843,7 +865,6 @@
|
||||
|
||||
// Debug info
|
||||
if(config.debug) {
|
||||
console.log(fullscreen.supportsFullScreen ? "Fullscreen supported" : "No fullscreen supported");
|
||||
console.log(player.browserName + " " + player.browserMajorVersion);
|
||||
}
|
||||
|
||||
|
@ -127,7 +127,7 @@
|
||||
text-align: center;
|
||||
.font-smoothing();
|
||||
}
|
||||
&.captions &-captions {
|
||||
&.captions-active &-captions {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -229,17 +229,18 @@
|
||||
border: none;
|
||||
background: @progress-bg;
|
||||
cursor: pointer;
|
||||
color: @progress-value-bg;
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
background: @progress-bg;
|
||||
}
|
||||
|
||||
// The value
|
||||
// Inherit from currentColor;
|
||||
&::-webkit-progress-value {
|
||||
background: @progress-value-bg;
|
||||
background: currentColor;
|
||||
}
|
||||
&::-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+
|
||||
|
1
dist/css/simple-media.css
vendored
Normal file
1
dist/css/simple-media.css
vendored
Normal file
File diff suppressed because one or more lines are too long
2
dist/js/simple-media.js
vendored
2
dist/js/simple-media.js
vendored
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user