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 = padding + '%';
-
- if (this.supported.ui) {
- var height = 240;
- var offset = (height - padding) / (height / 50);
-
- this.media.style.transform = 'translateY(-' + 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 = 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$$1() {
- return currentTime;
- },
- set: function set$$1(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$$1() {
- return speed;
- },
- set: function set$$1(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$$1() {
- return volume;
- },
- set: function set$$1(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$$1() {
- return muted;
- },
- set: function set$$1(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$$1() {
- return loop;
- },
- set: function set$$1(input) {
- var toggle = is.boolean(input) ? input : player.config.loop.active;
-
- player.embed.setLoop(toggle).then(function () {
- loop = toggle;
- });
- }
- });
-
- // Source
- var currentSrc = void 0;
- player.embed.getVideoUrl().then(function (value) {
- currentSrc = value;
- }).catch(function (error) {
- _this2.debug.warn(error);
- });
-
- Object.defineProperty(player.media, 'currentSrc', {
- get: function get$$1() {
- return currentSrc;
- }
- });
-
- // Ended
- Object.defineProperty(player.media, 'ended', {
- get: function get$$1() {
- 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 === undefined ? [] : _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);
- }
- };
-
- // ==========================================================================
-
- // Parse YouTube ID from URL
- 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;
- }
-
- // Standardise YouTube quality unit
- function mapQualityUnit(input) {
- var qualities = {
- hd2160: 2160,
- hd1440: 1440,
- hd1080: 1080,
- hd720: 720,
- large: 480,
- medium: 360,
- small: 240,
- tiny: 144
- };
-
- var entry = Object.entries(qualities).find(function (entry) {
- return entry.includes(input);
- });
-
- if (entry) {
- // Get the match corresponding to the input
- return entry.find(function (value) {
- return value !== input;
- });
- }
-
- return 'default';
- }
-
- function mapQualityUnits(levels) {
- if (is.empty(levels)) {
- return levels;
- }
-
- return dedupe(levels.map(function (level) {
- return mapQualityUnit(level);
- }));
- }
-
- // Set playback state and trigger change (only on actual change)
- function assurePlaybackState$1(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');
- }
- }
-
- 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();
- });
- };
- }
- },
-
-
- // Get the media title
- getTitle: function getTitle(videoId) {
- var _this2 = this;
-
- // 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 _embed$getVideoData = this.embed.getVideoData(),
- title = _embed$getVideoData.title;
-
- if (is.empty(title)) {
- this.config.title = title;
- ui.setTitle.call(this);
- return;
- }
- }
-
- // 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 = 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