to hide the standard controls and UI
+ setAspectRatio: function setAspectRatio(input) {
+ var ratio = utils.is.string(input) ? input.split(':') : this.config.ratio.split(':');
+ var padding = 100 / ratio[0] * ratio[1];
+ 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() {
+ var _this2 = this;
+
+ var player = this;
+
+ // Get Vimeo params for the iframe
+ var options = {
+ loop: player.config.loop.active,
+ autoplay: player.autoplay,
+ byline: false,
+ portrait: false,
+ title: false,
+ speed: true,
+ transparent: 0,
+ gesture: 'media',
+ playsinline: !this.config.fullscreen.iosNative
+ };
+ var params = utils.buildUrlParams(options);
+
+ // Get the source URL or ID
+ var source = player.media.getAttribute('src');
+
+ // Get from
if needed
+ if (utils.is.empty(source)) {
+ source = player.media.getAttribute(player.config.attributes.embed.id);
+ }
+
+ var id = utils.parseVimeoId(source);
+
+ // Build an iframe
+ var iframe = utils.createElement('iframe');
+ var src = utils.format(player.config.urls.vimeo.iframe, id, params);
+ iframe.setAttribute('src', src);
+ iframe.setAttribute('allowfullscreen', '');
+ iframe.setAttribute('allowtransparency', '');
+ iframe.setAttribute('allow', 'autoplay');
+
+ // Inject the package
+ var wrapper = utils.createElement('div');
+ wrapper.appendChild(iframe);
+ player.media = utils.replaceElement(wrapper, player.media);
+
+ // Get poster image
+ utils.fetch(utils.format(player.config.urls.vimeo.api, id), 'json').then(function (response) {
+ if (utils.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 attribute
+ player.media.setAttribute('poster', url.href);
+
+ // Update
+ ui.setPoster.call(player);
+ });
+
+ // Setup instance
+ // https://github.com/vimeo/player.js
+ player.embed = new window.Vimeo.Player(iframe);
+
+ 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 () {
+ player.embed.play().then(function () {
+ player.media.paused = false;
+ });
+ };
+
+ player.media.pause = function () {
+ player.embed.pause().then(function () {
+ player.media.paused = true;
+ });
+ };
+
+ 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) {
+ // Get current paused state
+ // Vimeo will automatically play on seek
+ var paused = player.media.paused;
+
+ // Set seeking flag
+
+ player.media.seeking = true;
+
+ // Trigger seeking
+ utils.dispatchEvent.call(player, player.media, 'seeking');
+
+ // Seek after events
+ player.embed.setCurrentTime(time).catch(function () {
+ // Do nothing
+ });
+
+ // Restore pause state
+ if (paused) {
+ player.pause();
+ }
+ }
+ });
+
+ // 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;
+ utils.dispatchEvent.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;
+ utils.dispatchEvent.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 = utils.is.boolean(input) ? input : false;
+
+ player.embed.setVolume(toggle ? 0 : player.config.volume).then(function () {
+ muted = toggle;
+ utils.dispatchEvent.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 = utils.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() {
+ 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 = utils.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;
+ utils.dispatchEvent.call(player, player.media, 'timeupdate');
+ });
+
+ // Get duration
+ player.embed.getDuration().then(function (value) {
+ player.media.duration = value;
+ utils.dispatchEvent.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 (data) {
+ var cue = null;
+
+ if (data.cues.length) {
+ cue = utils.stripHTML(data.cues[0].text);
+ }
+
+ captions.setText.call(player, cue);
+ });
+
+ player.embed.on('loaded', function () {
+ if (utils.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 () {
+ // Only fire play if paused before
+ if (player.media.paused) {
+ utils.dispatchEvent.call(player, player.media, 'play');
+ }
+ player.media.paused = false;
+ utils.dispatchEvent.call(player, player.media, 'playing');
+ });
+
+ player.embed.on('pause', function () {
+ player.media.paused = true;
+ utils.dispatchEvent.call(player, player.media, 'pause');
+ });
+
+ player.embed.on('timeupdate', function (data) {
+ player.media.seeking = false;
+ currentTime = data.seconds;
+ utils.dispatchEvent.call(player, player.media, 'timeupdate');
+ });
+
+ player.embed.on('progress', function (data) {
+ player.media.buffered = data.percent;
+ utils.dispatchEvent.call(player, player.media, 'progress');
+
+ // Check all loaded
+ if (parseInt(data.percent, 10) === 1) {
+ utils.dispatchEvent.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;
+ utils.dispatchEvent.call(player, player.media, 'durationchange');
+ }
+ });
+ });
+
+ player.embed.on('seeked', function () {
+ player.media.seeking = false;
+ utils.dispatchEvent.call(player, player.media, 'seeked');
+ utils.dispatchEvent.call(player, player.media, 'play');
+ });
+
+ player.embed.on('ended', function () {
+ player.media.paused = true;
+ utils.dispatchEvent.call(player, player.media, 'ended');
+ });
+
+ player.embed.on('error', function (detail) {
+ player.media.error = detail;
+ utils.dispatchEvent.call(player, player.media, 'error');
+ });
+
+ // Rebuild UI
+ setTimeout(function () {
+ return ui.build.call(player);
+ }, 0);
+ }
+};
+
+// ==========================================================================
+
+// Standardise YouTube quality unit
+function mapQualityUnit(input) {
+ switch (input) {
+ case 'hd2160':
+ return 2160;
+
+ case 2160:
+ return 'hd2160';
+
+ case 'hd1440':
+ return 1440;
+
+ case 1440:
+ return 'hd1440';
+
+ case 'hd1080':
+ return 1080;
+
+ case 1080:
+ return 'hd1080';
+
+ case 'hd720':
+ return 720;
+
+ case 720:
+ return 'hd720';
+
+ case 'large':
+ return 480;
+
+ case 480:
+ return 'large';
+
+ case 'medium':
+ return 360;
+
+ case 360:
+ return 'medium';
+
+ case 'small':
+ return 240;
+
+ case 240:
+ return 'small';
+
+ default:
+ return 'default';
+ }
+}
+
+function mapQualityUnits(levels) {
+ if (utils.is.empty(levels)) {
+ return levels;
}
- // Check for actual support (see if we can use it)
+ return utils.dedupe(levels.map(function (level) {
+ return mapQualityUnit(level);
+ }));
+}
+var youtube = {
+ setup: function setup() {
+ var _this = this;
- createClass(Storage, [{
- key: 'get',
- value: function get$$1(key) {
- if (!Storage.supported) {
- return null;
- }
+ // Add embed class for responsive
+ utils.toggleClass(this.elements.wrapper, this.config.classNames.embed, true);
- var store = window.localStorage.getItem(this.key);
+ // Set aspect ratio
+ youtube.setAspectRatio.call(this);
- if (utils.is.empty(store)) {
- return null;
- }
+ // Setup API
+ if (utils.is.object(window.YT) && utils.is.function(window.YT.Player)) {
+ youtube.ready.call(this);
+ } else {
+ // Load the API
+ utils.loadScript(this.config.urls.youtube.sdk).catch(function (error) {
+ _this.debug.warn('YouTube API failed to load', error);
+ });
- var json = JSON.parse(store);
+ // Setup callback for the API
+ // YouTube has it's own system of course...
+ window.onYouTubeReadyCallbacks = window.onYouTubeReadyCallbacks || [];
- return utils.is.string(key) && key.length ? json[key] : json;
+ // 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();
+ });
+ };
}
- }, {
- key: 'set',
- value: function set$$1(object) {
- // Bail if we don't have localStorage support or it's disabled
- if (!Storage.supported || !this.enabled) {
+ },
+
+
+ // 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 (utils.is.function(this.embed.getVideoData)) {
+ var _embed$getVideoData = this.embed.getVideoData(),
+ title = _embed$getVideoData.title;
+
+ if (utils.is.empty(title)) {
+ this.config.title = title;
+ ui.setTitle.call(this);
return;
}
-
- // Can only store objectst
- if (!utils.is.object(object)) {
- return;
- }
-
- // Get current storage
- var storage = this.get();
-
- // Default to empty object
- if (utils.is.empty(storage)) {
- storage = {};
- }
-
- // Update the working copy of the values
- utils.extend(storage, object);
-
- // Update storage
- window.localStorage.setItem(this.key, JSON.stringify(storage));
}
- }], [{
- key: 'supported',
- get: function get$$1() {
- try {
- if (!('localStorage' in window)) {
- return false;
+
+ // Or via Google API
+ var key = this.config.keys.google;
+ if (utils.is.string(key) && !utils.is.empty(key)) {
+ var url = utils.format(this.config.urls.youtube.api, videoId, key);
+
+ utils.fetch(url).then(function (result) {
+ if (utils.is.object(result)) {
+ _this2.config.title = result.items[0].snippet.title;
+ ui.setTitle.call(_this2);
}
-
- var test = '___test';
-
- // Try to use it (it might be disabled, e.g. user is in private mode)
- // see: https://github.com/sampotts/plyr/issues/131
- window.localStorage.setItem(test, test);
- window.localStorage.removeItem(test);
-
- return true;
- } catch (e) {
- return false;
- }
+ }).catch(function () {});
}
- }]);
- return Storage;
-}();
+ },
+
+
+ // 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() {
+ var player = this;
+
+ // Ignore already setup (race condition)
+ var currentId = player.media.getAttribute('id');
+ if (!utils.is.empty(currentId) && currentId.startsWith('youtube-')) {
+ return;
+ }
+
+ // Get the source URL or ID
+ var source = player.media.getAttribute('src');
+
+ // Get from
if needed
+ if (utils.is.empty(source)) {
+ source = player.media.getAttribute(this.config.attributes.embed.id);
+ }
+
+ // Replace the