/* * blueimp Gallery YouTube Video Factory JS 1.2.0 * https://github.com/blueimp/Gallery * * Copyright 2013, Sebastian Tschan * https://blueimp.net * * Licensed under the MIT license: * http://www.opensource.org/licenses/MIT */ /* global define, window, document, YT */ (function (factory) { 'use strict'; if (typeof define === 'function' && define.amd) { // Register as an anonymous AMD module: define([ './blueimp-helper', './blueimp-gallery-video' ], factory); } else { // Browser globals: factory( window.blueimp.helper || window.jQuery, window.blueimp.Gallery ); } }(function ($, Gallery) { 'use strict'; if (!window.postMessage) { return Gallery; } $.extend(Gallery.prototype.options, { // The list object property (or data attribute) with the YouTube video id: youTubeVideoIdProperty: 'youtube', // Optional object with parameters passed to the YouTube video player: // https://developers.google.com/youtube/player_parameters youTubePlayerVars: { wmode: 'transparent' }, // Require a click on the native YouTube player for the initial playback: youTubeClickToPlay: true }); var textFactory = Gallery.prototype.textFactory || Gallery.prototype.imageFactory, YouTubePlayer = function (videoId, playerVars, clickToPlay) { this.videoId = videoId; this.playerVars = playerVars; this.clickToPlay = clickToPlay; this.element = document.createElement('div'); this.listeners = {}; }; $.extend(YouTubePlayer.prototype, { canPlayType: function () { return true; }, on: function (type, func) { this.listeners[type] = func; return this; }, loadAPI: function () { var that = this, onYouTubeIframeAPIReady = window.onYouTubeIframeAPIReady, apiUrl = '//www.youtube.com/iframe_api', scriptTags = document.getElementsByTagName('script'), i = scriptTags.length, scriptTag; window.onYouTubeIframeAPIReady = function () { if (onYouTubeIframeAPIReady) { onYouTubeIframeAPIReady.apply(this); } if (that.playOnReady) { that.play(); } }; while (i) { i -= 1; if (scriptTags[i].src === apiUrl) { return; } } scriptTag = document.createElement('script'); scriptTag.src = apiUrl; scriptTags[0].parentNode.insertBefore(scriptTag, scriptTags[0]); }, onReady: function () { this.ready = true; if (this.playOnReady) { this.play(); } }, onPlaying: function () { if (this.playStatus < 2) { this.listeners.playing(); this.playStatus = 2; } }, onPause: function () { Gallery.prototype.setTimeout.call( this, this.checkSeek, null, 2000 ); }, checkSeek: function () { if (this.stateChange === YT.PlayerState.PAUSED || this.stateChange === YT.PlayerState.ENDED) { // check if current state change is actually paused this.listeners.pause(); delete this.playStatus; } }, onStateChange: function (event) { switch (event.data) { case YT.PlayerState.PLAYING: this.hasPlayed = true; this.onPlaying(); break; case YT.PlayerState.PAUSED: case YT.PlayerState.ENDED: this.onPause(); break; } // Save most recent state change to this.stateChange this.stateChange = event.data; }, onError: function (event) { this.listeners.error(event); }, play: function () { var that = this; if (!this.playStatus) { this.listeners.play(); this.playStatus = 1; } if (this.ready) { if (!this.hasPlayed && (this.clickToPlay || (window.navigator && /iP(hone|od|ad)/.test(window.navigator.platform)))) { // Manually trigger the playing callback if clickToPlay // is enabled and to workaround a limitation in iOS, // which requires synchronous user interaction to start // the video playback: this.onPlaying(); } else { this.player.playVideo(); } } else { this.playOnReady = true; if (!(window.YT && YT.Player)) { this.loadAPI(); } else if (!this.player) { this.player = new YT.Player(this.element, { videoId: this.videoId, playerVars: this.playerVars, events: { onReady: function () { that.onReady(); }, onStateChange: function (event) { that.onStateChange(event); }, onError: function (event) { that.onError(event); } } }); } } }, pause: function () { if (this.ready) { this.player.pauseVideo(); } else if (this.playStatus) { delete this.playOnReady; this.listeners.pause(); delete this.playStatus; } } }); $.extend(Gallery.prototype, { YouTubePlayer: YouTubePlayer, textFactory: function (obj, callback) { var options = this.options, videoId = this.getItemProperty(obj, options.youTubeVideoIdProperty); if (videoId) { if (this.getItemProperty(obj, options.urlProperty) === undefined) { obj[options.urlProperty] = '//www.youtube.com/watch?v=' + videoId; } if (this.getItemProperty(obj, options.videoPosterProperty) === undefined) { obj[options.videoPosterProperty] = '//img.youtube.com/vi/' + videoId + '/maxresdefault.jpg'; } return this.videoFactory( obj, callback, new YouTubePlayer( videoId, options.youTubePlayerVars, options.youTubeClickToPlay ) ); } return textFactory.call(this, obj, callback); } }); return Gallery; }));