ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'develop' of github.com:Selz/plyr into develop

Browse Source 
# Conflicts:
#	readme.md
This commit is contained in:
Sam Potts
2017-11-07 23:21:35 +11:00
parent fae4ca12e0 84505da84b
commit 3f41a0cf54
16 changed files with 439 additions and 337 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/js/plugins/vimeo.js
View File

@ -4,6 +4,7 @@
import utils from './../utils';
import captions from './../captions';
import controls from './../controls';
import ui from './../ui';
const vimeo = {
@ -15,6 +16,9 @@ const vimeo = {
// Add embed class for responsive
utils.toggleClass(this.elements.wrapper, this.config.classNames.embed, true);
// Set intial ratio
vimeo.setAspectRatio.call(this);
// Set ID
this.media.setAttribute('id', utils.generateId(this.type));
@ -33,21 +37,31 @@ const vimeo = {
}
},
// Set aspect ratio
setAspectRatio(input) {
const ratio = utils.is.string(input) ? input.split(':') : this.config.ratio.split(':');
const padding = 100 / ratio[0] * ratio[1];
const offset = (300 - padding) / 6;
this.elements.wrapper.style.paddingBottom = `${padding}%`;
this.media.style.transform = `translateY(-${offset}%)`;
},
// API Ready
ready() {
const player = this;
// Get Vimeo params for the iframe
const options = {
loop: this.config.loop.active,
autoplay: this.config.autoplay,
loop: player.config.loop.active,
autoplay: player.config.autoplay,
byline: false,
portrait: false,
title: false,
speed: true,
transparent: 0,
};
const params = utils.buildUrlParameters(options);
const id = utils.parseVimeoId(this.embedId);
const id = utils.parseVimeoId(player.embedId);
// Build an iframe
const iframe = utils.createElement('iframe');
@ -57,7 +71,7 @@ const vimeo = {
player.media.appendChild(iframe);
// Setup instance
// https://github.com/vimeo/this.js
// https://github.com/vimeo/player.js
player.embed = new window.Vimeo.Player(iframe);
// Create a faux HTML5 API using the Vimeo API
@ -99,18 +113,22 @@ const vimeo = {
// Restore pause state
if (paused) {
this.pause();
player.pause();
}
},
});
// Playback speed
// Not currently supported in Vimeo
let { playbackRate } = player.media;
Object.defineProperty(player.media, 'playbackRate', {
get() {
return null;
return playbackRate;
},
set(input) {
playbackRate = input;
player.embed.setPlaybackRate(input);
utils.dispatchEvent.call(player, player.media, 'ratechange');
},
set() {},
});
// Volume
@ -148,6 +166,17 @@ const vimeo = {
},
});
// Set aspect ratio based on video size
Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(dimensions => {
const ratio = utils.getAspectRatio(dimensions[0], dimensions[1]);
vimeo.setAspectRatio.call(this, ratio);
});
// Get available speeds
if (player.config.controls.includes('settings') && player.config.settings.includes('speed')) {
controls.setSpeedMenu.call(player);
}
// Get title
player.embed.getVideoTitle().then(title => {
player.config.title = title;
@ -156,7 +185,7 @@ const vimeo = {
// Get current time
player.embed.getCurrentTime().then(value => {
currentTime = value;
utils.dispatchEvent.call(this, this.media, 'timeupdate');
utils.dispatchEvent.call(player, player.media, 'timeupdate');
});
// Get duration
@ -202,31 +231,31 @@ const vimeo = {
utils.dispatchEvent.call(player, player.media, 'pause');
});
this.embed.on('timeupdate', data => {
this.media.seeking = false;
player.embed.on('timeupdate', data => {
player.media.seeking = false;
currentTime = data.seconds;
utils.dispatchEvent.call(this, this.media, 'timeupdate');
utils.dispatchEvent.call(player, player.media, 'timeupdate');
});
this.embed.on('progress', data => {
this.media.buffered = data.percent;
utils.dispatchEvent.call(this, this.media, 'progress');
player.embed.on('progress', data => {
player.media.buffered = data.percent;
utils.dispatchEvent.call(player, player.media, 'progress');
if (parseInt(data.percent, 10) === 1) {
// Trigger event
utils.dispatchEvent.call(this, this.media, 'canplaythrough');
utils.dispatchEvent.call(player, player.media, 'canplaythrough');
}
});
this.embed.on('seeked', () => {
this.media.seeking = false;
utils.dispatchEvent.call(this, this.media, 'seeked');
utils.dispatchEvent.call(this, this.media, 'play');
player.embed.on('seeked', () => {
player.media.seeking = false;
utils.dispatchEvent.call(player, player.media, 'seeked');
utils.dispatchEvent.call(player, player.media, 'play');
});
this.embed.on('ended', () => {
this.media.paused = true;
utils.dispatchEvent.call(this, this.media, 'ended');
player.embed.on('ended', () => {
player.media.paused = true;
utils.dispatchEvent.call(player, player.media, 'ended');
});
// Rebuild UI

15
src/js/plugins/youtube.js
View File

@ -17,6 +17,9 @@ const youtube = {
// Add embed class for responsive
utils.toggleClass(this.elements.wrapper, this.config.classNames.embed, true);
// Set aspect ratio
youtube.setAspectRatio.call(this);
// Set ID
this.media.setAttribute('id', utils.generateId(this.type));
@ -44,6 +47,12 @@ const youtube = {
}
},
// Set aspect ratio
setAspectRatio() {
const ratio = this.config.ratio.split(':');
this.elements.wrapper.style.paddingBottom = `${100 / ratio[0] * ratio[1]}%`;
},
// API ready
ready(videoId) {
const player = this;
@ -66,9 +75,9 @@ const youtube = {
origin: window && window.location.hostname,
widget_referrer: window && window.location.href,
// Captions is flaky on YouTube
// cc_load_policy: (this.captions.active ? 1 : 0),
// cc_lang_pref: 'en',
// Captions are flaky on YouTube
cc_load_policy: (this.captions.active ? 1 : 0),
cc_lang_pref: this.config.captions.language,
},
events: {
onError(event) {