Demo fixes
This commit is contained in:
Sam Potts
@ -12,68 +12,68 @@
|
||||
|
||||
// Setup the player
|
||||
var instances = plyr.setup({
|
||||
debug: true,
|
||||
title: 'Video demo',
|
||||
iconUrl: '../dist/plyr.svg',
|
||||
debug: true,
|
||||
title: "Video demo",
|
||||
iconUrl: "../dist/plyr.svg",
|
||||
tooltips: {
|
||||
controls: true
|
||||
controls: true
|
||||
},
|
||||
captions: {
|
||||
defaultActive: true
|
||||
defaultActive: true
|
||||
}
|
||||
});
|
||||
plyr.loadSprite('dist/demo.svg');
|
||||
plyr.loadSprite("dist/demo.svg");
|
||||
|
||||
// Plyr returns an array regardless
|
||||
var player = instances[0];
|
||||
|
||||
// Setup type toggle
|
||||
var buttons = document.querySelectorAll('[data-source]'),
|
||||
var buttons = document.querySelectorAll("[data-source]"),
|
||||
types = {
|
||||
video: 'video',
|
||||
audio: 'audio',
|
||||
youtube: 'youtube',
|
||||
vimeo: 'vimeo'
|
||||
video: "video",
|
||||
audio: "audio",
|
||||
youtube: "youtube",
|
||||
vimeo: "vimeo"
|
||||
},
|
||||
currentType = window.location.hash.replace('#', ''),
|
||||
historySupport = (window.history && window.history.pushState);
|
||||
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');
|
||||
buttons[i].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) {
|
||||
window.addEventListener("popstate", function(event) {
|
||||
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);
|
||||
}
|
||||
}
|
||||
@ -82,11 +82,10 @@
|
||||
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 : '');
|
||||
element.classList[state ? "add" : "remove"](className);
|
||||
} else {
|
||||
var name = (" " + element.className + " ").replace(/\s+/g, " ").replace(" " + className + " ", "");
|
||||
element.className = name + (state ? " " + className : "");
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -94,68 +93,78 @@
|
||||
// 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',
|
||||
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
|
||||
}]
|
||||
type: "video",
|
||||
title: "View From A Blue Moon",
|
||||
sources: [
|
||||
{
|
||||
src: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4",
|
||||
type: "video/mp4"
|
||||
},
|
||||
{
|
||||
src: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.webm",
|
||||
type: "video/webm"
|
||||
}
|
||||
],
|
||||
poster: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg",
|
||||
tracks: [
|
||||
{
|
||||
kind: "captions",
|
||||
label: "English",
|
||||
srclang: "en",
|
||||
src: "https://cdn.plyr.io/static/demo/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'
|
||||
}]
|
||||
type: "audio",
|
||||
title: "Kishi Bashi – “It All Began With A Burst”",
|
||||
sources: [
|
||||
{
|
||||
src: "https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",
|
||||
type: "audio/mp3"
|
||||
},
|
||||
{
|
||||
src: "https://cdn.plyr.io/static/demo/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'
|
||||
}]
|
||||
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: '147865858',
|
||||
type: 'vimeo'
|
||||
}]
|
||||
type: "video",
|
||||
title: "View From A Blue Moon",
|
||||
sources: [
|
||||
{
|
||||
src: "147865858",
|
||||
type: "vimeo"
|
||||
}
|
||||
]
|
||||
});
|
||||
break;
|
||||
}
|
||||
@ -165,21 +174,30 @@
|
||||
|
||||
// Remove active classes
|
||||
for (var x = buttons.length - 1; x >= 0; x--) {
|
||||
toggleClass(buttons[x].parentElement, 'active', false);
|
||||
toggleClass(buttons[x].parentElement, "active", false);
|
||||
}
|
||||
|
||||
// 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");
|
||||
ga("create", "UA-40881672-11", "auto");
|
||||
ga("send", "pageview");
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user