aboutsummaryrefslogtreecommitdiffstats
path: root/demo/src
diff options
context:
space:
mode:
Diffstat (limited to 'demo/src')
-rw-r--r--demo/src/js/main.js316
-rw-r--r--demo/src/less/components/examples.less2
2 files changed, 159 insertions, 159 deletions
diff --git a/demo/src/js/main.js b/demo/src/js/main.js
index f4abc7b7..bdd7febe 100644
--- a/demo/src/js/main.js
+++ b/demo/src/js/main.js
@@ -8,78 +8,78 @@
// General functions
;(function() {
- 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',
- tooltips: {
- controls: true
- },
- captions: {
- defaultActive: true
- }
- });
- plyr.loadSprite('dist/demo.svg');
-
- // Plyr returns an array regardless
- var player = instances[0].plyr;
-
- // 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);
-
- // Bind to each button
- for (var i = buttons.length - 1; i >= 0; i--) {
- buttons[i].addEventListener('click', function() {
- var type = this.getAttribute('data-source');
-
- newSource(type);
-
- if (historySupport) {
- history.pushState({ 'type': type }, '', '#' + type);
- }
- });
- }
-
- // List for backwards/forwards
- window.addEventListener('popstate', function(event) {
- if(event.state && 'type' in event.state) {
- newSource(event.state.type);
- }
- });
-
- // On load
- if(historySupport) {
- var video = !currentType.length;
-
- // If there's no current type set, assume video
- if(video) {
- currentType = types.video;
- }
-
- // Replace current history state
- if(currentType in types) {
- history.replaceState({ 'type': currentType }, '', (video ? '' : '#' + currentType));
- }
-
- // If it's not video, load the source
- if(currentType !== types.video) {
- newSource(currentType, true);
- }
- }
-
- // Toggle class on an element
- function toggleClass(element, className, state) {
+ 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',
+ tooltips: {
+ controls: true
+ },
+ captions: {
+ defaultActive: true
+ }
+ });
+ plyr.loadSprite('dist/demo.svg');
+
+ // Plyr returns an array regardless
+ var player = instances[0].plyr;
+
+ // 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);
+
+ // Bind to each button
+ for (var i = buttons.length - 1; i >= 0; i--) {
+ buttons[i].addEventListener('click', function() {
+ var type = this.getAttribute('data-source');
+
+ newSource(type);
+
+ if (historySupport) {
+ history.pushState({ 'type': type }, '', '#' + type);
+ }
+ });
+ }
+
+ // List for backwards/forwards
+ window.addEventListener('popstate', function(event) {
+ if(event.state && 'type' in event.state) {
+ newSource(event.state.type);
+ }
+ });
+
+ // On load
+ if(historySupport) {
+ var video = !currentType.length;
+
+ // If there's no current type set, assume video
+ if(video) {
+ currentType = types.video;
+ }
+
+ // Replace current history state
+ if(currentType in types) {
+ history.replaceState({ 'type': currentType }, '', (video ? '' : '#' + currentType));
+ }
+
+ // If it's not video, load the source
+ if(currentType !== types.video) {
+ newSource(currentType, true);
+ }
+ }
+
+ // Toggle class on an element
+ function toggleClass(element, className, state) {
if (element) {
if (element.classList) {
element.classList[state ? 'add' : 'remove'](className);
@@ -91,95 +91,95 @@
}
}
- // 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)) {
- return;
- }
-
- switch(type) {
- case types.video:
- player.source({
- 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'
- }],
- 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
- }]
- });
- break;
-
- case types.audio:
- player.source({
- 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.ogg',
- type: 'audio/ogg'
- }]
- });
- break;
-
- case types.youtube:
- player.source({
- type: 'video',
- title: 'View From A Blue Moon',
- sources: [{
- src: 'bTqVqk7FSmY',
- type: 'youtube'
- }]
- });
- break;
-
- case types.vimeo:
- player.source({
- type: 'video',
- title: 'View From A Blue Moon',
- sources: [{
- src: '143418951',
- type: 'vimeo'
- }]
- });
- break;
- }
-
- // Set the current type for next time
- currentType = type;
-
- // Remove active classes
- for (var x = buttons.length - 1; x >= 0; x--) {
- toggleClass(buttons[x].parentElement, 'active', false);
- }
-
- // Set active on parent
- toggleClass(document.querySelector('[data-source="'+ type +'"]').parentElement, 'active', true);
- }
+ // 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)) {
+ return;
+ }
+
+ switch(type) {
+ case types.video:
+ player.source({
+ 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'
+ }],
+ 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
+ }]
+ });
+ break;
+
+ case types.audio:
+ player.source({
+ 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.ogg',
+ type: 'audio/ogg'
+ }]
+ });
+ break;
+
+ case types.youtube:
+ player.source({
+ type: 'video',
+ title: 'View From A Blue Moon',
+ sources: [{
+ src: 'bTqVqk7FSmY',
+ type: 'youtube'
+ }]
+ });
+ break;
+
+ case types.vimeo:
+ player.source({
+ type: 'video',
+ title: 'View From A Blue Moon',
+ sources: [{
+ src: '143418951',
+ type: 'vimeo'
+ }]
+ });
+ break;
+ }
+
+ // Set the current type for next time
+ currentType = type;
+
+ // Remove active classes
+ for (var x = buttons.length - 1; x >= 0; x--) {
+ toggleClass(buttons[x].parentElement, 'active', false);
+ }
+
+ // Set active on parent
+ 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');
+ (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');
}
diff --git a/demo/src/less/components/examples.less b/demo/src/less/components/examples.less
index 24bf1e9c..8649c023 100644
--- a/demo/src/less/components/examples.less
+++ b/demo/src/less/components/examples.less
@@ -21,7 +21,7 @@ video {
.plyr--audio {
max-width: @example-width-audio;
}
-.plyr--video::after {
+.plyr__video-wrapper::after {
content: "";
pointer-events: none;
position: absolute;
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-08 22:47:27 +0000