live-photo.js

  1. var enableInlineVideo = require('iphone-inline-video');
  2. var touchEnabled = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints);
  4. /**
  5.  * Create a video element that that can be played inline
  6.  *
  7.  * @param  {string} src - video URL
  8.  * @param  {string} [className] - CSS classname for the video element
  9.  * @param  {number} [time] - start time for the video
  10.  * @param  {boolean} [muted] - whether the video should start muted
  11.  *
  12.  * @return {DOMElement} the video element
  13.  *
  14.  * @private
  15.  */
  16. function createVideoElement(src, className, time, muted) {
  17.     var video = document.createElement('video');
  18.     video.src = src + (time ? '#' + time : '');
  19.     video.controls = false;
  20.     video.muted = muted || false;
  21.     video.preload = 'auto';
  22.     if (className) {
  23.         video.className = className;
  24.     }
  25.     enableInlineVideo(video, !muted);
  26.     return video;
  27. }
  29. /**
  30.  * Some mobile browsers restrictions prevent programmatic playback of HTML5 video that hasn't been
  31.  * given permission via user interaction. This function is invoked on a user event to allow
  32.  * programmatic playback later.
  33.  *
  34.  * @param  {DOMElement} video - the video element
  35.  * @param  {Function} [cb] - invoked with the video
  36.  *
  37.  * @private
  38.  */
  39. function warmVideoTubes(video, cb) {
  40.     if (video.paused) {
  41.         var videoMuted = video.muted;
  42.         var videoTime = video.currentTime;
  44.         // Because we can't set currentTime until the video metadata is loaded
  45.         var onLoadededMetadata = function() {
  46.             video.removeEventListener('loadedmetadata', onLoadededMetadata);
  47.             video.currentTime = videoTime;
  48.             if (cb) {
  49.                 cb(video);
  50.             }
  51.         };
  53.         // Play then immediately pause
  54.         video.muted = true;
  55.         video.play();
  56.         video.pause();
  57.         video.muted = videoMuted;
  58.         if (video.duration >= 0) {
  59.             onLoadededMetadata();
  60.         } else {
  61.             video.addEventListener('loadedmetadata', onLoadededMetadata);
  62.         }
  63.     }
  64. }
  66. /**
  67.  * Generate the markup for a Live Photo
  68.  *
  69.  * @param  {string} keyframeUrl - URL of the keyframe image asset
  70.  * @param  {string} videoUrl - URL of the Live Photo video asset
  71.  * @param  {number} stillImageTime - time (in seconds) that corresponds to the position of the
  72.  *         keyframe in the video
  73.  *
  74.  * @return {Object} object containing all of DOM elements used for the Live Photo
  75.  *
  76.  * @private
  77.  */
  78. function createLivePhotoElements(keyframeUrl, videoUrl, stillImageTime) {
  79.     var container = document.createElement('div');
  80.     container.className = 'live-photo';
  81.     container.setAttribute('data-live-photo', '');
  83.     var img = document.createElement('img');
  84.     img.className = 'live-photo-keyframe';
  85.     img.src = keyframeUrl;
  87.     var postroll = createVideoElement(videoUrl, 'live-photo-postroll', stillImageTime, true);
  88.     var video = createVideoElement(videoUrl, 'live-photo-video');
  90.     var icon = document.createElement('i');
  91.     icon.className = 'live-photo-icon';
  93.     container.appendChild(img);
  94.     container.appendChild(postroll);
  95.     container.appendChild(video);
  96.     container.appendChild(icon);
  98.     return {
  99.         container: container,
  100.         img: img,
  101.         postroll: postroll,
  102.         video: video,
  103.         icon: icon,
  104.     };
  105. }
  107. /**
  108.  * Determine which events should activate the Live Photo by default
  109.  *
  110.  * @return {Array} event names
  111.  *
  112.  * @private
  113.  */
  114. function defaultPlayEvents() {
  115.     var events = ['mousedown'];
  116.     if (touchEnabled) {
  117.         events.push('touchstart');
  118.     }
  119.     return events;
  120. }
  122. /**
  123.  * Determine which events should deactivate the Live Photo by default
  124.  *
  125.  * @return {Array} event names
  126.  *
  127.  * @private
  128.  */
  129. function defaultStopEvents() {
  130.     var events = ['mouseup', 'mouseout'];
  131.     if (touchEnabled) {
  132.         events.push('touchend');
  133.     }
  134.     return events;
  135. }
  137. /**
  138.  * @classdesc Creates the necessary markup and provides the interface to interact with a Live Photo
  139.  *
  140.  * @param  {string} keyframeUrl - URL of the keyframe image asset
  141.  * @param  {string} videoUrl - URL of the Live Photo video asset
  142.  * @param  {number} stillImageTime - time (in seconds) that corresponds to the position of the
  143.  *         keyframe in the video
  144.  * @param  {Object} [options] - additional Live Photo options
  145.  *
  146.  * @constructor
  147.  */
  148. function LivePhoto(keyframeUrl, videoUrl, stillImageTime, options) {
  149.     // Silently correct when user forgets the `new` keyword
  150.     if (!(this instanceof LivePhoto)) {
  151.         return new LivePhoto(keyframeUrl, videoUrl, stillImageTime, options);
  152.     }
  154.     // Generate the elements from the options
  155.     var elements, replaceEl;
  156.     if (keyframeUrl instanceof HTMLElement) {
  157.         options = videoUrl;
  158.         replaceEl = keyframeUrl;
  159.         videoUrl = replaceEl.getAttribute('data-live-photo');
  160.         stillImageTime = parseFloat(replaceEl.getAttribute('data-live-photo-still-image-time'));
  161.         keyframeUrl = replaceEl.src;
  162.     }
  164.     // Handle options
  165.     options || (options = {});
  166.     this.postrollMs = options.postrollMs || 375;
  167.     this.deactivateMs = options.deactivateMs || 500;
  168.     this.previewMs = options.previewMs || 500;
  170.     // Video time that corresponds with the keyframe
  171.     this.stillImageTime = stillImageTime || NaN;
  173.     // Create necessary DOM
  174.     if (!keyframeUrl && !options.noErrors) {
  175.         throw new Error('LivePhoto Error: Missing keyframeUrl');
  176.     }
  177.     if (!videoUrl && !options.noErrors) {
  178.         throw new Error('LivePhoto Error: Missing videoUrl');
  179.     }
  180.     elements = createLivePhotoElements(keyframeUrl, videoUrl, stillImageTime);
  182.     // Replace any existing element
  183.     if (replaceEl) {
  184.         replaceEl.parentNode.insertBefore(elements.container, replaceEl);
  185.         replaceEl.parentNode.removeChild(replaceEl);
  186.     }
  188.     // Save the elements
  189.     this.container = elements.container;
  190.     this.img = elements.img;
  191.     this.video = elements.video;
  192.     this.postroll = elements.postroll;
  193.     this.icon = elements.icon;
  195.     // Bind video event handlers
  196.     this.__onVideoCanPlayThrough = this._onVideoCanPlayThrough.bind(this);
  197.     this.__onVideoLoadededMetadata = this._onVideoLoadededMetadata.bind(this);
  198.     this.__onPostrollTimeUpdate = this._onPostrollTimeUpdate.bind(this);
  199.     this.__startVideoPlayback = this._startVideoPlayback.bind(this);
  200.     this.__startPostrollPlayback = this._startPostrollPlayback.bind(this);
  201.     this.__resetPlayback = this._resetPlayback.bind(this);
  202.     this.__resetPreview = this._resetPreview.bind(this);
  204.     // Get the duration from the video
  205.     this.video.addEventListener('canplaythrough', this.__onVideoCanPlayThrough);
  206.     if (this.video.duration) {
  207.         this._setDuration(this.video.duration);
  208.         this._resetPostroll();
  209.     } else {
  210.         this._setDuration(0);
  211.         this.video.addEventListener('loadedmetadata', this.__onVideoLoadededMetadata);
  212.     }
  214.     // Set initial flags
  215.     this._playing = false;
  216.     this._canPlayThrough = false;
  217.     this._playWhenReady = false;
  219.     // Add event listeners
  220.     if (options.useEventHandlers !== false) {
  221.         this._addEventHandlers(options.playEvents, options.stopEvents);
  222.     }
  223. }
  225. LivePhoto.prototype = {
  226.     /**
  227.      * Adds UI event listeners for Live Photo
  228.      *
  229.      * @param  {Array|function|string} playEvents - events that should initialize Live Photo playback
  230.      * @param  {Array|function|string} stopEvents - events that should interrupt Live Photo playback
  231.      *
  232.      * @private
  233.      */
  234.     _addEventHandlers: function(playEvents, stopEvents) {
  235.         var container = this.container;
  237.         var bootstrapped = false;
  238.         var playVideo = this.play.bind(this);
  239.         var video = this.video;
  240.         var postroll = this.postroll;
  241.         var play = function(e) {
  242.             e.preventDefault();
  243.             if (bootstrapped) {
  244.                 playVideo();
  245.             } else {
  246.                 var videoReady = false;
  247.                 var postrollReady = false;
  248.                 warmVideoTubes(video, function() {
  249.                     videoReady = true;
  250.                     if (postrollReady) {
  251.                         playVideo();
  252.                     }
  253.                 });
  254.                 warmVideoTubes(postroll, function() {
  255.                     postrollReady = true;
  256.                     if (videoReady) {
  257.                         playVideo();
  258.                     }
  259.                 });
  260.                 bootstrapped = true;
  261.             }
  262.         };
  263.         (playEvents && playEvents !== false) || (playEvents = defaultPlayEvents);
  264.         if (typeof playEvents === 'function') {
  265.             playEvents = playEvents(this);
  266.         }
  267.         if (typeof playEvents === 'string') {
  268.             playEvents = playEvents.split(/[,\s]+/);
  269.         }
  270.         playEvents.forEach(function(playEvent) {
  271.             if (playEvent) {
  272.                 container.addEventListener(playEvent, play);
  273.             }
  274.         });
  276.         var stopVideo = this.stop.bind(this);
  277.         var stop = function(e) {
  278.             e.preventDefault();
  279.             stopVideo();
  280.         };
  281.         (stopEvents && stopEvents !== false) || (stopEvents = defaultStopEvents);
  282.         if (typeof stopEvents === 'function') {
  283.             stopEvents = stopEvents(this);
  284.         }
  285.         if (typeof stopEvents === 'string') {
  286.             stopEvents = stopEvents.split(/[,\s]+/);
  287.         }
  288.         stopEvents.forEach(function(stopEvent) {
  289.             if (stopEvent) {
  290.                 container.addEventListener(stopEvent, stop);
  291.             }
  292.         });
  293.     },
  295.     /**
  296.      * Handles first `canplaythrough` event, indicating that the Live Photo is ready for interactive playback
  297.      *
  298.      * @private
  299.      */
  300.     _onVideoCanPlayThrough: function() {
  301.         this._canPlayThrough = true;
  302.         if (this._playWhenReady) {
  303.             this._playWhenReady = false;
  304.             this.play();
  305.         }
  306.         this.container.classList.remove('loading');
  307.         this.video.removeEventListener('canplaythrough', this.__onVideoCanPlayThrough);
  308.     },
  310.     /**
  311.      * Handles the first `loadedmetadata` event, indicating that the video duration is available
  312.      * and that seeking is available
  313.      *
  314.      * @private
  315.      */
  316.     _onVideoLoadededMetadata: function() {
  317.         this._setDuration(this.video.duration || 0);
  318.         this._resetPostroll();
  319.         this.video.removeEventListener('loadedmetadata', this.__onVideoLoadededMetadata);
  320.     },
  322.     /**
  323.      * Used to determine when the Live Photo "preview" should stop
  324.      *
  325.      * @private
  326.      */
  327.     _onPostrollTimeUpdate: function(e) {
  328.         if (this.postroll.currentTime >= this.stillImageTime - 0.1) {
  329.             this._resetPreview();
  330.         }
  331.     },
  333.     /**
  334.      * Cleans up any timeouts and event listeners used during Live Photo playback
  335.      *
  336.      * @private
  337.      */
  338.     _clearTimeouts: function() {
  339.         clearTimeout(this._resetVideoTimeout);
  340.         clearTimeout(this._resetPostrollTimeout);
  341.         clearTimeout(this._resetPreviewTimeout);
  342.         this.postroll.removeEventListener('timeupdate', this.__onPostrollTimeUpdate);
  343.     },
  345.     /**
  346.      * Sets the duration of the video, which may be used to estimate the still image and preview
  347.      * playback start times
  348.      *
  349.      * @param  {number} duration - video duration in seconds
  350.      *
  351.      * @private
  352.      */
  353.     _setDuration: function(duration) {
  354.         this.duration = duration;
  355.         if (typeof this.stillImageTime !== 'number' || isNaN(this.stillImageTime)) {
  356.             // com.apple.quicktime.still-image-time
  357.             // The real keyframe time is stored in the metadata, but if we don't have it, assume
  358.             // that we should start in the middle instead
  359.             this.stillImageTime = duration * 0.5;
  360.         }
  361.         this.previewStart = Math.max(0, this.stillImageTime - this.previewMs / 1000);
  362.     },
  364.     /**
  365.      * Pauses the postroll and reset to the still image time
  366.      *
  367.      * @private
  368.      */
  369.     _resetPostroll: function() {
  370.         this.postroll.pause();
  371.         this.postroll.currentTime = this.stillImageTime;
  372.     },
  374.     /**
  375.      * Pauses the video and reset to the beginning
  376.      *
  377.      * @private
  378.      */
  379.     _resetVideo: function() {
  380.         this.video.pause();
  381.         this.video.currentTime = 0;
  382.         this.video.muted = false;
  383.     },
  385.     /**
  386.      * Starts video playback, interrupting any postroll playback
  387.      *
  388.      * @private
  389.      */
  390.     _startVideoPlayback: function() {
  391.         this.video.play();
  392.         this._resetPostroll();
  393.     },
  395.     /**
  396.      * Restarts postroll playback
  397.      *
  398.      * @private
  399.      */
  400.     _startPostrollPlayback: function() {
  401.         this._resetPostroll();
  402.         this.postroll.play();
  403.     },
  405.     /**
  406.      * Resets Live Photo playback, including both the video and the postroll
  407.      *
  408.      * @private
  409.      */
  410.     _resetPlayback: function() {
  411.         this._playing = false;
  412.         this._resetVideo();
  413.         this._resetPostroll();
  414.     },
  416.     /**
  417.      * Stops Live Photo preview playback, resetting the postroll
  418.      *
  419.      * @private
  420.      */
  421.     _resetPreview: function() {
  422.         this.postroll.removeEventListener('timeupdate', this.__onPostrollTimeUpdate);
  423.         this._resetPostroll();
  424.         this.container.classList.remove('preview');
  425.     },
  427.     /**
  428.      * Loads the media for the video and preroll
  429.      *
  430.      * @method
  431.      */
  432.     load: function() {
  433.         this.video.load();
  434.         this.postroll.load();
  435.     },
  437.     /**
  438.      * Starts Live Photo playback from the beginning, if it is not already playing
  439.      *
  440.      * @method
  441.      */
  442.     play: function() {
  443.         if (this._playing) {
  444.             return;
  445.         }
  447.         if (!this._canPlayThrough) {
  448.             this._playWhenReady = true;
  449.             this._clearTimeouts();
  450.             this.load();
  451.             this.container.classList.add('loading');
  452.             return;
  453.         }
  455.         this._playing = true;
  456.         this._clearTimeouts();
  458.         this._startPostrollPlayback();
  459.         this.video.currentTime = 0;
  460.         this._resetPostrollTimeout = setTimeout(this.__startVideoPlayback, this.postrollMs);
  461.         this.container.classList.add('active');
  462.     },
  464.     /**
  465.      * Stops Live Photo playback and returns to the inactive state
  466.      *
  467.      * @method
  468.      */
  469.     stop: function() {
  470.         if (!this._playing) {
  471.             return;
  472.         }
  474.         this.video.muted = true;
  475.         this._clearTimeouts();
  476.         this.container.classList.remove('active');
  478.         this._resetVideoTimeout = setTimeout(this.__resetPlayback, this.deactivateMs);
  479.     },
  481.     /**
  482.      * Plays the Live Photo preview, which is about one second starting from the still image time
  483.      *
  484.      * @method
  485.      */
  486.     preview: function() {
  487.         if (this._playing) {
  488.             return;
  489.         }
  491.         this._clearTimeouts();
  493.         this.postroll.currentTime = this.previewStart;
  494.         this.postroll.play();
  495.         this.container.classList.add('preview');
  497.         this._previewCompleteTimeout = setTimeout(this.__resetPreview, 1000 * (this.stillImageTime - this.previewStart));
  499.         // The preview is over once we hit the correct time
  500.         this.postroll.addEventListener('timeupdate', this.__onPostrollTimeUpdate);
  501.     },
  502. };
  504. module.exports = LivePhoto;