From 9ed9a9287a68b46763aeba267dbd1f793a092987 Mon Sep 17 00:00:00 2001 From: James Date: Mon, 8 Apr 2019 16:06:40 +0100 Subject: [PATCH 1/5] #2128 trigger pause when media component leaves view --- js/adapt-contrib-media.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/js/adapt-contrib-media.js b/js/adapt-contrib-media.js index 12cfc71f..d807e953 100755 --- a/js/adapt-contrib-media.js +++ b/js/adapt-contrib-media.js @@ -219,7 +219,8 @@ define([ $(this.mediaElement).on({ 'play': this.onMediaElementPlay, 'pause': this.onMediaElementPause, - 'ended': this.onMediaElementEnded + 'ended': this.onMediaElementEnded, + 'inview': this.onMediaElementInview }); // occasionally the mejs code triggers a click of the captions language @@ -312,6 +313,11 @@ define([ } }, + onMediaElementInview: function(event, isInView) { + if (isInView || event.currentTarget.paused) return; + event.currentTarget.pause(); + }, + onMediaElementSeeking: function(event) { var maxViewed = this.model.get("_maxViewed"); if(!maxViewed) { @@ -428,7 +434,8 @@ define([ 'pause': this.onMediaElementPause, 'ended': this.onMediaElementEnded, 'seeking': this.onMediaElementSeeking, - 'timeupdate': this.onMediaElementTimeUpdate + 'timeupdate': this.onMediaElementTimeUpdate, + 'inview': this.onMediaElementInview }); this.mediaElement.src = ""; From 936d46b9f8ea2e12ec794b24eac87348b59a4d6d Mon Sep 17 00:00:00 2001 From: jamesrea83 Date: Tue, 9 Apr 2019 10:34:59 +0100 Subject: [PATCH 2/5] added _pauseWhenNotInview property to toggle new functionaility. Updated bower & schema for AT. --- README.md | 2 ++ bower.json | 2 +- example.json | 1 + js/adapt-contrib-media.js | 6 ++++-- properties.schema | 8 ++++++++ 5 files changed, 16 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 4c31199c..f4552d4b 100755 --- a/README.md +++ b/README.md @@ -50,6 +50,8 @@ guide the learner’s interaction with the component. **_allowFullScreen** (boolean): Determines whether fullscreen mode is available or not. Note that changing this setting has no effect in Internet Explorer 9 as this browser does not support fullscreen mode for HTML video. +**_pauseWhenNotInview** (boolean): If set to true, pause playback when video is no longer in view. The default is `false`. + **_playsinline** (boolean): If set to `true`, videos will play 'inline' on iPhones (the same way they do on iPads). Note that this feature is only available in iOS10 and above. The default is `false`. **_preventForwardScrubbing** (boolean): If enabled, will attempt to prevent users from skipping ahead in media (audio/video) unless '_isComplete' is marked as 'true'. Users can skip backwards, and back up to the maxViewed time tracked by updateTime. Note: This does not apply to full screen iOS users and IE users may be able to circumvent this rule by using video play speed options in browser. diff --git a/bower.json b/bower.json index 66d0bc47..23b63aa3 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "adapt-contrib-media", - "version": "4.0.1", + "version": "4.0.2", "framework": ">=3.3", "homepage": "https://github.com/adaptlearning/adapt-contrib-media", "issues": "https://github.com/adaptlearning/adapt_framework/issues/new", diff --git a/example.json b/example.json index e9f6e6e5..8091d57a 100644 --- a/example.json +++ b/example.json @@ -13,6 +13,7 @@ "_useClosedCaptions": true, "_startLanguage": "en", "_allowFullScreen": true, + "_pauseWhenNotInview": false, "_showVolumeControl": true, "_startVolume": "80%", "_playsinline": false, diff --git a/js/adapt-contrib-media.js b/js/adapt-contrib-media.js index d807e953..868d96e3 100755 --- a/js/adapt-contrib-media.js +++ b/js/adapt-contrib-media.js @@ -219,10 +219,12 @@ define([ $(this.mediaElement).on({ 'play': this.onMediaElementPlay, 'pause': this.onMediaElementPause, - 'ended': this.onMediaElementEnded, - 'inview': this.onMediaElementInview + 'ended': this.onMediaElementEnded }); + var pauseWhenNotInview = this.model.get('_pauseWhenNotInview'); + if (pauseWhenNotInview) $(this.mediaElement).on('inview', this.onMediaElementInview); + // occasionally the mejs code triggers a click of the captions language // selector during setup, this slight delay ensures we skip that _.delay(this.listenForCaptionsChange.bind(this), 250); diff --git a/properties.schema b/properties.schema index fb92ad88..174ba8c4 100644 --- a/properties.schema +++ b/properties.schema @@ -190,6 +190,14 @@ "inputType": "Checkbox", "validators": [] }, + "_pauseWhenNotInview": { + "type": "boolean", + "required": false, + "default": false, + "title": "Pause playback when video is no longer in view.", + "inputType": "Checkbox", + "validators": [] + }, "_playsinline": { "type": "boolean", "required": false, From c7bee3626be44e83a69d9514fc25049d8f306b4d Mon Sep 17 00:00:00 2001 From: jamesrea83 Date: Tue, 9 Apr 2019 14:15:36 +0100 Subject: [PATCH 3/5] changed property name. Listener now only attaches once playback has begun. --- README.md | 2 +- bower.json | 2 +- example.json | 2 +- js/adapt-contrib-media.js | 8 +++++--- properties.schema | 2 +- 5 files changed, 9 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index f4552d4b..224db4d3 100755 --- a/README.md +++ b/README.md @@ -50,7 +50,7 @@ guide the learner’s interaction with the component. **_allowFullScreen** (boolean): Determines whether fullscreen mode is available or not. Note that changing this setting has no effect in Internet Explorer 9 as this browser does not support fullscreen mode for HTML video. -**_pauseWhenNotInview** (boolean): If set to true, pause playback when video is no longer in view. The default is `false`. +**_pauseWhenOffScreen** (boolean): If set to true, pause playback when video is no longer in view. The default is `false`. **_playsinline** (boolean): If set to `true`, videos will play 'inline' on iPhones (the same way they do on iPads). Note that this feature is only available in iOS10 and above. The default is `false`. diff --git a/bower.json b/bower.json index 23b63aa3..47bd818f 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "adapt-contrib-media", - "version": "4.0.2", + "version": "4.1.0", "framework": ">=3.3", "homepage": "https://github.com/adaptlearning/adapt-contrib-media", "issues": "https://github.com/adaptlearning/adapt_framework/issues/new", diff --git a/example.json b/example.json index 8091d57a..aac293e5 100644 --- a/example.json +++ b/example.json @@ -13,7 +13,7 @@ "_useClosedCaptions": true, "_startLanguage": "en", "_allowFullScreen": true, - "_pauseWhenNotInview": false, + "_pauseWhenOffScreen": false, "_showVolumeControl": true, "_startVolume": "80%", "_playsinline": false, diff --git a/js/adapt-contrib-media.js b/js/adapt-contrib-media.js index 868d96e3..5dcbdbb3 100755 --- a/js/adapt-contrib-media.js +++ b/js/adapt-contrib-media.js @@ -222,9 +222,6 @@ define([ 'ended': this.onMediaElementEnded }); - var pauseWhenNotInview = this.model.get('_pauseWhenNotInview'); - if (pauseWhenNotInview) $(this.mediaElement).on('inview', this.onMediaElementInview); - // occasionally the mejs code triggers a click of the captions language // selector during setup, this slight delay ensures we skip that _.delay(this.listenForCaptionsChange.bind(this), 250); @@ -289,6 +286,9 @@ define([ Adapt.trigger("media:stop", this); + var pauseWhenOffScreen = this.model.get('_pauseWhenOffScreen'); + if (pauseWhenOffScreen) $(this.mediaElement).on('inview', this.onMediaElementInview); + this.model.set({ '_isMediaPlaying': true, '_isMediaEnded': false @@ -302,6 +302,8 @@ define([ onMediaElementPause: function(event) { this.queueGlobalEvent('pause'); + $(this.mediaElement).off('inview', this.onMediaElementInview); + this.model.set('_isMediaPlaying', false); }, diff --git a/properties.schema b/properties.schema index 174ba8c4..9bff23c1 100644 --- a/properties.schema +++ b/properties.schema @@ -190,7 +190,7 @@ "inputType": "Checkbox", "validators": [] }, - "_pauseWhenNotInview": { + "_pauseWhenOffScreen": { "type": "boolean", "required": false, "default": false, From f254b1e24b5995d348c66fcba8c30a961e6f94d6 Mon Sep 17 00:00:00 2001 From: jamesrea83 Date: Tue, 9 Apr 2019 14:45:55 +0100 Subject: [PATCH 4/5] refactored onMediaElementInview function. Cleaned up indentation. --- js/adapt-contrib-media.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/js/adapt-contrib-media.js b/js/adapt-contrib-media.js index 5dcbdbb3..32a51b6c 100755 --- a/js/adapt-contrib-media.js +++ b/js/adapt-contrib-media.js @@ -217,8 +217,8 @@ define([ // handle other completion events in the event Listeners $(this.mediaElement).on({ - 'play': this.onMediaElementPlay, - 'pause': this.onMediaElementPause, + 'play': this.onMediaElementPlay, + 'pause': this.onMediaElementPause, 'ended': this.onMediaElementEnded }); @@ -318,8 +318,7 @@ define([ }, onMediaElementInview: function(event, isInView) { - if (isInView || event.currentTarget.paused) return; - event.currentTarget.pause(); + if (!isInView && !event.currentTarget.paused) event.currentTarget.pause(); }, onMediaElementSeeking: function(event) { From 5ca0dde488853ebecbe05e546ab7ee04b199fbe7 Mon Sep 17 00:00:00 2001 From: jamesrea83 Date: Thu, 25 Apr 2019 16:08:09 +0100 Subject: [PATCH 5/5] removed unnecessary pauseWhenOffScreen variable --- js/adapt-contrib-media.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/js/adapt-contrib-media.js b/js/adapt-contrib-media.js index 32a51b6c..faba99a8 100755 --- a/js/adapt-contrib-media.js +++ b/js/adapt-contrib-media.js @@ -286,8 +286,7 @@ define([ Adapt.trigger("media:stop", this); - var pauseWhenOffScreen = this.model.get('_pauseWhenOffScreen'); - if (pauseWhenOffScreen) $(this.mediaElement).on('inview', this.onMediaElementInview); + if (this.model.get('_pauseWhenOffScreen')) $(this.mediaElement).on('inview', this.onMediaElementInview); this.model.set({ '_isMediaPlaying': true,