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 + '%)';
}
+ },
- // Seek by the number keys
- var seekByKey = function seekByKey() {
- // Divide the max duration into 10th's and times by the number value
- _this.player.currentTime = _this.player.duration / 10 * (code - 48);
+
+ // 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);
- // Handle the key on keydown
- // Reset on keyup
- if (pressed) {
- // Which keycodes should we prevent default
- var preventDefault = [48, 49, 50, 51, 52, 53, 54, 56, 57, 32, 75, 38, 40, 77, 39, 37, 70, 67, 73, 76, 79];
+ // Get the source URL or ID
+ var source = player.media.getAttribute('src');
- // Check focused element
- // and if the focused element is not editable (e.g. text input)
- // and any that accept key input http://webaim.org/techniques/keyboard/
- var focused = utils.getFocusElement();
- if (utils.is.element(focused) && focused !== this.player.elements.inputs.seek && utils.matches(focused, this.player.config.selectors.editable)) {
+ // 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$1(format(player.config.urls.vimeo.api, id), 'json').then(function (response) {
+ if (is.empty(response)) {
return;
}
- // If the code is found prevent default (e.g. prevent scrolling for arrows)
- if (preventDefault.includes(code)) {
- event.preventDefault();
- event.stopPropagation();
+ // 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');
}
- switch (code) {
- case 48:
- case 49:
- case 50:
- case 51:
- case 52:
- case 53:
- case 54:
- case 55:
- case 56:
- case 57:
- // 0-9
- if (!repeat) {
- seekByKey();
+ // 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$1(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