to hide the standard controls and UI
+ setAspectRatio: function setAspectRatio(input) {
+ var _split = (is.string(input) ? input : this.config.ratio).split(':'),
+ _split2 = _slicedToArray(_split, 2),
+ x = _split2[0],
+ y = _split2[1];
+
+ var padding = 100 / x * y;
+ this.elements.wrapper.style.paddingBottom = "".concat(padding, "%");
+
+ if (this.supported.ui) {
+ var height = 240;
+ var offset = (height - padding) / (height / 50);
+ this.media.style.transform = "translateY(-".concat(offset, "%)");
+ }
+ },
+ // API Ready
+ ready: function ready$$1() {
+ var _this2 = this;
+
+ var player = this; // Get Vimeo params for the iframe
+
+ var options = {
+ loop: player.config.loop.active,
+ autoplay: player.autoplay,
+ // muted: player.muted,
+ byline: false,
+ portrait: false,
+ title: false,
+ speed: true,
+ transparent: 0,
+ gesture: 'media',
+ playsinline: !this.config.fullscreen.iosNative
+ };
+ var params = buildUrlParams(options); // Get the source URL or ID
+
+ var source = player.media.getAttribute('src'); // Get from
if needed
+
+ if (is.empty(source)) {
+ source = player.media.getAttribute(player.config.attributes.embed.id);
+ }
+
+ var id = parseId(source); // Build an iframe
+
+ var iframe = createElement('iframe');
+ var src = format(player.config.urls.vimeo.iframe, id, params);
+ iframe.setAttribute('src', src);
+ iframe.setAttribute('allowfullscreen', '');
+ iframe.setAttribute('allowtransparency', '');
+ iframe.setAttribute('allow', 'autoplay'); // Get poster, if already set
+
+ var poster = player.poster; // Inject the package
+
+ var wrapper = createElement('div', {
+ poster: poster,
+ class: player.config.classNames.embedContainer
+ });
+ wrapper.appendChild(iframe);
+ player.media = replaceElement(wrapper, player.media); // Get poster image
+
+ fetch(format(player.config.urls.vimeo.api, id), 'json').then(function (response) {
+ if (is.empty(response)) {
+ return;
+ } // Get the URL for thumbnail
+
+
+ var url = new URL(response[0].thumbnail_large); // Get original image
+
+ url.pathname = "".concat(url.pathname.split('_')[0], ".jpg"); // Set and show poster
+
+ ui.setPoster.call(player, url.href).catch(function () {});
+ }); // Setup instance
+ // https://github.com/vimeo/player.js
+
+ player.embed = new window.Vimeo.Player(iframe, {
+ autopause: player.config.autopause,
+ muted: player.muted
+ });
+ player.media.paused = true;
+ player.media.currentTime = 0; // Disable native text track rendering
+
+ if (player.supported.ui) {
+ player.embed.disableTextTrack();
+ } // Create a faux HTML5 API using the Vimeo API
+
+
+ player.media.play = function () {
+ assurePlaybackState.call(player, true);
+ return player.embed.play();
+ };
+
+ player.media.pause = function () {
+ assurePlaybackState.call(player, false);
+ return player.embed.pause();
+ };
+
+ player.media.stop = function () {
+ player.pause();
+ player.currentTime = 0;
+ }; // Seeking
+
+
+ var currentTime = player.media.currentTime;
+ Object.defineProperty(player.media, 'currentTime', {
+ get: function get() {
+ return currentTime;
+ },
+ set: function set(time) {
+ // Vimeo will automatically play on seek if the video hasn't been played before
+ // Get current paused state and volume etc
+ var embed = player.embed,
+ media = player.media,
+ paused = player.paused,
+ volume = player.volume;
+ var 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(function () {
+ return embed.setCurrentTime(time);
+ }) // Restore paused
+ .then(function () {
+ return restorePause && embed.pause();
+ }) // Restore volume
+ .then(function () {
+ return restorePause && embed.setVolume(volume);
+ }).catch(function () {// Do nothing
+ });
+ }
+ }); // Playback speed
+
+ var speed = player.config.speed.selected;
+ Object.defineProperty(player.media, 'playbackRate', {
+ get: function get() {
+ return speed;
+ },
+ set: function set(input) {
+ player.embed.setPlaybackRate(input).then(function () {
+ speed = input;
+ triggerEvent.call(player, player.media, 'ratechange');
+ }).catch(function (error) {
+ // Hide menu item (and menu if empty)
+ if (error.name === 'Error') {
+ controls.setSpeedMenu.call(player, []);
+ }
+ });
+ }
+ }); // Volume
+
+ var volume = player.config.volume;
+ Object.defineProperty(player.media, 'volume', {
+ get: function get() {
+ return volume;
+ },
+ set: function set(input) {
+ player.embed.setVolume(input).then(function () {
+ volume = input;
+ triggerEvent.call(player, player.media, 'volumechange');
+ });
+ }
+ }); // Muted
+
+ var muted = player.config.muted;
+ Object.defineProperty(player.media, 'muted', {
+ get: function get() {
+ return muted;
+ },
+ set: function set(input) {
+ var toggle = is.boolean(input) ? input : false;
+ player.embed.setVolume(toggle ? 0 : player.config.volume).then(function () {
+ muted = toggle;
+ triggerEvent.call(player, player.media, 'volumechange');
+ });
+ }
+ }); // Loop
+
+ var loop = player.config.loop;
+ Object.defineProperty(player.media, 'loop', {
+ get: function get() {
+ return loop;
+ },
+ set: function set(input) {
+ var toggle = is.boolean(input) ? input : player.config.loop.active;
+ player.embed.setLoop(toggle).then(function () {
+ loop = toggle;
+ });
+ }
+ }); // Source
+
+ var currentSrc;
+ player.embed.getVideoUrl().then(function (value) {
+ currentSrc = value;
+ }).catch(function (error) {
+ _this2.debug.warn(error);
+ });
+ Object.defineProperty(player.media, 'currentSrc', {
+ get: function get() {
+ return currentSrc;
+ }
+ }); // Ended
+
+ Object.defineProperty(player.media, 'ended', {
+ get: function get() {
+ return player.currentTime === player.duration;
+ }
+ }); // Set aspect ratio based on video size
+
+ Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(function (dimensions) {
+ var ratio = getAspectRatio(dimensions[0], dimensions[1]);
+ vimeo.setAspectRatio.call(_this2, ratio);
+ }); // Set autopause
+
+ player.embed.setAutopause(player.config.autopause).then(function (state) {
+ player.config.autopause = state;
+ }); // Get title
+
+ player.embed.getVideoTitle().then(function (title) {
+ player.config.title = title;
+ ui.setTitle.call(_this2);
+ }); // Get current time
+
+ player.embed.getCurrentTime().then(function (value) {
+ currentTime = value;
+ triggerEvent.call(player, player.media, 'timeupdate');
+ }); // Get duration
+
+ player.embed.getDuration().then(function (value) {
+ player.media.duration = value;
+ triggerEvent.call(player, player.media, 'durationchange');
+ }); // Get captions
+
+ player.embed.getTextTracks().then(function (tracks) {
+ player.media.textTracks = tracks;
+ captions.setup.call(player);
+ });
+ player.embed.on('cuechange', function (_ref) {
+ var _ref$cues = _ref.cues,
+ cues = _ref$cues === void 0 ? [] : _ref$cues;
+ var strippedCues = cues.map(function (cue) {
+ return stripHTML(cue.text);
+ });
+ captions.updateCues.call(player, strippedCues);
+ });
+ player.embed.on('loaded', function () {
+ // Assure state and events are updated on autoplay
+ player.embed.getPaused().then(function (paused) {
+ assurePlaybackState.call(player, !paused);
+
+ if (!paused) {
+ triggerEvent.call(player, player.media, 'playing');
+ }
+ });
+
+ if (is.element(player.embed.element) && player.supported.ui) {
+ var frame = player.embed.element; // Fix keyboard focus issues
+ // https://github.com/sampotts/plyr/issues/317
+
+ frame.setAttribute('tabindex', -1);
+ }
+ });
+ player.embed.on('play', function () {
+ assurePlaybackState.call(player, true);
+ triggerEvent.call(player, player.media, 'playing');
+ });
+ player.embed.on('pause', function () {
+ assurePlaybackState.call(player, false);
+ });
+ player.embed.on('timeupdate', function (data) {
+ player.media.seeking = false;
+ currentTime = data.seconds;
+ triggerEvent.call(player, player.media, 'timeupdate');
+ });
+ player.embed.on('progress', function (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(function (value) {
+ if (value !== player.media.duration) {
+ player.media.duration = value;
+ triggerEvent.call(player, player.media, 'durationchange');
+ }
+ });
+ });
+ player.embed.on('seeked', function () {
+ player.media.seeking = false;
+ triggerEvent.call(player, player.media, 'seeked');
+ });
+ player.embed.on('ended', function () {
+ player.media.paused = true;
+ triggerEvent.call(player, player.media, 'ended');
+ });
+ player.embed.on('error', function (detail) {
+ player.media.error = detail;
+ triggerEvent.call(player, player.media, 'error');
+ }); // Rebuild UI
+
+ setTimeout(function () {
+ return ui.build.call(player);
+ }, 0);
+ }
+ };
+
+ // ==========================================================================
+
+ function parseId$1(url) {
+ if (is.empty(url)) {
+ return null;
}
- // ==========================================================================
+ var 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)
- // Parse Vimeo ID from URL
- function parseId(url) {
- if (is.empty(url)) {
- return null;
- }
- if (is.number(Number(url))) {
- return url;
- }
-
- var regex = /^.*(vimeo.com\/|video\/)(\d+).*/;
- return url.match(regex) ? RegExp.$2 : url;
+ function assurePlaybackState$1(play) {
+ if (play && !this.embed.hasPlayed) {
+ this.embed.hasPlayed = true;
}
- // Get aspect ratio for dimensions
- function getAspectRatio(width, height) {
- var getRatio = function getRatio(w, h) {
- return h === 0 ? w : getRatio(h, w % h);
+ if (this.media.paused === play) {
+ this.media.paused = !play;
+ triggerEvent.call(this, this.media, play ? 'play' : 'pause');
+ }
+ }
+
+ var youtube = {
+ setup: function setup() {
+ var _this = this;
+
+ // Add embed class for responsive
+ toggleClass(this.elements.wrapper, this.config.classNames.embed, true); // 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(function (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(function () {
+ youtube.ready.call(_this);
+ }); // Set callback to process queue
+
+ window.onYouTubeIframeAPIReady = function () {
+ window.onYouTubeReadyCallbacks.forEach(function (callback) {
+ callback();
+ });
};
- var ratio = getRatio(width, height);
- return width / ratio + ':' + height / ratio;
- }
+ }
+ },
+ // Get the media title
+ getTitle: function getTitle(videoId) {
+ var _this2 = this;
- // Set playback state and trigger change (only on actual change)
- function assurePlaybackState(play) {
- if (play && !this.embed.hasPlayed) {
- this.embed.hasPlayed = true;
+ // 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)) {
+ var _this$embed$getVideoD = this.embed.getVideoData(),
+ title = _this$embed$getVideoD.title;
+
+ if (is.empty(title)) {
+ this.config.title = title;
+ ui.setTitle.call(this);
+ return;
}
- if (this.media.paused === play) {
- this.media.paused = !play;
- triggerEvent.call(this, this.media, play ? 'play' : 'pause');
+ } // Or via Google API
+
+
+ var key = this.config.keys.google;
+
+ if (is.string(key) && !is.empty(key)) {
+ var url = format(this.config.urls.youtube.api, videoId, key);
+ fetch(url).then(function (result) {
+ if (is.object(result)) {
+ _this2.config.title = result.items[0].snippet.title;
+ ui.setTitle.call(_this2);
+ }
+ }).catch(function () {});
+ }
+ },
+ // Set aspect ratio
+ setAspectRatio: function setAspectRatio() {
+ var ratio = this.config.ratio.split(':');
+ this.elements.wrapper.style.paddingBottom = "".concat(100 / ratio[0] * ratio[1], "%");
+ },
+ // API ready
+ ready: function ready$$1() {
+ var player = this; // Ignore already setup (race condition)
+
+ var currentId = player.media.getAttribute('id');
+
+ if (!is.empty(currentId) && currentId.startsWith('youtube-')) {
+ return;
+ } // Get the source URL or ID
+
+
+ var source = player.media.getAttribute('src'); // Get from
if needed
+
+ if (is.empty(source)) {
+ source = player.media.getAttribute(this.config.attributes.embed.id);
+ } // Replace the