aboutsummaryrefslogtreecommitdiffstats
path: root/assets/js
diff options
context:
space:
mode:
Diffstat (limited to 'assets/js')
-rw-r--r--assets/js/simple-media.js269
1 files changed, 149 insertions, 120 deletions
diff --git a/assets/js/simple-media.js b/assets/js/simple-media.js
index 954cc9b2..7179cd6b 100644
--- a/assets/js/simple-media.js
+++ b/assets/js/simple-media.js
@@ -1,3 +1,77 @@
+// ==========================================================================
+// Simple Media Player
+// simple-media.js v1.0.0
+// https://github.com/sampotts/simple-media
+// ==========================================================================
+// Credits: http://paypal.github.io/accessible-html5-video-player/
+// ==========================================================================
+
+// Fullscreen API
+(function() {
+ var
+ fullscreen = {
+ supportsFullScreen: false,
+ isFullScreen: function() { return false; },
+ requestFullScreen: function() {},
+ cancelFullScreen: function() {},
+ fullScreenEventName: "",
+ element: null,
+ prefix: ""
+ },
+ browserPrefixes = "webkit moz o ms khtml".split(" ");
+
+ // check for native support
+ if (typeof document.cancelFullScreen != "undefined") {
+ fullscreen.supportsFullScreen = true;
+ }
+ else {
+ // check for fullscreen support by vendor prefix
+ for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {
+ fullscreen.prefix = browserPrefixes[i];
+
+ if (typeof document[fullscreen.prefix + "CancelFullScreen" ] != "undefined" ) {
+ fullscreen.supportsFullScreen = true;
+
+ break;
+ }
+ }
+ }
+
+ // Safari doesn't support the ALLOW_KEYBOARD_INPUT flag so set it to not supported
+ // https://bugs.webkit.org/show_bug.cgi?id=121496
+ if(fullscreen.prefix === "webkit" && !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)) {
+ fullscreen.supportsFullScreen = false;
+ }
+
+ // Update methods to do something useful
+ if (fullscreen.supportsFullScreen) {
+ fullscreen.fullScreenEventName = fullscreen.prefix + "fullscreenchange";
+
+ fullscreen.isFullScreen = function() {
+ switch (this.prefix) {
+ case "":
+ return document.fullScreen;
+ case "webkit":
+ return document.webkitIsFullScreen;
+ default:
+ return document[this.prefix + "FullScreen"];
+ }
+ };
+ fullscreen.requestFullScreen = function(element) {
+ return (this.prefix === "") ? element.requestFullScreen() : element[this.prefix + "RequestFullScreen"](this.prefix === "webkit" ? element.ALLOW_KEYBOARD_INPUT : null);
+ };
+ fullscreen.cancelFullScreen = function() {
+ return (this.prefix === "") ? document.cancelFullScreen() : document[this.prefix + "CancelFullScreen"]();
+ };
+ fullscreen.element = function() {
+ return (this.prefix === "") ? document.fullscreenElement : document[this.prefix + "FullscreenElement"];
+ };
+ }
+
+ // Export api
+ window.fullscreen = fullscreen;
+})();
+
function InitPxVideo(options) {
"use strict";
@@ -12,6 +86,37 @@ function InitPxVideo(options) {
});
}
+ // Get click position relative to parent
+ // http://www.kirupa.com/html5/getting_mouse_click_position.htm
+ // ---------------------------------
+ function getClickPosition(e) {
+ var parentPosition = window.fullscreen.isFullScreen() ? { x: 0, y: 0 } : getPosition(e.currentTarget);
+
+ return {
+ x: e.clientX - parentPosition.x,
+ 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;
+
+ while (element) {
+ xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
+ yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
+ element = element.offsetParent;
+ }
+
+ return {
+ x: xPosition,
+ y: yPosition
+ };
+ }
+
// Utilities for caption time codes
function video_timecode_min(tc) {
var tcpair = [];
@@ -255,6 +360,9 @@ function InitPxVideo(options) {
obj.duration = obj.container.getElementsByClassName("px-video-duration")[0];
obj.txtSeconds = obj.container.getElementsByClassName("px-seconds");
+ obj.toggleFullscreen = obj.container.querySelector("[data-player='toggle-fullscreen']");
+ obj.videoContainer = obj.container.querySelector(".player-video");
+
// Update number of seconds in rewind and fast forward buttons
obj.txtSeconds[0].innerHTML = obj.seekInterval;
obj.txtSeconds[1].innerHTML = obj.seekInterval;
@@ -265,30 +373,41 @@ function InitPxVideo(options) {
obj.isTextTracks = true;
}
- // Play
- obj.btnPlay.addEventListener("click", function() {
- obj.movie.play();
-
- obj.container.className = obj.container.className.replace("stopped", "playing");
+ // Fullscreen
+ obj.toggleFullscreen.addEventListener("click", function() {
+ if(!window.fullscreen.isFullScreen()) {
+ window.fullscreen.requestFullScreen(obj.container);
+ }
+ else {
+ window.fullscreen.cancelFullScreen();
+ }
+ }, false);
- obj.btnPlay.className = "px-video-play hide";
- obj.btnPause.className = "px-video-pause px-video-show-inline";
- obj.btnPause.focus();
+ // Click video
+ obj.videoContainer.addEventListener("click", function() {
+ if(obj.movie.paused) {
+ play();
+ }
+ else if(obj.movie.ended) {
+ restart();
+ }
+ else {
+ pause();
+ }
}, false);
- // Pause
- obj.btnPause.addEventListener("click", function() {
- obj.movie.pause();
+ function play() {
+ obj.movie.play();
+ obj.container.className = obj.container.className.replace("stopped", "playing");
+
+ }
+ function pause() {
+ obj.movie.pause();
obj.container.className = obj.container.className.replace("playing", "stopped");
+ }
- obj.btnPlay.className = "px-video-play px-video-show-inline";
- obj.btnPause.className = "px-video-pause hide";
- obj.btnPlay.focus();
- }, false);
-
- // Restart
- obj.btnRestart.addEventListener("click", function() {
+ function restart() {
// Move to beginning
obj.movie.currentTime = 0;
@@ -298,11 +417,17 @@ function InitPxVideo(options) {
}
// Play and ensure the play button is in correct state
- obj.movie.play();
- obj.btnPlay.className = "px-video-play hide";
- obj.btnPause.className = "px-video-pause px-video-show-inline";
+ play();
+ }
- }, false);
+ // Play
+ obj.btnPlay.addEventListener("click", function() { play(); obj.btnPause.focus(); }, false);
+
+ // Pause
+ obj.btnPause.addEventListener("click", function() { pause(); obj.btnPlay.focus(); }, false);
+
+ // Restart
+ obj.btnRestart.addEventListener("click", restart, false);
// Rewind
obj.btnRewind.addEventListener("click", function() {
@@ -373,7 +498,7 @@ function InitPxVideo(options) {
// Skip when clicking progress bar
obj.progressBar.addEventListener("click", function(e) {
- obj.pos = (e.pageX - this.offsetLeft) / this.offsetWidth;
+ obj.pos = getClickPosition(e).x / this.offsetWidth;
obj.movie.currentTime = obj.pos * obj.movie.duration;
// Special handling for "manual" captions
@@ -527,101 +652,5 @@ function InitPxVideo(options) {
var tracks = obj.movie.getElementsByTagName("track");
obj.movie.removeChild(tracks[0]);
}
-
}
-};
-
-
-
-/*$(function() {
- $("video").simplePlayer();
-});*/
-
-// Simple player plugin
-// ---------------------------------
-/*;(function($) {
- $.fn.simplePlayer = function (settings) {
- // Config defaults
- var config = {
- wrapperClass: "media", // Class name added to replaced selects
- shownClass: "in",
- autoplay: false,
- templates: {
- controls: "<div class="media-controls js-media-controls"> \
- <button type="button" class="play button-toggle-play js-button-toggle-play"> \
- <span class="icon-play"></span> \
- </button> \
- <div class="progress progress-play js-progress-play" role="progress-bar"> \
- <div class="progress-buffered js-progress-buffered"></div> \
- <div class="progress-played js-progress-played"></div> \
- </div> \
- <div class="time js-time"> \
- <span class="time-elapsed js-time-elapsed">88:88</span> \
- <span class="time-seperator js-time-seperator">/</span> \
- <span class="time-total js-time-total">88:88</span> \
- </div> \
- <div class="volume has-popover js-volume"> \
- <button type="button" class="button-toggle-mute js-button-toggle-mute"> \
- <span class="icon-volume-up"></span> \
- </button> \
- <div class="popover popover-volume js-popover-volume"> \
- <div class="progress vertical-progress progress-audio-volume js-progress-audio-volume"> \
- <div class="progress-volume js-progress-volume" style="height: 80%"></div> \
- </div> \
- <div class="volume-label js-volume-label">100%</div> \
- </div> \
- </div> \
- <button type="button" class="fullscreen button-fullscreen js-button-fullscreen"> \
- <span class="icon-resize-full"></span> \
- </button> \
- </div>",
- overlay: "<div class="overlay overlay-play"><span><i class="icon-play"></i></span></div>"
- }
- };
-
- // Extend settings if they"re passed
- if (settings) {
- $.extend(config, settings);
- }
-
- this.each(function() {
- var player = this,
- status = {},
- $player = $(this).wrap("<div class="" + config.wrapperClass + (config.autoplay ? " playing" : " stopped") + "" />"),
- $wrapper = $player.parents("." + config.wrapperClass),
- supportMP4 = (function (v) { return (v.canPlayType && v.canPlayType("video/mp4")); }(document.createElement("video")));
-
- console.log($wrapper);
-
- // Inject the controls
- $(config.templates.controls).insertAfter($player);
- $(config.templates.overlay).insertAfter($player);
-
- // Select controls
- var $playbackToggle = $(".js-button-toggle-play"),
- $muteToggle = $(".js-button-toggle-mute");
-
- function togglePlayback() {
- if(status.playing && status.playing == true) {
- player.pause();
- status.playing = false;
- $wrapper.removeClass("playing").addClass("paused");
- } else {
- player.play();
- status.playing = true;
- $wrapper.removeClass("paused stopped").addClass("playing");
- }
- $("span", this).attr("class", "icon-" + (status.playing ? "pause" : "play"));
- };
-
- function toggleMute() {
- player.muted = !status.muted;
- status.muted = player.muted;
- $("span", this).attr("class", "icon-" + (status.muted ? "mute" : "volume-up"));
- };
-
- $playbackToggle.on("click", togglePlayback);
- $muteToggle.on("click", toggleMute);
- });
- };
-})(jQuery);*/ \ No newline at end of file
+} \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-13 17:07:16 +0000