if needed
+ if (is.empty(source)) {
+ source = player.media.getAttribute(player.config.attributes.embed.id);
+ // hash can also be set as attribute on the
+ hash = player.media.getAttribute(player.config.attributes.embed.hash);
+ } else {
+ hash = parseHash(source);
+ }
+ const hashParam = hash ? { h: hash } : {};
+
+ // If the owner has a pro or premium account then we can hide controls etc
+ if (premium) {
+ Object.assign(frameParams, {
+ controls: false,
+ sidedock: false,
+ });
+ }
- // Setup instance
- // https://github.com/vimeo/player.js
- player.embed = new window.Vimeo.Player(iframe, {
- autopause: player.config.autopause,
- muted: player.muted,
- });
+ // Get Vimeo params for the iframe
+ const params = buildUrlParams({
+ loop: player.config.loop.active,
+ autoplay: player.autoplay,
+ muted: player.muted,
+ gesture: 'media',
+ playsinline: player.config.playsinline,
+ // hash has to be added to iframe-URL
+ ...hashParam,
+ ...frameParams,
+ });
+
+ const id = parseId(source);
+ // Build an iframe
+ const iframe = createElement('iframe');
+ const src = format(player.config.urls.vimeo.iframe, id, params);
+ iframe.setAttribute('src', src);
+ iframe.setAttribute('allowfullscreen', '');
+ iframe.setAttribute(
+ 'allow',
+ ['autoplay', 'fullscreen', 'picture-in-picture', 'encrypted-media', 'accelerometer', 'gyroscope'].join('; '),
+ );
+
+ // Set the referrer policy if required
+ if (!is.empty(referrerPolicy)) {
+ iframe.setAttribute('referrerPolicy', referrerPolicy);
+ }
- player.media.paused = true;
- player.media.currentTime = 0;
+ // Inject the package
+ if (premium || !config.customControls) {
+ iframe.setAttribute('data-poster', player.poster);
+ player.media = replaceElement(iframe, player.media);
+ } else {
+ const wrapper = createElement('div', {
+ class: player.config.classNames.embedContainer,
+ 'data-poster': player.poster,
+ });
+ wrapper.appendChild(iframe);
+ player.media = replaceElement(wrapper, player.media);
+ }
- // Disable native text track rendering
- if (player.supported.ui) {
- player.embed.disableTextTrack();
+ // Get poster image
+ if (!config.customControls) {
+ fetch(format(player.config.urls.vimeo.api, src)).then((response) => {
+ if (is.empty(response) || !response.thumbnail_url) {
+ return;
}
- // Create a faux HTML5 API using the Vimeo API
- player.media.play = () => {
- assurePlaybackState.call(player, true);
- return player.embed.play();
- };
-
- player.media.pause = () => {
- assurePlaybackState.call(player, false);
- return player.embed.pause();
- };
-
- player.media.stop = () => {
- player.pause();
- player.currentTime = 0;
- };
-
- // Seeking
- let { currentTime } = player.media;
- Object.defineProperty(player.media, 'currentTime', {
- get() {
- return currentTime;
- },
- set(time) {
- // Vimeo will automatically play on seek if the video hasn't been played before
-
- // Get current paused state and volume etc
- const { embed, media, paused, volume } = player;
- const restorePause = paused && !embed.hasPlayed;
-
- // Set seeking state and trigger event
- media.seeking = true;
- triggerEvent.call(player, media, 'seeking');
-
- // If paused, mute until seek is complete
- Promise.resolve(restorePause && embed.setVolume(0))
- // Seek
- .then(() => embed.setCurrentTime(time))
- // Restore paused
- .then(() => restorePause && embed.pause())
- // Restore volume
- .then(() => restorePause && embed.setVolume(volume))
- .catch(() => {
- // Do nothing
- });
- },
- });
-
- // Playback speed
- let speed = player.config.speed.selected;
- Object.defineProperty(player.media, 'playbackRate', {
- get() {
- return speed;
- },
- set(input) {
- player.embed
- .setPlaybackRate(input)
- .then(() => {
- speed = input;
- triggerEvent.call(player, player.media, 'ratechange');
- })
- .catch(error => {
- // Hide menu item (and menu if empty)
- if (error.name === 'Error') {
- controls.setSpeedMenu.call(player, []);
- }
- });
- },
- });
+ // Set and show poster
+ ui.setPoster.call(player, response.thumbnail_url).catch(() => {});
+ });
+ }
- // Volume
- let { volume } = player.config;
- Object.defineProperty(player.media, 'volume', {
- get() {
- return volume;
- },
- set(input) {
- player.embed.setVolume(input).then(() => {
- volume = input;
- triggerEvent.call(player, player.media, 'volumechange');
- });
- },
- });
+ // Setup instance
+ // https://github.com/vimeo/player.js
+ player.embed = new window.Vimeo.Player(iframe, {
+ autopause: player.config.autopause,
+ muted: player.muted,
+ });
- // Muted
- let { muted } = player.config;
- Object.defineProperty(player.media, 'muted', {
- get() {
- return muted;
- },
- set(input) {
- const toggle = is.boolean(input) ? input : false;
-
- player.embed.setVolume(toggle ? 0 : player.config.volume).then(() => {
- muted = toggle;
- triggerEvent.call(player, player.media, 'volumechange');
- });
- },
- });
+ player.media.paused = true;
+ player.media.currentTime = 0;
- // Loop
- let { loop } = player.config;
- Object.defineProperty(player.media, 'loop', {
- get() {
- return loop;
- },
- set(input) {
- const toggle = is.boolean(input) ? input : player.config.loop.active;
-
- player.embed.setLoop(toggle).then(() => {
- loop = toggle;
- });
- },
- });
+ // Disable native text track rendering
+ if (player.supported.ui) {
+ player.embed.disableTextTrack();
+ }
- // Source
- let currentSrc;
+ // Create a faux HTML5 API using the Vimeo API
+ player.media.play = () => {
+ assurePlaybackState.call(player, true);
+ return player.embed.play();
+ };
+
+ player.media.pause = () => {
+ assurePlaybackState.call(player, false);
+ return player.embed.pause();
+ };
+
+ player.media.stop = () => {
+ player.pause();
+ player.currentTime = 0;
+ };
+
+ // Seeking
+ let { currentTime } = player.media;
+ Object.defineProperty(player.media, 'currentTime', {
+ get() {
+ return currentTime;
+ },
+ set(time) {
+ // Vimeo will automatically play on seek if the video hasn't been played before
+
+ // Get current paused state and volume etc
+ const { embed, media, paused, volume } = player;
+ const restorePause = paused && !embed.hasPlayed;
+
+ // Set seeking state and trigger event
+ media.seeking = true;
+ triggerEvent.call(player, media, 'seeking');
+
+ // If paused, mute until seek is complete
+ Promise.resolve(restorePause && embed.setVolume(0))
+ // Seek
+ .then(() => embed.setCurrentTime(time))
+ // Restore paused
+ .then(() => restorePause && embed.pause())
+ // Restore volume
+ .then(() => restorePause && embed.setVolume(volume))
+ .catch(() => {
+ // Do nothing
+ });
+ },
+ });
+
+ // Playback speed
+ let speed = player.config.speed.selected;
+ Object.defineProperty(player.media, 'playbackRate', {
+ get() {
+ return speed;
+ },
+ set(input) {
player.embed
- .getVideoUrl()
- .then(value => {
- currentSrc = value;
- controls.setDownloadLink.call(player);
- })
- .catch(error => {
- this.debug.warn(error);
- });
-
- Object.defineProperty(player.media, 'currentSrc', {
- get() {
- return currentSrc;
- },
+ .setPlaybackRate(input)
+ .then(() => {
+ speed = input;
+ triggerEvent.call(player, player.media, 'ratechange');
+ })
+ .catch(() => {
+ // Cannot set Playback Rate, Video is probably not on Pro account
+ player.options.speed = [1];
+ });
+ },
+ });
+
+ // Volume
+ let { volume } = player.config;
+ Object.defineProperty(player.media, 'volume', {
+ get() {
+ return volume;
+ },
+ set(input) {
+ player.embed.setVolume(input).then(() => {
+ volume = input;
+ triggerEvent.call(player, player.media, 'volumechange');
});
-
- // Ended
- Object.defineProperty(player.media, 'ended', {
- get() {
- return player.currentTime === player.duration;
- },
- });
-
- // Set aspect ratio based on video size
- Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(dimensions => {
- vimeo.ratio = getAspectRatio(dimensions[0], dimensions[1]);
- vimeo.setAspectRatio.call(this, vimeo.ratio);
+ },
+ });
+
+ // Muted
+ let { muted } = player.config;
+ Object.defineProperty(player.media, 'muted', {
+ get() {
+ return muted;
+ },
+ set(input) {
+ const toggle = is.boolean(input) ? input : false;
+
+ player.embed.setMuted(toggle ? true : player.config.muted).then(() => {
+ muted = toggle;
+ triggerEvent.call(player, player.media, 'volumechange');
});
-
- // Set autopause
- player.embed.setAutopause(player.config.autopause).then(state => {
- player.config.autopause = state;
+ },
+ });
+
+ // Loop
+ let { loop } = player.config;
+ Object.defineProperty(player.media, 'loop', {
+ get() {
+ return loop;
+ },
+ set(input) {
+ const toggle = is.boolean(input) ? input : player.config.loop.active;
+
+ player.embed.setLoop(toggle).then(() => {
+ loop = toggle;
});
-
- // Get title
- player.embed.getVideoTitle().then(title => {
- player.config.title = title;
- ui.setTitle.call(this);
- });
-
- // Get current time
- player.embed.getCurrentTime().then(value => {
- currentTime = value;
- triggerEvent.call(player, player.media, 'timeupdate');
- });
-
- // Get duration
- player.embed.getDuration().then(value => {
- player.media.duration = value;
- triggerEvent.call(player, player.media, 'durationchange');
- });
-
- // Get captions
- player.embed.getTextTracks().then(tracks => {
- player.media.textTracks = tracks;
- captions.setup.call(player);
- });
-
- player.embed.on('cuechange', ({ cues = [] }) => {
- const strippedCues = cues.map(cue => stripHTML(cue.text));
- captions.updateCues.call(player, strippedCues);
- });
-
- player.embed.on('loaded', () => {
- // Assure state and events are updated on autoplay
- player.embed.getPaused().then(paused => {
- assurePlaybackState.call(player, !paused);
- if (!paused) {
- triggerEvent.call(player, player.media, 'playing');
- }
- });
-
- if (is.element(player.embed.element) && player.supported.ui) {
- const frame = player.embed.element;
-
- // Fix keyboard focus issues
- // https://github.com/sampotts/plyr/issues/317
- frame.setAttribute('tabindex', -1);
- }
- });
-
- player.embed.on('play', () => {
- assurePlaybackState.call(player, true);
- triggerEvent.call(player, player.media, 'playing');
- });
-
- player.embed.on('pause', () => {
- assurePlaybackState.call(player, false);
- });
-
- player.embed.on('timeupdate', data => {
- player.media.seeking = false;
- currentTime = data.seconds;
- triggerEvent.call(player, player.media, 'timeupdate');
- });
-
- player.embed.on('progress', data => {
- player.media.buffered = data.percent;
- triggerEvent.call(player, player.media, 'progress');
-
- // Check all loaded
- if (parseInt(data.percent, 10) === 1) {
- triggerEvent.call(player, player.media, 'canplaythrough');
- }
-
- // Get duration as if we do it before load, it gives an incorrect value
- // https://github.com/sampotts/plyr/issues/891
- player.embed.getDuration().then(value => {
- if (value !== player.media.duration) {
- player.media.duration = value;
- triggerEvent.call(player, player.media, 'durationchange');
- }
- });
- });
-
- player.embed.on('seeked', () => {
- player.media.seeking = false;
- triggerEvent.call(player, player.media, 'seeked');
- });
-
- player.embed.on('ended', () => {
- player.media.paused = true;
- triggerEvent.call(player, player.media, 'ended');
- });
-
- player.embed.on('error', detail => {
- player.media.error = detail;
- triggerEvent.call(player, player.media, 'error');
- });
-
- // Set height/width on fullscreen
- player.on('enterfullscreen exitfullscreen', event => {
- const { target } = player.fullscreen;
-
- // Ignore for iOS native
- if (target !== player.elements.container) {
- return;
- }
-
- const toggle = event.type === 'enterfullscreen';
- const [x, y] = vimeo.ratio.split(':').map(Number);
- const dimension = x > y ? 'width' : 'height';
-
- target.style[dimension] = toggle ? `${vimeo.padding}%` : null;
- });
-
- // Rebuild UI
- setTimeout(() => ui.build.call(player), 0);
- },
+ },
+ });
+
+ // Source
+ let currentSrc;
+ player.embed
+ .getVideoUrl()
+ .then((value) => {
+ currentSrc = value;
+ controls.setDownloadUrl.call(player);
+ })
+ .catch((error) => {
+ this.debug.warn(error);
+ });
+
+ Object.defineProperty(player.media, 'currentSrc', {
+ get() {
+ return currentSrc;
+ },
+ });
+
+ // Ended
+ Object.defineProperty(player.media, 'ended', {
+ get() {
+ return player.currentTime === player.duration;
+ },
+ });
+
+ // Set aspect ratio based on video size
+ Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then((dimensions) => {
+ const [width, height] = dimensions;
+ player.embed.ratio = roundAspectRatio(width, height);
+ setAspectRatio.call(this);
+ });
+
+ // Set autopause
+ player.embed.setAutopause(player.config.autopause).then((state) => {
+ player.config.autopause = state;
+ });
+
+ // Get title
+ player.embed.getVideoTitle().then((title) => {
+ player.config.title = title;
+ ui.setTitle.call(this);
+ });
+
+ // Get current time
+ player.embed.getCurrentTime().then((value) => {
+ currentTime = value;
+ triggerEvent.call(player, player.media, 'timeupdate');
+ });
+
+ // Get duration
+ player.embed.getDuration().then((value) => {
+ player.media.duration = value;
+ triggerEvent.call(player, player.media, 'durationchange');
+ });
+
+ // Get captions
+ player.embed.getTextTracks().then((tracks) => {
+ player.media.textTracks = tracks;
+ captions.setup.call(player);
+ });
+
+ player.embed.on('cuechange', ({ cues = [] }) => {
+ const strippedCues = cues.map((cue) => stripHTML(cue.text));
+ captions.updateCues.call(player, strippedCues);
+ });
+
+ player.embed.on('loaded', () => {
+ // Assure state and events are updated on autoplay
+ player.embed.getPaused().then((paused) => {
+ assurePlaybackState.call(player, !paused);
+ if (!paused) {
+ triggerEvent.call(player, player.media, 'playing');
+ }
+ });
+
+ if (is.element(player.embed.element) && player.supported.ui) {
+ const frame = player.embed.element;
+
+ // Fix keyboard focus issues
+ // https://github.com/sampotts/plyr/issues/317
+ frame.setAttribute('tabindex', -1);
+ }
+ });
+
+ player.embed.on('bufferstart', () => {
+ triggerEvent.call(player, player.media, 'waiting');
+ });
+
+ player.embed.on('bufferend', () => {
+ triggerEvent.call(player, player.media, 'playing');
+ });
+
+ player.embed.on('play', () => {
+ assurePlaybackState.call(player, true);
+ triggerEvent.call(player, player.media, 'playing');
+ });
+
+ player.embed.on('pause', () => {
+ assurePlaybackState.call(player, false);
+ });
+
+ player.embed.on('timeupdate', (data) => {
+ player.media.seeking = false;
+ currentTime = data.seconds;
+ triggerEvent.call(player, player.media, 'timeupdate');
+ });
+
+ player.embed.on('progress', (data) => {
+ player.media.buffered = data.percent;
+ triggerEvent.call(player, player.media, 'progress');
+
+ // Check all loaded
+ if (parseInt(data.percent, 10) === 1) {
+ triggerEvent.call(player, player.media, 'canplaythrough');
+ }
+
+ // Get duration as if we do it before load, it gives an incorrect value
+ // https://github.com/sampotts/plyr/issues/891
+ player.embed.getDuration().then((value) => {
+ if (value !== player.media.duration) {
+ player.media.duration = value;
+ triggerEvent.call(player, player.media, 'durationchange');
+ }
+ });
+ });
+
+ player.embed.on('seeked', () => {
+ player.media.seeking = false;
+ triggerEvent.call(player, player.media, 'seeked');
+ });
+
+ player.embed.on('ended', () => {
+ player.media.paused = true;
+ triggerEvent.call(player, player.media, 'ended');
+ });
+
+ player.embed.on('error', (detail) => {
+ player.media.error = detail;
+ triggerEvent.call(player, player.media, 'error');
+ });
+
+ // Rebuild UI
+ if (config.customControls) {
+ setTimeout(() => ui.build.call(player), 0);
+ }
+ },
};
export default vimeo;
diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js
index 73175c144..d9bde6d13 100644
--- a/src/js/plugins/youtube.js
+++ b/src/js/plugins/youtube.js
@@ -7,432 +7,441 @@ import { createElement, replaceElement, toggleClass } from '../utils/elements';
import { triggerEvent } from '../utils/events';
import fetch from '../utils/fetch';
import is from '../utils/is';
-import loadImage from '../utils/loadImage';
-import loadScript from '../utils/loadScript';
+import loadImage from '../utils/load-image';
+import loadScript from '../utils/load-script';
+import { extend } from '../utils/objects';
import { format, generateId } from '../utils/strings';
+import { roundAspectRatio, setAspectRatio } from '../utils/style';
// Parse YouTube ID from URL
function parseId(url) {
- if (is.empty(url)) {
- return null;
- }
+ if (is.empty(url)) {
+ return null;
+ }
- const regex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
- return url.match(regex) ? RegExp.$2 : url;
+ const regex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
+ return url.match(regex) ? RegExp.$2 : url;
}
// Set playback state and trigger change (only on actual change)
function assurePlaybackState(play) {
- if (play && !this.embed.hasPlayed) {
- this.embed.hasPlayed = true;
- }
- if (this.media.paused === play) {
- this.media.paused = !play;
- triggerEvent.call(this, this.media, play ? 'play' : 'pause');
- }
+ if (play && !this.embed.hasPlayed) {
+ this.embed.hasPlayed = true;
+ }
+ if (this.media.paused === play) {
+ this.media.paused = !play;
+ triggerEvent.call(this, this.media, play ? 'play' : 'pause');
+ }
}
-const youtube = {
- setup() {
- // Add embed class for responsive
- toggleClass(this.elements.wrapper, this.config.classNames.embed, true);
+function getHost(config) {
+ if (config.noCookie) {
+ return 'https://www.youtube-nocookie.com';
+ }
- // Set aspect ratio
- youtube.setAspectRatio.call(this);
-
- // Setup API
- if (is.object(window.YT) && is.function(window.YT.Player)) {
- youtube.ready.call(this);
- } else {
- // Load the API
- loadScript(this.config.urls.youtube.sdk).catch(error => {
- this.debug.warn('YouTube API failed to load', error);
- });
-
- // Setup callback for the API
- // YouTube has it's own system of course...
- window.onYouTubeReadyCallbacks = window.onYouTubeReadyCallbacks || [];
-
- // Add to queue
- window.onYouTubeReadyCallbacks.push(() => {
- youtube.ready.call(this);
- });
-
- // Set callback to process queue
- window.onYouTubeIframeAPIReady = () => {
- window.onYouTubeReadyCallbacks.forEach(callback => {
- callback();
- });
- };
- }
- },
-
- // Get the media title
- getTitle(videoId) {
- // Try via undocumented API method first
- // This method disappears now and then though...
- // https://github.com/sampotts/plyr/issues/709
- if (is.function(this.embed.getVideoData)) {
- const { title } = this.embed.getVideoData();
-
- if (is.empty(title)) {
- this.config.title = title;
- ui.setTitle.call(this);
- return;
- }
+ if (window.location.protocol === 'http:') {
+ return 'http://www.youtube.com';
+ }
+
+ // Use YouTube's default
+ return undefined;
+}
+
+const youtube = {
+ setup() {
+ // Add embed class for responsive
+ toggleClass(this.elements.wrapper, this.config.classNames.embed, true);
+
+ // Setup API
+ if (is.object(window.YT) && is.function(window.YT.Player)) {
+ youtube.ready.call(this);
+ } else {
+ // Reference current global callback
+ const callback = window.onYouTubeIframeAPIReady;
+
+ // Set callback to process queue
+ window.onYouTubeIframeAPIReady = () => {
+ // Call global callback if set
+ if (is.function(callback)) {
+ callback();
}
- // Or via Google API
- const key = this.config.keys.google;
- if (is.string(key) && !is.empty(key)) {
- const url = format(this.config.urls.youtube.api, videoId, key);
-
- fetch(url)
- .then(result => {
- if (is.object(result)) {
- this.config.title = result.items[0].snippet.title;
- ui.setTitle.call(this);
- }
- })
- .catch(() => {});
+ youtube.ready.call(this);
+ };
+
+ // Load the SDK
+ loadScript(this.config.urls.youtube.sdk).catch((error) => {
+ this.debug.warn('YouTube API failed to load', error);
+ });
+ }
+ },
+
+ // Get the media title
+ getTitle(videoId) {
+ const url = format(this.config.urls.youtube.api, videoId);
+
+ fetch(url)
+ .then((data) => {
+ if (is.object(data)) {
+ const { title, height, width } = data;
+
+ // Set title
+ this.config.title = title;
+ ui.setTitle.call(this);
+
+ // Set aspect ratio
+ this.embed.ratio = roundAspectRatio(width, height);
}
- },
- // Set aspect ratio
- setAspectRatio() {
- const ratio = this.config.ratio.split(':');
- this.elements.wrapper.style.paddingBottom = `${100 / ratio[0] * ratio[1]}%`;
- },
+ setAspectRatio.call(this);
+ })
+ .catch(() => {
+ // Set aspect ratio
+ setAspectRatio.call(this);
+ });
+ },
+
+ // API ready
+ ready() {
+ const player = this;
+ const config = player.config.youtube;
+ // Ignore already setup (race condition)
+ const currentId = player.media && player.media.getAttribute('id');
+ if (!is.empty(currentId) && currentId.startsWith('youtube-')) {
+ return;
+ }
+
+ // Get the source URL or ID
+ let source = player.media.getAttribute('src');
+
+ // Get from
if needed
+ if (is.empty(source)) {
+ source = player.media.getAttribute(this.config.attributes.embed.id);
+ }
- // API ready
- ready() {
- const player = this;
+ // Replace the