Hi everyone,
Please guide me to stop/pause video on page scroll using 'adapt-contrib-media' component.
stop/pause video on page scroll
Re: stop/pause video on page scroll
It doesn't have this functionality, you'd have to customise the component
There's a library in Adapt called 'inview' which you could use to detect when the video has left the viewport. You can already see it used in this component to detect when the video is in the viewport, for when the course author has set 'inview' as the completion trigger for this component.
Re: stop/pause video on page scroll
Thank you Matt for help. I’ve customized 'adapt-contrib-media' component.
I've dropped the code and explained changes
On line no 158 setupEventListeners function, checked ‘play’ instead of 'inview' for viewport assign.
//if (this.completionEvent === 'inview')
if (this.completionEvent === 'play') {
this.$('.component-widget').on('inview', _.bind(this.inview, this));
}
And on line 241 inview function checked video is in viewport if no then call onMediaElementClick() function for video pause and for video play call onOverlayClick() function.
inview: function(event, visible, visiblePartX, visiblePartY) {
if (visible) {
if (visiblePartY === 'top') {
this._isVisibleTop = true;
} else if (visiblePartY === 'bottom') {
this._isVisibleBottom = true;
} else {
this._isVisibleTop = true;
this._isVisibleBottom = true;
}
if (this._isVisibleTop && this._isVisibleBottom) {
this.$('.component-inner').off('inview');
this.setCompletionStatus();
}
this.onOverlayClick(); //play video
}else{
this.onMediaElementClick(); // pause video
}
},