Source API changes, Vimeo fixes, still WIP
This commit is contained in:
Sam Potts
@ -2,182 +2,124 @@
|
||||
// Docs example
|
||||
// ==========================================================================
|
||||
|
||||
/*global plyr, templates */
|
||||
/*global plyr, shr, templates */
|
||||
|
||||
// Setup the player
|
||||
plyr.setup({
|
||||
debug: true,
|
||||
volume: 9,
|
||||
title: "Video demo",
|
||||
title: 'Video demo',
|
||||
html: templates.controls.render({}),
|
||||
tooltips: true,
|
||||
captions: {
|
||||
defaultActive: true
|
||||
},
|
||||
onSetup: function() {
|
||||
if(!("media" in this)) {
|
||||
if(!('media' in this)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var player = this,
|
||||
type = player.media.tagName.toLowerCase(),
|
||||
toggle = document.querySelector("[data-toggle='fullscreen']");
|
||||
toggle = document.querySelector('[data-toggle="fullscreen"]');
|
||||
|
||||
console.log("✓ Setup done for <" + type + ">");
|
||||
console.log('✓ Setup done for <' + type + '>');
|
||||
|
||||
if(type === "video" && toggle) {
|
||||
toggle.addEventListener("click", player.toggleFullscreen, false);
|
||||
if(type === 'video' && toggle) {
|
||||
toggle.addEventListener('click', player.toggleFullscreen, false);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Setup shr
|
||||
shr.setup({
|
||||
count: {
|
||||
classname: 'btn-count'
|
||||
}
|
||||
});
|
||||
|
||||
// General functions
|
||||
(function() {
|
||||
// Popup
|
||||
function popup(event) {
|
||||
// Prevent the link opening
|
||||
if(event.target.nodeName.toLowerCase() == "a") {
|
||||
if(event.preventDefault) {
|
||||
event.preventDefault();
|
||||
}
|
||||
else {
|
||||
event.returnValue = false;
|
||||
}
|
||||
var buttons = document.querySelectorAll('[data-source]');
|
||||
|
||||
// Bind to each button
|
||||
for (var i = buttons.length - 1; i >= 0; i--) {
|
||||
buttons[i].addEventListener('click', newSource);
|
||||
}
|
||||
|
||||
// Set a new source
|
||||
function newSource() {
|
||||
var trigger = this,
|
||||
type = trigger.getAttribute('data-source'),
|
||||
player = document.querySelector('.player').plyr;
|
||||
|
||||
switch(type) {
|
||||
case 'video':
|
||||
player.source({
|
||||
type: 'video',
|
||||
sources: [{
|
||||
src: 'https://cdn.selz.com/plyr/1.0/movie.mp4',
|
||||
type: 'video/mp4'
|
||||
},
|
||||
{
|
||||
src: 'https://cdn.selz.com/plyr/1.0/movie.webm',
|
||||
type: 'video/webm'
|
||||
}],
|
||||
poster: 'https://cdn.selz.com/plyr/1.0/poster.jpg',
|
||||
tracks: [{
|
||||
kind: 'captions',
|
||||
label: 'English',
|
||||
srclang:'en',
|
||||
src: 'https://cdn.selz.com/plyr/1.0/example_captions_en.vtt',
|
||||
default: true
|
||||
}]
|
||||
});
|
||||
break;
|
||||
|
||||
case 'audio':
|
||||
player.source({
|
||||
type: 'audio',
|
||||
sources: [{
|
||||
src: 'https://cdn.selz.com/plyr/1.0/logistics-96-sample.mp3',
|
||||
type: 'audio/mp3'
|
||||
},
|
||||
{
|
||||
src: 'https://cdn.selz.com/plyr/1.0/logistics-96-sample.ogg',
|
||||
type: 'audio/ogg'
|
||||
}]
|
||||
});
|
||||
break;
|
||||
|
||||
case 'youtube':
|
||||
player.source({
|
||||
type: 'youtube',
|
||||
sources: 'iicnVez5U7M'
|
||||
});
|
||||
break;
|
||||
|
||||
case 'vimeo':
|
||||
player.source({
|
||||
type: 'vimeo',
|
||||
sources: '125220818'
|
||||
});
|
||||
break;
|
||||
}
|
||||
|
||||
for (var x = buttons.length - 1; x >= 0; x--) {
|
||||
buttons[x].classList.remove('active');
|
||||
}
|
||||
|
||||
var link = event.target,
|
||||
url = link.href,
|
||||
width = link.getAttribute("data-window-width") || 600,
|
||||
height = link.getAttribute("data-window-height") || 600,
|
||||
name = link.getAttribute("data-window-name") || "popup";
|
||||
|
||||
// If window exists, just focus it
|
||||
if(window["window-"+name] && !window["window-"+name].closed) {
|
||||
window["window-"+name].focus();
|
||||
}
|
||||
else {
|
||||
// Get position
|
||||
var left = window.screenLeft !== undefined ? window.screenLeft : screen.left;
|
||||
var top = window.screenTop !== undefined ? window.screenTop : screen.top;
|
||||
|
||||
// Open in the centre of the screen
|
||||
var x = (screen.width / 2) - (width / 2) + left,
|
||||
y = (screen.height / 2) - (height / 2) + top;
|
||||
|
||||
// Open that window
|
||||
window["window-"+name] = window.open(url, name, "top=" + y +",left="+ x +",width=" + width + ",height=" + height);
|
||||
|
||||
// Focus new window
|
||||
window["window-"+name].focus();
|
||||
}
|
||||
}
|
||||
|
||||
// Trigger popups
|
||||
document.querySelector(".js-popup").addEventListener("click", popup);
|
||||
|
||||
// Get JSONP
|
||||
function getJSONP(url, callback) {
|
||||
var name = "jsonp_callback_" + Math.round(100000 * Math.random());
|
||||
|
||||
// Cleanup to prevent memory leaks and hit original callback
|
||||
window[name] = function(data) {
|
||||
delete window[name];
|
||||
document.body.removeChild(script);
|
||||
callback(data);
|
||||
};
|
||||
|
||||
// Create a faux script
|
||||
var script = document.createElement("script");
|
||||
script.setAttribute("src", url + (url.indexOf("?") >= 0 ? "&" : "?") + "callback=" + name);
|
||||
|
||||
// Inject to the body
|
||||
document.body.appendChild(script);
|
||||
}
|
||||
|
||||
// Get star count
|
||||
var storageSupported = ("sessionStorage" in window),
|
||||
selectors = {
|
||||
github: ".js-stargazers-count",
|
||||
twitter: ".js-tweet-count"
|
||||
};
|
||||
|
||||
// Display the count next to the button
|
||||
function displayCount(selector, count) {
|
||||
document.querySelector(selector).innerHTML = count;
|
||||
}
|
||||
|
||||
// Add star
|
||||
function formatGitHubCount(count) {
|
||||
return "★ " + count;
|
||||
}
|
||||
|
||||
// Check if it's in session storage first
|
||||
if(storageSupported && "github_stargazers" in window.sessionStorage) {
|
||||
displayCount(selectors.github, formatGitHubCount(window.sessionStorage.github_stargazers));
|
||||
}
|
||||
else {
|
||||
getJSONP("https://api.github.com/repos/selz/plyr?access_token=a46ac653210ba6a6be44260c29c333470c3fbbf5", function (json) {
|
||||
if (json && typeof json.data.stargazers_count !== "undefined") {
|
||||
// Update UI
|
||||
displayCount(selectors.github, formatGitHubCount(json.data.stargazers_count));
|
||||
|
||||
// Store in session storage
|
||||
window.sessionStorage.github_stargazers = json.data.stargazers_count;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Get tweet count
|
||||
if(storageSupported && "tweets" in window.sessionStorage) {
|
||||
displayCount(selectors.twitter, window.sessionStorage.tweets);
|
||||
}
|
||||
else {
|
||||
getJSONP("https://cdn.api.twitter.com/1/urls/count.json?url=plyr.io", function (json) {
|
||||
if (json && typeof json.count !== "undefined") {
|
||||
// Update UI
|
||||
displayCount(selectors.twitter, json.count);
|
||||
|
||||
// Store in session storage
|
||||
window.sessionStorage.tweets = json.count;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Tabs
|
||||
var tabs = document.querySelectorAll(".nav-panel a"),
|
||||
panels = document.querySelectorAll(".panels > .panel"),
|
||||
activeClass = "active";
|
||||
|
||||
for (var i = tabs.length - 1; i >= 0; i--) {
|
||||
tabs[i].addEventListener("click", togglePanel);
|
||||
}
|
||||
|
||||
function togglePanel(event) {
|
||||
event.preventDefault();
|
||||
|
||||
var tab = event.target,
|
||||
panel = document.querySelector(tab.getAttribute("href"));
|
||||
|
||||
for (var i = panels.length - 1; i >= 0; i--) {
|
||||
panels[i].classList.remove(activeClass);
|
||||
}
|
||||
|
||||
for (var x = tabs.length - 1; x >= 0; x--) {
|
||||
tabs[x].classList.remove(activeClass);
|
||||
}
|
||||
|
||||
panel.classList.add(activeClass);
|
||||
event.target.classList.add(activeClass);
|
||||
}
|
||||
event.target.classList.add('active');
|
||||
}
|
||||
})();
|
||||
|
||||
// Google analytics
|
||||
// For demo site (http://[www.]plyr.io) only
|
||||
if(document.domain.indexOf("plyr.io") > -1) {
|
||||
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");
|
||||
})(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