Adapt Learning Community: Stop contrib media video

Hey all

Maybe someone can shed some light on this for me, I've been stock for some time now.

We've created a popup feature that displays an article in an popup when user clicks a button.

This article can contain blocks with contrib-media components.

The popup has a close button that hides the article again. This button creates a problem with contrib-media components.

If the user clicks play on the media component and closes the popup afterwards, the video keep playing and you can still hear it in the background, even though it is no longer visible.

I want the close button to fire a function that runs through all media components in the article and pauses the video that is playing.

I've noticed that when you click play on a media component, any other media component on the page, that might be playing, pauses. Thus, only one media component is able to play at a time, which is nice.

Where can I find the code that pauses other media component, when user clicks play?

Would it be possible to reuse that code for my close button?

Any help much appreciated.

Thank you very much.

Henrik

Where can I find the code that pauses other media component, when user clicks play?

That code is actually part of the underlying mediaelementJS player that we use. It can be found here; but I'm not sure it'll be much help.

What's really needed is this...

Show parent | Reply

Hi Matt

Thanks a lot

What strategy would you recommend that we went for, if we are planning on solving this issue ourselves?

Would it be to delve into the underlying mediaelementJS code or should we find another way, for instance by removing the DOM element from the page completely or something like that?

Show parent | Reply

update your version of the media plugin with the changes from this PR and then you can stop all media components from playing by doing Adapt.trigger('media:stop'); from within your custom code

Show parent | Reply

Hi Matt,

what do you mean with 'from within your custom code'? Please can you explain where the Code 'Adapt.trigger('media:stop');' has to be inserted.

Show parent | Reply

The original poster (Henrik), described his requirement like this:

The popup has a close button that hides the article again. This button creates a problem with contrib-media components.

If the user clicks play on the media component and closes the popup afterwards, the video keep playing and you can still hear it in the background, even though it is no longer visible.

I want the close button to fire a function that runs through all media components in the article and pauses the video that is playing.

In that example, the code Adapt.trigger('media:stop'); would need to be added to the code that is executed when the popup close button is clicked.

Show parent | Reply

O.K. - thank you for your Feedback. Sorry, it was a missunderstood from my side.

What i'm trying to do is:

I added audio to a text component which start automaticly when component comes visible.I want to stop audio when user clicks to show next compoent with trickle.

Show parent | Reply

In that case you probably want to have your component listen to one of the trickle events and stop audio when that event is fired. I'm not sure which is best, something like trickle:continue or trickle:stepunlock - you'll have to do a bit of experimentation to figure out which.

Show parent | Reply

Thanks Matt!

This works like a charme :D

When will this be implemented officially in a new version of the media-contrib on GitHub?

Show parent | Reply

As soon as it has passed the Peer Code Review process, the changes will be merged into the MASTER branch.

It's actually already passed that - but since you've tested it too it would be great (if you have the time) to add your '+2' just mentioning quickly what browser(s) you tested in.

Then it's a case of somebody creating a new release for the Adapt CLI and Authoring Tool to use (they always fetch the most recent release of a plugin). This is done once we've got all the changes we'd like to release merged in - I'd quite like to just get this one in too. Then it's just a case of one of us actually doing the release and writing up the release notes.

Show parent | Reply

Ok, great!

I don't know how I add my +2 on GitHub, should I just make a comment on the issue page you linked to? I can see that you have already mentioned me in there and that you have merged the commit.

Shouldn't the adapt-media-contrib bower file be updated too? From version 2.0.6 to 2.0.7?

I've testet the feature on the following:

On Windows 10:
Chrome Version 58.0.3029.110 (64-bit)
FireFox 45.0.1
Microsoft Edge 38.14393.1066.0
Internet Explorer 11.1198.14393.0

On Android version 6.0.1:
Chrome version 58.0.3029.83
Samsung Internet version 4.0.30-28

Furthermore I've testet the following browsers on BrowserStack:
MAC OS Yosemite:
Safari version 8.0.8

Safari on Iphones does not have any problems, as it opens the video in fullscreen mode, as soon as you press play. Thus you cannot scroll away from the video without closing and stopping it first.

Show parent | Reply

Yes, you just have to comment, that's all. Don't worry about it now, the link to this post will do the job.