Feature detection for captions and fullscreen
This commit is contained in:
@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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
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