aboutsummaryrefslogtreecommitdiffstats
path: root/assets/js
diff options
context:
space:
mode:
authorSam Potts <me@sampotts.me>2015-02-15 12:17:16 +1100
committerSam Potts <me@sampotts.me>2015-02-15 12:17:16 +1100
commit0f77a444729468cf555346df335cb21f86113721 (patch)
treed8ddc1e44d0ca04d2f73939ebd7c74542850338b /assets/js
parent63c1d04d72845ecaf82df14ca06300b0d220def9 (diff)
downloadplyr-0f77a444729468cf555346df335cb21f86113721.tar.lz
plyr-0f77a444729468cf555346df335cb21f86113721.tar.xz
plyr-0f77a444729468cf555346df335cb21f86113721.zip
Audio player, tweaks to suit
Diffstat (limited to 'assets/js')
-rw-r--r--assets/js/simple-media.js157
1 files changed, 111 insertions, 46 deletions
diff --git a/assets/js/simple-media.js b/assets/js/simple-media.js
index e188893b..334076b9 100644
--- a/assets/js/simple-media.js
+++ b/assets/js/simple-media.js
@@ -24,9 +24,9 @@
var defaults = {
debug: false,
seekInterval: 10,
+ volume: 5,
selectors: {
container: ".player",
- videoContainer: ".player-video",
controls: ".player-controls",
buttons: {
play: "[data-player='play']",
@@ -45,6 +45,7 @@
seekTime: ".player-seek-time"
},
classes: {
+ videoContainer: "player-video",
stopped: "stopped",
playing: "playing",
muted: "muted",
@@ -170,6 +171,38 @@
return string.replace(new RegExp(find.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1"), "g"), replace);
}
+ // Wrap an element
+ function wrap(elements, wrapper) {
+ // Convert `elms` to an array, if necessary.
+ if (!elements.length) {
+ elements = [elements];
+ }
+
+ // Loops backwards to prevent having to clone the wrapper on the
+ // first element (see `child` below).
+ for (var i = elements.length - 1; i >= 0; i--) {
+ var child = (i > 0) ? wrapper.cloneNode(true) : wrapper;
+ var el = elements[i];
+
+ // Cache the current parent and sibling.
+ var parent = el.parentNode;
+ var sibling = el.nextSibling;
+
+ // Wrap the element (is automatically removed from its current
+ // parent).
+ child.appendChild(el);
+
+ // If the element had a sibling, insert the wrapper before
+ // the sibling to maintain the HTML structure; otherwise, just
+ // append it to the parent.
+ if (sibling) {
+ parent.insertBefore(child, sibling);
+ } else {
+ parent.appendChild(child);
+ }
+ }
+ }
+
// Get click position relative to parent
// http://www.kirupa.com/html5/getting_mouse_click_position.htm
function getClickPosition(e) {
@@ -336,7 +369,6 @@
player.buttons.rewind = getElement(config.selectors.buttons.rewind);
player.buttons.forward = getElement(config.selectors.buttons.forward);
player.buttons.mute = getElement(config.selectors.buttons.mute);
- player.buttons.volume = getElement(config.selectors.buttons.volume);
player.buttons.captions = getElement(config.selectors.buttons.captions);
player.buttons.fullscreen = getElement(config.selectors.buttons.fullscreen);
@@ -345,6 +377,9 @@
player.progress.bar = getElement(config.selectors.progress);
player.progress.text = player.progress.bar.getElementsByTagName("span")[0];
+ // Volume
+ player.volume = getElement(config.selectors.buttons.volume);
+
// Timing
player.duration = getElement(config.selectors.duration);
player.seekTime = getElements(config.selectors.seekTime);
@@ -376,13 +411,30 @@
play();
}
+ // Set volume
+ function setVolume() {
+ player.volume.value = config.volume;
+ player.media.volume = parseFloat(config.volume / 10);
+ checkMute();
+ }
+
+ // Check mute state
+ function checkMute() {
+ if(player.media.volume === 0 || player.media.muted) {
+ player.container.className += " " + config.classes.muted;
+ }
+ else {
+ player.container.className = player.container.className.replace(config.classes.muted, "");
+ }
+ }
+
// Setup media
function setupMedia() {
player.media = player.container.querySelectorAll("audio, video")[0];
// If there's no media, bail
if(!player.media) {
- console.warn("No audio or video element found!");
+ console.error("No audio or video element found!");
return false;
}
@@ -396,11 +448,24 @@
// Set type
player.type = (player.media.tagName.toLowerCase() == "video" ? "video" : "audio");
+
+ // Inject the player wrapper
+ if(player.type === "video") {
+ // Create the wrapper div
+ var wrapper = document.createElement("div");
+ wrapper.setAttribute("class", config.classes.videoContainer);
+
+ // Wrap the video in a container
+ wrap(player.media, wrapper);
+
+ // Cache the container
+ player.videoContainer = wrapper;
+ }
}
// Setup captions
function setupCaptions() {
- if(player.type == "video") {
+ if(player.type === "video") {
// Inject the container
player.videoContainer.insertAdjacentHTML("afterbegin", "<div class='" + config.selectors.captions.replace(".", "") + "'></div>");
@@ -583,7 +648,6 @@
// Listen for events
function listeners() {
-
// Fullscreen
player.buttons.fullscreen.addEventListener("click", function() {
if(!fullscreen.isFullScreen()) {
@@ -595,17 +659,19 @@
}, false);
// Click video
- player.videoContainer.addEventListener("click", function() {
- if(player.media.paused) {
- play();
- }
- else if(player.media.ended) {
- restart();
- }
- else {
- pause();
- }
- }, false);
+ if(player.type === "video") {
+ player.videoContainer.addEventListener("click", function() {
+ if(player.media.paused) {
+ play();
+ }
+ else if(player.media.ended) {
+ restart();
+ }
+ else {
+ pause();
+ }
+ }, false);
+ }
// Play
player.buttons.play.addEventListener("click", function() {
@@ -633,7 +699,7 @@
player.media.currentTime = targetTime;
}
// Special handling for "manual" captions
- if (!player.isTextTracks) {
+ if (!player.isTextTracks && player.type === "video") {
adjustManualCaptions(player);
}
}, false);
@@ -649,26 +715,26 @@
player.media.currentTime = targetTime;
}
// Special handling for "manual" captions
- if (!player.isTextTracks) {
+ if (!player.isTextTracks && player.type === "video") {
adjustManualCaptions(player);
}
}, false);
// Get the HTML5 range input element and append audio volume adjustment on change
- player.buttons.volume.addEventListener("change", function() {
- player.media.volume = parseFloat(this.value / 10);
+ player.volume.addEventListener("change", function() {
+ config.volume = this.value;
+ setVolume();
}, false);
// Mute
player.buttons.mute.addEventListener("click", function() {
if (player.media.muted === true) {
player.media.muted = false;
- player.container.className = player.container.className.replace(config.classes.muted, "");
}
else {
player.media.muted = true;
- player.container.className += " " + config.classes.muted;
}
+ checkMute();
}, false);
// Duration
@@ -700,7 +766,7 @@
player.media.currentTime = player.pos * player.media.duration;
// Special handling for "manual" captions
- if (!player.isTextTracks) {
+ if (!player.isTextTracks && player.type === "video") {
adjustManualCaptions(player);
}
});
@@ -717,7 +783,9 @@
// Clear captions at end of video
player.media.addEventListener("ended", function() {
- player.captionsContainer.innerHTML = "";
+ if(player.type === "video") {
+ player.captionsContainer.innerHTML = "";
+ }
player.container.className = player.container.className.replace(config.classes.playing, config.classes.stopped);
});
}
@@ -732,8 +800,7 @@
}
function setupPlayer(element) {
- player.container = element;
- player.videoContainer = getElement(config.selectors.videoContainer);
+ player.container = element;
// Setup media
setupMedia();
@@ -747,6 +814,9 @@
// Find the elements
findElements();
+ // Set volume
+ setVolume();
+
// Captions
setupCaptions();
@@ -773,22 +843,25 @@
// Debug info
if(config.debug) {
- console.log(config);
- console.log("fullscreen support: " + fullscreen.supportsFullScreen);
+ console.log(fullscreen.supportsFullScreen ? "Fullscreen supported" : "No fullscreen supported");
console.log(player.browserName + " " + player.browserMajorVersion);
}
// If IE8, stop customization (use fallback)
// If IE9, stop customization (use native controls)
if (player.browserName === "IE" && (player.browserMajorVersion === 8 || player.browserMajorVersion === 9) ) {
- console.warn("Browser not suppported.");
+ if(config.debug) {
+ console.error("Browser not suppported.");
+ }
return false;
}
// If smartphone or tablet, stop customization as video (and captions in latest devices) are handled natively
player.isSmartphoneOrTablet = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
if (player.isSmartphoneOrTablet) {
- console.warn("Browser not suppported.");
+ if(config.debug) {
+ console.error("Browser not suppported.");
+ }
return false;
}
@@ -801,25 +874,17 @@
}
// Get the container and video container
- var elements = document.querySelectorAll(config.selectors.container);
- for (var i = elements.length - 1; i >= 0; i--) {
- setupPlayer(elements[i]);
+ var element = document.querySelector(config.selectors.container);
+ if(element === null) {
+ if(config.debug) {
+ console.error("Selector " + config.selectors.container + " not found!");
+ }
+ return false;
}
+ setupPlayer(element);
//now we execute callbacks registered to shout
executeHandlers("setup");
}
-}(this.simpleMedia = this.simpleMedia || {}));
-
-/*function InitPxVideo(options) {
-
- "use strict";
-
-
- // ***
- // Captions
- // ***
-
-
-}*/ \ No newline at end of file
+}(this.simpleMedia = this.simpleMedia || {})); \ No newline at end of file