aboutsummaryrefslogtreecommitdiffstats
path: root/demo/src
diff options
context:
space:
mode:
Diffstat (limited to 'demo/src')
-rw-r--r--demo/src/js/lib/sprite.js89
-rw-r--r--demo/src/js/main.js164
2 files changed, 180 insertions, 73 deletions
diff --git a/demo/src/js/lib/sprite.js b/demo/src/js/lib/sprite.js
new file mode 100644
index 00000000..bcd8a0b7
--- /dev/null
+++ b/demo/src/js/lib/sprite.js
@@ -0,0 +1,89 @@
+// ==========================================================================
+// SVG sprite loading and caching
+// This file should be at the top of the body to avoid a flash
+// Usage: loadSprite('https://cdn.com/path/to/sprite.svg', 'sprite-id');
+// The second argument is optional but prevents loading twice
+// ==========================================================================
+
+(function() {
+ window.loadSprite = function(url, id) {
+ if (typeof url !== "string") {
+ return;
+ }
+
+ var body = document.body;
+ var prefix = "cache-";
+ var hasId = typeof id === "string";
+ var isCached = false;
+
+ // Check for *actual* storage support
+ var cacheSupported = (function() {
+ if (!hasId) {
+ return false;
+ }
+ var test = '___test';
+ try {
+ localStorage.setItem(test, test);
+ localStorage.removeItem(test);
+ return true;
+ } catch (e) {
+ return false;
+ }
+ })();
+
+ function updateSprite(container, data) {
+ // Inject content
+ container.innerHTML = data;
+
+ // Inject the SVG to the body
+ body.insertBefore(container, body.childNodes[0]);
+ }
+
+ // Only load once
+ if (!hasId || document.querySelectorAll("#" + id).length === 0) {
+ // Create container
+ var container = document.createElement("div");
+ container.setAttribute("hidden", "");
+
+ if (hasId) {
+ container.setAttribute("id", id);
+ }
+
+ // Check in cache
+ if (cacheSupported) {
+ var cached = localStorage.getItem(prefix + id);
+ isCached = cached !== null;
+
+ if (isCached) {
+ var data = JSON.parse(cached);
+ updateSprite(container, data.content);
+ }
+ }
+
+ // ReSharper disable once InconsistentNaming
+ var xhr = new XMLHttpRequest();
+
+ // XHR for Chrome/Firefox/Opera/Safari
+ if ("withCredentials" in xhr) {
+ xhr.open("GET", url, true);
+ }
+ // Not supported
+ else {
+ return;
+ }
+
+ // Once loaded, inject to container and body
+ xhr.onload = function() {
+ if (cacheSupported) {
+ localStorage.setItem(prefix + id, JSON.stringify({
+ content: xhr.responseText
+ }));
+ }
+
+ updateSprite(container, xhr.responseText);
+ };
+
+ xhr.send();
+ }
+ }
+})();
diff --git a/demo/src/js/main.js b/demo/src/js/main.js
index e2926df5..b5d5ad15 100644
--- a/demo/src/js/main.js
+++ b/demo/src/js/main.js
@@ -4,76 +4,92 @@
// Please see readme.md in the root or github.com/selz/plyr
// ==========================================================================
-/*global plyr*/
+/*global Plyr*/
// General functions
(function() {
- //document.body.addEventListener('ready', function(event) { console.log(event); });
+ document.body.addEventListener('ready', function(event) {
+ console.log(event);
+ });
// Setup the player
- var instances = plyr.setup({
- debug: true,
- title: 'Video demo',
- iconUrl: '../dist/plyr.svg',
+ var player = new Plyr('#player', {
+ debug: true,
+ title: 'View From A Blue Moon',
+ iconUrl: '../dist/plyr.svg',
tooltips: {
- controls: true
+ controls: true
},
captions: {
- defaultActive: true
- }
+ defaultActive: true
+ },
+ controls: [
+ 'play-large',
+ 'play',
+ 'progress',
+ 'current-time',
+ 'mute',
+ 'volume',
+ 'captions',
+ 'settings',
+ 'fullscreen',
+ 'pip',
+ 'airplay'
+ ]
});
- plyr.loadSprite('dist/demo.svg');
-
- // Plyr returns an array regardless
- var player = instances[0];
+ window.loadSprite('dist/demo.svg', 'demo-sprite');
// Setup type toggle
- var buttons = document.querySelectorAll('[data-source]'),
- types = {
- video: 'video',
- audio: 'audio',
- youtube: 'youtube',
- vimeo: 'vimeo'
- },
- currentType = window.location.hash.replace('#', ''),
- historySupport = (window.history && window.history.pushState);
+ var buttons = document.querySelectorAll('[data-source]');
+ var types = {
+ video: 'video',
+ audio: 'audio',
+ youtube: 'youtube',
+ vimeo: 'vimeo'
+ };
+ var currentType = window.location.hash.replace('#', '');
+ var historySupport = (window.history && window.history.pushState);
// Bind to each button
- for (var i = buttons.length - 1; i >= 0; i--) {
- buttons[i].addEventListener('click', function() {
+ [].forEach.call(buttons, function(button) {
+ button.addEventListener('click', function() {
var type = this.getAttribute('data-source');
newSource(type);
if (historySupport) {
- history.pushState({ 'type': type }, '', '#' + type);
+ history.pushState({
+ 'type': type
+ }, '', '#' + type);
}
});
- }
+ });
// List for backwards/forwards
window.addEventListener('popstate', function(event) {
- if(event.state && 'type' in event.state) {
+ if (event.state && 'type' in event.state) {
newSource(event.state.type);
}
});
// On load
- if(historySupport) {
+ if (historySupport) {
var video = !currentType.length;
// If there's no current type set, assume video
- if(video) {
+ if (video) {
currentType = types.video;
}
// Replace current history state
- if(currentType in types) {
- history.replaceState({ 'type': currentType }, '', (video ? '' : '#' + currentType));
+ if (currentType in types) {
+ history.replaceState({
+ 'type': currentType
+ }, '', (video ? '' : '#' + currentType));
}
// If it's not video, load the source
- if(currentType !== types.video) {
+ if (currentType !== types.video) {
newSource(currentType, true);
}
}
@@ -83,8 +99,7 @@
if (element) {
if (element.classList) {
element.classList[state ? 'add' : 'remove'](className);
- }
- else {
+ } else {
var name = (' ' + element.className + ' ').replace(/\s+/g, ' ').replace(' ' + className + ' ', '');
element.className = name + (state ? ' ' + className : '');
}
@@ -94,29 +109,25 @@
// Set a new source
function newSource(type, init) {
// Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video
- if(!(type in types) || (!init && type === currentType) || (!currentType.length && type === types.video)) {
+ if (!(type in types) || (!init && type === currentType) || (!currentType.length && type === types.video)) {
return;
}
- switch(type) {
+ switch (type) {
case types.video:
player.source({
- type: 'video',
- title: 'View From A Blue Moon',
+ type: 'video',
+ title: 'View From A Blue Moon',
sources: [{
- src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4',
- type: 'video/mp4'
- },
- {
- src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm',
- type: 'video/webm'
+ src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4',
+ type: 'video/mp4'
}],
- poster: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg',
- tracks: [{
- kind: 'captions',
- label: 'English',
- srclang:'en',
- src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
+ poster: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg',
+ tracks: [{
+ kind: 'captions',
+ label: 'English',
+ srclang: 'en',
+ src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
default: true
}]
});
@@ -124,37 +135,37 @@
case types.audio:
player.source({
- type: 'audio',
- title: 'Kishi Bashi – “It All Began With A Burst”',
+ type: 'audio',
+ title: 'Kishi Bashi – “It All Began With A Burst”',
sources: [{
- src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',
- type: 'audio/mp3'
+ src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',
+ type: 'audio/mp3'
},
- {
- src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
- type: 'audio/ogg'
+ {
+ src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
+ type: 'audio/ogg'
}]
});
break;
case types.youtube:
player.source({
- type: 'video',
- title: 'View From A Blue Moon',
+ type: 'video',
+ title: 'View From A Blue Moon',
sources: [{
- src: 'bTqVqk7FSmY',
- type: 'youtube'
+ src: 'https://www.youtube.com/watch?v=bTqVqk7FSmY',
+ type: 'youtube'
}]
});
break;
case types.vimeo:
player.source({
- type: 'video',
- title: 'View From A Blue Moon',
+ type: 'video',
+ title: 'View From A Blue Moon',
sources: [{
- src: '147865858',
- type: 'vimeo'
+ src: 'https://vimeo.com/76979871',
+ type: 'vimeo'
}]
});
break;
@@ -169,17 +180,24 @@
}
// Set active on parent
- toggleClass(document.querySelector('[data-source="'+ type +'"]').parentElement, 'active', true);
+ toggleClass(document.querySelector('[data-source="' + type + '"]').parentElement, 'active', true);
}
})();
// Google analytics
// For demo site (http://[www.]plyr.io) only
-if(document.domain.indexOf('plyr.io') > -1) {
- (function(i,s,o,g,r,a,m){i.GoogleAnalyticsObject=r;i[r]=i[r]||function(){
- (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
- m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
- })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
- ga('create', 'UA-40881672-11', 'auto');
- ga('send', 'pageview');
+if (document.domain.indexOf('plyr.io') > -1) {
+ (function(i, s, o, g, r, a, m) {
+ i.GoogleAnalyticsObject = r;
+ i[r] = i[r] || function() {
+ (i[r].q = i[r].q || []).push(arguments)
+ }, i[r].l = 1 * new Date();
+ a = s.createElement(o),
+ m = s.getElementsByTagName(o)[0];
+ a.async = 1;
+ a.src = g;
+ m.parentNode.insertBefore(a, m)
+ })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
+ window.ga('create', 'UA-40881672-11', 'auto');
+ window.ga('send', 'pageview');
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-08 18:27:27 +0000