const videoUtils = { _handleVideoClick: function _handleVideoClick(evt) { log('_handleVideoClick: enter'); const videoElem = evt.target; // get the video element const paused = videoElem.paused; // is the video paused? log('_handleVideoClick: paused=' + paused); if (paused) { log('_handleVideoClick: playing the video'); videoElem.play(); // if the video is paused, play it } else { log('_handleVideoClick: pausing the video'); videoElem.pause(); // if the video is playing, pause it } log('_handleVideoClick: leave'); }, _getVideoElemSize: function _getVideoElemSize(viewWidth, viewHeight) { log('_getVideoElemSize: enter'); log('_getVideoElemSize: viewWidth=' + viewWidth); log('_getVideoElemSize: viewHeight=' + viewHeight); var sizeObj = {}; var elemWidth = 260; var elemHeight = 146; // default to smallest size if (viewWidth > 320) { elemWidth = 300; elemHeight = 168; } if (viewWidth > 425) { if (viewHeight > 414) { // if the view is taller than iPhone 6 in landscape mode elemWidth = 565; elemHeight = 317; } } sizeObj.width = elemWidth; sizeObj.height = elemHeight; log('_getVideoElemSize: elemWidth=' + elemWidth); log('_getVideoElemSize: elemHeight=' + elemHeight); log('_getVideoElemSize: leave'); return sizeObj; }, _handleFullscreenChange: function _handleFullscreenChange(e) { log('_handleFullscreenChange: enter'); const now = new Date(); userStateUtils.setFullscreenDate(now); // store the date and time when a video was set to fullscreen log('_handleFullscreenChange: leave'); }, _handleVideoPlay: function _handleVideoPlay(e) { // called when the video plays const logHdr = '_handleVideoPlay: '; log(logHdr + 'enter'); log(logHdr + 'setting the video playing flag to true'); userStateUtils.setVideoPlayingFlag(); // store a flag indicating that a video is playing log(logHdr + 'leave'); }, _handleVideoStopped: function _handleVideoStopped(e) { // called when the video is stopped for any reason // NOTE: not sure whether the cause is different HTML/JS or the phone (iOS) itself, // but on the iPhone 7+, if the user rotates the phone, with rotation unlocked, // while playing a lens video, this _handleVideoStopped method is called log('_handleVideoStopped: enter'); const type = e.type; // get the type of event that caused the video to stop log('_handleVideoStopped: type=' + type); const now = new Date(); userStateUtils.setVideoStoppedDate(now); // store the date and time the video was stopped // we use this value as explained in the header comment for this function userStateUtils.clearVideoPlayingFlag(); // clear the flag that indicates that a video is playing // yes, this could cause incorrect results if more than one video is played at once // not worth covering this case right now log('_handleVideoStopped: leave'); }, subscribeToEventsForVideo: function subscribeToEventsForVideo(videoElemId) { // subscribe to events for a single video element log('subscribeToEventsForVideo: enter'); log('subscribeToEventsForVideo: videoElemId=' + videoElemId); const videoJQ = $('#' + videoElemId); // get a jQuery object for the video element videoJQ.on("fullscreenchange", this._handleFullscreenChange); videoJQ.on("webkitfullscreenchange", this._handleFullscreenChange); videoJQ.on("mozfullscreenchange", this._handleFullscreenChange); videoJQ.on("msfullscreenchange", this._handleFullscreenChange); // depending on platform, any of these 4 events might occur when the user enters or exits fullscreen on a video videoJQ.on("play", this._handleVideoPlay); // call this method when the video plays // NOTE: at least on iOS, the "stalled" event gets sent fairly often while the video plays. // more important, no event is sent when the video continues to play, // so if we take the stalled event to mean that the video has stopped we will be incorrect. // so for now we don't subscribe to the stalled event. videoJQ.on("abort", this._handleVideoStopped); videoJQ.on("ended", this._handleVideoStopped); videoJQ.on("error", this._handleVideoStopped); videoJQ.on("pause", this._handleVideoStopped); // subscribe to events where we consider the video not playing log('subscribeToEventsForVideo: leave'); } };