')); } this.videoId = videoId; } App.Util.Extends(YoutubePlayer, Player); YoutubePlayer.prototype.release = function (destroy) { if (!destroy && this.videoIsReady) { this.ytPlayer.stopVideo(); } Player.prototype.release.call(this, destroy); }; YoutubePlayer.prototype.loadThumbnailImage = function (callback) { App.images.load('http://img.youtube.com/vi/' + this.videoId + '/default.jpg', function (image) { callback(image); }); }; YoutubePlayer.prototype.addEndedEventListener = function (endedListener) { this.endedListener = endedListener; }; YoutubePlayer.prototype.removeEndedEventListener = function (endedListener) { this.endedListener = undefined; }; YoutubePlayer.prototype.getVideoWidth = function () { }; YoutubePlayer.prototype.getVideoHeight = function () { }; YoutubePlayer.prototype.isReady = function () { return App.Util.mobileCheck() || this.videoIsReady; }; YoutubePlayer.prototype.isPlaying = function () { return this.videoIsReady ? this.ytPlayer.getPlayerState() === YT.PlayerState.PLAYING : this.videoIsPlaying; }; YoutubePlayer.prototype.getCurrentTime = function () { return this.videoIsReady ? this.ytPlayer.getCurrentTime() : (this.currentTime || 0); }; YoutubePlayer.prototype.setCurrentTime = function (currentTime) { if (this.videoIsReady) { this.ytPlayer.seekTo(currentTime, true); } else { this.currentTime = currentTime; } }; YoutubePlayer.prototype.getDuration = function () { return this.videoIsReady ? this.ytPlayer.getDuration() : 0; }; YoutubePlayer.prototype.getMuted = function () { return this.videoIsReady ? this.ytPlayer.isMuted() : this.muted; }; YoutubePlayer.prototype.setMuted = function (muted) { if (this.videoIsReady) { if (muted) { this.ytPlayer.mute(); } else { this.ytPlayer.unMute(); } } else { this.muted = muted; } }; YoutubePlayer.prototype.getVolume = function () { return this.videoIsReady ? this.ytPlayer.getVolume() : this.volume; }; YoutubePlayer.prototype.setVolume = function (volume) { if (this.videoIsReady) { return this.ytPlayer.setVolume(volume); } else { this.volume = volume; } }; YoutubePlayer.prototype.show = function (autoPlay) { if (App.Util.mobileCheck()) { this.createDiv($('body')); this.$videoElement = $('
'); this.$videoElement.attr({ src: "http://www.youtube.com/embed/" + this.videoId, frameborder: 0 }); this.$videoElement.css({ position: 'absolute', top: 0, left: 0 }); this.$div.append(this.$videoElement); this.createCloseButton(); } else { if (this.ytPlayer) { if (autoPlay) { this.setCurrentTime(0); this.play(); } } else { var initPlayer = function () { this.createDiv($('.kinaps-wall-zoom-layer')); var $videoDiv = $('
'); var videoElementId = App.Util.guid(); $videoDiv.attr('id', videoElementId); this.$div.append($videoDiv); var onPlayerReady = function (event) { this.videoIsReady = true; if (this.muted !== undefined) { if (this.muted) { this.ytPlayer.mute(); } else { this.ytPlayer.unMute(); } } if (this.volume !== undefined) { this.ytPlayer.setVolume(this.volume); } if (this.currentTime !== undefined) { this.ytPlayer.seekTo(this.currentTime, true); } if (this.videoIsPlaying !== undefined) { if (this.videoIsPlaying) { this.ytPlayer.playVideo(); } else { this.ytPlayer.pauseVideo(); } } }.bind(this); var onPlayerStateChange = function (event) { if (event.data === YT.PlayerState.ENDED) { if (this.endedListener) { this.endedListener(); } } }.bind(this); var playerVars = { 'autoplay': autoPlay ? 1 : 0, 'controls': 0, 'showinfo': 0, 'modestbranding': 1, 'rel': 0 }; if (window.location.origin !== 'file://') { playerVars['origin'] = window.location.origin; } this.ytPlayer = new YT.Player(videoElementId, { videoId: this.videoId, playerVars: playerVars, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); this.$videoElement = $('#' + videoElementId); this.$videoElement.css({ position: 'absolute', top: 0, left: 0 }); this.createVideoControlsCanvas(); }; if (isYouTubeIframeAPIReady) { initPlayer.call(this); } else { youTubeIframeApiReadyCallbacks.push(initPlayer.bind(this)); } } } }; YoutubePlayer.prototype.play = function () { if (this.videoIsReady) { this.ytPlayer.playVideo(); } else { this.videoIsPlaying = true; } }; YoutubePlayer.prototype.pause = function () { if (this.videoIsReady) { this.ytPlayer.pauseVideo(); } else { this.videoIsPlaying = false; } }; YoutubePlayer.prototype.update = function (zoomSlide, ctx, left, top, size, position, angle, scale, alpha) { this.zoomSlide = zoomSlide; var width = size.width * scale; var height = size.height * scale; if (width !== this.lastWidth || height !== this.lastHeight) { if (!App.Util.mobileCheck()) { this.ytPlayer.setSize(width, height); } } this.updateVideoElement(width, height); if (!App.Util.mobileCheck()) { this.updateVideoControls(zoomSlide, width, height, left, top, size, scale, alpha); } this.updateDiv(zoomSlide, ctx, left, top, size, position, angle, scale, width, height); this.lastWidth = width; this.lastHeight = height; }; //////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////// function VimeoPlayer(videoId) { this.videoId = videoId; this.volume = 1; this.muted = false; this.currentTime = 0; this.duration = 0; this.videoIsPlaying = false; } App.Util.Extends(VimeoPlayer, Player); VimeoPlayer.prototype.release = function (destroy) { if (!destroy && this.videoIsReady) { this.vimeoPlayer.api('pause'); } Player.prototype.release.call(this, destroy); }; VimeoPlayer.prototype.loadThumbnailImage = function (callback) { $.get('http://vimeo.com/api/v2/video/' + this.videoId + '.json', function (data) { App.images.load(data[0].thumbnail_large, function (image) { callback(image); }); }); }; VimeoPlayer.prototype.addEndedEventListener = function (endedListener) { this.endedListener = endedListener; }; VimeoPlayer.prototype.removeEndedEventListener = function (endedListener) { this.endedListener = undefined; }; VimeoPlayer.prototype.getVideoWidth = function () { }; VimeoPlayer.prototype.getVideoHeight = function () { }; VimeoPlayer.prototype.isReady = function () { return App.Util.mobileCheck() || this.videoIsReady; }; VimeoPlayer.prototype.isPlaying = function () { return this.videoIsPlaying; }; VimeoPlayer.prototype.getCurrentTime = function () { return this.currentTime; }; VimeoPlayer.prototype.setCurrentTime = function (currentTime) { if (this.videoIsReady) { this.vimeoPlayer.api('seekTo', currentTime); } else { this.currentTime = currentTime; } }; VimeoPlayer.prototype.getDuration = function () { return this.duration; }; VimeoPlayer.prototype.getMuted = function () { return this.muted; }; VimeoPlayer.prototype.setMuted = function (muted) { this.muted = muted; if (this.videoIsReady) { if (this.muted) { this.vimeoPlayer.api('setVolume', 0); } else { this.vimeoPlayer.api('setVolume', this.volume); } } }; VimeoPlayer.prototype.getVolume = function () { return 100 * this.volume; }; VimeoPlayer.prototype.setVolume = function (volume) { this.volume = volume / 100; if (this.videoIsReady) { return this.vimeoPlayer.api('setVolume', this.volume); } }; VimeoPlayer.prototype.show = function (autoPlay) { if (this.vimeoPlayer) { if (autoPlay) { this.setCurrentTime(0); this.play(); } } else { if (App.Util.mobileCheck()) { this.createDiv($('body')); } else { this.createDiv($('.kinaps-wall-zoom-layer')); } if (App.Util.isFirefox) { // http://www.justinball.com/2014/03/09/firefox-vimeo-and-froogaloop-have-a-little-problem/ this.$div.css('display', 'block'); } this.$videoElement = $('
'); this.$videoElement.css({ position: 'absolute', top: 0, left: 0 }); var videoElementId = App.Util.guid(); this.$videoElement.attr({ 'id': videoElementId, 'src': 'http://player.vimeo.com/video/' + this.videoId + (!App.Util.mobileCheck() ? '?api=1&player_id=' + videoElementId : ''), 'frameborder': 0 }); this.vimeoPlayer = true; this.$div.append(this.$videoElement); if (App.Util.mobileCheck()) { this.createCloseButton(); } else { this.videoIsPlaying |= autoPlay; this.$videoElement.on('load', function () { this.vimeoPlayer = $f(this.$videoElement[0]); this.vimeoPlayer.addEvent('ready', function(event) { this.videoIsReady = true; if (this.muted) { this.vimeoPlayer.api('setVolume', 0); } else { this.vimeoPlayer.api('setVolume', this.volume); } if (this.currentTime !== 0) { this.vimeoPlayer.api('seekTo', this.currentTime); } if (this.videoIsPlaying) { this.vimeoPlayer.api('play'); } else { this.vimeoPlayer.api('pause'); } this.vimeoPlayer.addEvent('loadProgress', function (event) { this.duration = event.duration; }.bind(this)); this.vimeoPlayer.addEvent('playProgress', function (event) { this.currentTime = event.seconds; this.duration = event.duration; }.bind(this)); this.vimeoPlayer.addEvent('finish', function () { if (this.endedListener) { this.endedListener(); } }.bind(this)); }.bind(this)); this.createVideoControlsCanvas(); }.bind(this)); } } }; VimeoPlayer.prototype.play = function () { this.videoIsPlaying = true; if (this.videoIsReady) { this.vimeoPlayer.api('play'); } }; VimeoPlayer.prototype.pause = function () { this.videoIsPlaying = false; if (this.videoIsReady) { this.vimeoPlayer.api('pause'); } }; VimeoPlayer.prototype.update = function (zoomSlide, ctx, left, top, size, position, angle, scale, alpha) { this.zoomSlide = zoomSlide; var width = size.width * scale; var height = size.height * scale; this.updateVideoElement(width, height); if (!App.Util.mobileCheck()) { this.updateVideoControls(zoomSlide, width, height, left, top, size, scale, alpha); } this.updateDiv(zoomSlide, ctx, left, top, size, position, angle, scale, width, height); this.lastWidth = width; this.lastHeight = height; }; //////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////// function BuiltinPLayer(sources) { this.sources = sources; this.createVideo(); } App.Util.Extends(BuiltinPLayer, Player); BuiltinPLayer.prototype.createVideo = function () { var $element = $('
'); var sources = this.sources; if (sources instanceof File) { $element[0].src = URL.createObjectURL(sources); } else { if (!_.isArray(sources)) { sources = [sources]; } _.each(sources, function (src) { $element.append($('
')); }); } $element.css({ 'position': 'absolute', 'display': 'none' }); this.createDiv($('.kinaps-wall-zoom-layer')); this.$videoElement = $element; if (App.Util.mobileCheck()) { this.$videoElement.attr({ controls: 1 }); } this.$videoElement.css({ display: 'block', top: 0, left: 0 }); this.$div.append(this.$videoElement); this.video = { sources: sources, element: $element[0] }; }; BuiltinPLayer.prototype.release = function (destroy) { if (this.video) { if (destroy) { $(this.video.element).remove(); } else { this.video.element.pause(); } } Player.prototype.release.call(this, destroy); }; BuiltinPLayer.prototype.loadThumbnailImage = function (callback) { if (this.video) { this.video.element.muted = true; this.video.element.play(); var startTime = new Date().getTime(0); var checkVideoLoadState = function () { var duration = new Date().getTime(0) - startTime; var error = this.video.element.error || (this.video.element.networkState === 3 || this.video.element.networkState === 2 && duration > 5000); if (this.video.element.readyState === 4 || error) { this.video.element.pause(); // create frozen image of video var image = null; if (!error && this.video.element.videoWidth > 0) { image = this.video.element; image.width = image.videoWidth; image.height = image.videoHeight; } callback(image); } else { setTimeout(checkVideoLoadState, 100); } }.bind(this); setTimeout(checkVideoLoadState, 100); } else { callback(); } }; BuiltinPLayer.prototype.addEndedEventListener = function (endedListener) { if (this.video) { this.video.element.addEventListener('ended', endedListener, false); } }; BuiltinPLayer.prototype.removeEndedEventListener = function (endedListener) { if (this.video) { this.video.element.removeEventListener('ended', endedListener, false); } }; BuiltinPLayer.prototype.getVideoWidth = function () { return this.video && this.video.element.videoWidth; }; BuiltinPLayer.prototype.getVideoHeight = function () { return this.video && this.video.element.videoHeight; }; BuiltinPLayer.prototype.isReady = function () { return this.video && this.video.element.networkState !== 3 && this.video.element.videoWidth !== 0 && this.video.element.videoHeight !== 0; }; BuiltinPLayer.prototype.isPlaying = function () { var video = this.video && this.video.element; return video && !(video.paused || video.ended || video.seeking || video.readyState < video.HAVE_FUTURE_DATA); }; BuiltinPLayer.prototype.getCurrentTime = function () { return this.video && this.video.element.currentTime; }; BuiltinPLayer.prototype.setCurrentTime = function (currentTime) { try { if (this.video && this.video.element && this.video.element.readyState !== 0 /*HAVE_NOTHING*/) { this.video.element.currentTime = currentTime; } } catch (e) { console.log(e); } }; BuiltinPLayer.prototype.getDuration = function () { return this.video && this.video.element.duration; }; BuiltinPLayer.prototype.getMuted = function () { return this.video && this.video.element.muted; }; BuiltinPLayer.prototype.setMuted = function (muted) { try { if (this.video && this.video.element) { this.video.element.muted = muted; } } catch (e) { console.log(e); } }; BuiltinPLayer.prototype.getVolume = function () { return this.video && this.video.element.volume * 100; }; BuiltinPLayer.prototype.setVolume = function (videoVolume) { try { if (this.video && this.video.element) { this.video.element.volume = videoVolume / 100; } } catch (e) { console.log(e); } }; BuiltinPLayer.prototype.show = function (autoPlay) { if (autoPlay) { this.setCurrentTime(0); this.play(); } }; BuiltinPLayer.prototype.play = function () { try { if (this.video && this.video.element) { this.video.element.play(); } } catch (e) { console.log(e); } }; BuiltinPLayer.prototype.pause = function () { try { if (this.video && this.video.element) { this.video.element.pause(); } } catch (e) { console.log(e); } }; BuiltinPLayer.prototype.update = function (zoomSlide, ctx, left, top, size, position, angle, scale, alpha) { this.zoomSlide = zoomSlide; var width = size.width * scale; var height = size.height * scale; this.updateVideoElement(width, height); this.updateDiv(zoomSlide, ctx, left, top, size, position, angle, scale, width, height); this.lastWidth = width; this.lastHeight = height; zoomSlide._drawVideoControls(ctx, left, top, size.width, size.height); }; //////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////// var YOUTUBE_URL_SCHEMES = [ ["youtube\\.com/watch.+v=([\\w-]+)&?", 1], ["https?:\\/\\/youtu.be\\/(.*)", 1] ]; var VIMEO_URL_SCHEMES = [ ["https?:\\/\\/(www\\.)?vimeo\\.com(.*)?\\/(.*)", 3] ]; var findVideoId = function (urlSchemes, url) { for (var i = 0; i < urlSchemes.length; ++i) { var regExp = new RegExp(urlSchemes[i][0], "i"); var match = url.match(regExp); if (match) { return match[urlSchemes[i][1]]; } } return null; }; App.Video = {}; var videoCache = []; App.Video.cache = videoCache; function getFromCache(sources, removeFromCache) { var i, j; for (i = 0; i < videoCache.length; ++i) { var cacheSources = videoCache[i].sources; if (cacheSources.length === sources.length) { for (j = 0; j < cacheSources.length; ++j) { if (cacheSources[j] !== sources[j]) { break; } } if (j === cacheSources.length) { var videoPlayer = videoCache[i]; if (removeFromCache) { videoCache.splice(i, 1); } return videoPlayer; } } } } function newVideoPlayer(sources) { var url; if (sources instanceof File) { return new BuiltinPLayer(sources); } if (_.isArray(sources)) { if (sources.length === 1) { url = sources[0]; } } else { url = sources; } if (url) { var videoId; videoId = findVideoId(YOUTUBE_URL_SCHEMES, url); if (videoId) { return new YoutubePlayer(videoId); } videoId = findVideoId(VIMEO_URL_SCHEMES, url); if (videoId) { return new VimeoPlayer(videoId); } } return new BuiltinPLayer(sources); } App.Video.isBuiltinVideoPlayer = function (sources) { var url; if (_.isArray(sources)) { if (sources.length === 1) { url = sources[0]; } } else { url = sources; } if (url) { var videoId; videoId = findVideoId(YOUTUBE_URL_SCHEMES, url); if (videoId) { return false; } videoId = findVideoId(VIMEO_URL_SCHEMES, url); if (videoId) { return false; } } return true; }; // just add to cache App.Video.reserveVideoPlayer = function (sources) { var videoPlayer = newVideoPlayer(sources); videoPlayer.sources = sources; videoPlayer.show(false); videoCache.push(videoPlayer); }; // get and don't remove from cache App.Video.getVideoPlayer = function (sources) { var videoPlayer = getFromCache(sources, false); if (!videoPlayer) { videoPlayer = newVideoPlayer(sources); videoPlayer.sources = sources; } return videoPlayer; }; // get and remove from cache App.Video.acquireVideoPlayer = function (sources) { var videoPlayer = getFromCache(sources, true); if (!videoPlayer) { videoPlayer = newVideoPlayer(sources); videoPlayer.sources = sources; } return videoPlayer; }; App.Video.emptyCache = function () { _.each(videoCache, function (player) { player.release(true); }); videoCache = []; }; }());
Thumb to satellite animation duration
Zoom animation duration