diff options
Diffstat (limited to 'demo/src/js/main.js')
| -rw-r--r-- | demo/src/js/main.js | 185 |
1 files changed, 185 insertions, 0 deletions
diff --git a/demo/src/js/main.js b/demo/src/js/main.js new file mode 100644 index 00000000..bdd7febe --- /dev/null +++ b/demo/src/js/main.js @@ -0,0 +1,185 @@ +// ========================================================================== +// Plyr.io demo +// This code is purely for the plyr.io website +// Please see readme.md in the root or github.com/selz/plyr +// ========================================================================== + +/*global plyr*/ + +// 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) { + if (element) { + if (element.classList) { + element.classList[state ? 'add' : 'remove'](className); + } + else { + var name = (' ' + element.className + ' ').replace(/\s+/g, ' ').replace(' ' + className + ' ', ''); + element.className = name + (state ? ' ' + className : ''); + } + } + } + + // 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'); +} |