Audio player

Submitted by castelmager on Mon, 02/27/2017 - 21:43
castelmager's picture
Forums: 
Content creation

Hi,

I'm using the mini audio player in the course presentation activity in order to have a minimal look and feel.  The thing is that the minimal player does not allow to restart the sound.

I'm trying with the normal player the meet the needs perfectly ,but I cannot remove the download button.

Exist anyway to remove that button from audios? 

Thanks!

Sebastián. 

tomaj's picture

tomaj

Tue, 02/28/2017 - 07:47

Hi,

I think changing the css is probably your best bet for doing UI changes like that. Have a look here for some more info on how to go about it.

- Tom

castelmager's picture

castelmager

Tue, 02/28/2017 - 11:28

Thanks! 

I'll try it.

Now seems that the audio player has been updated and does not have the download button anymore, but I'll play with the css anyway ;)

 

tomaj's picture

tomaj

Wed, 03/01/2017 - 09:50

Awesome! Good luck!

castelmager's picture

castelmager

Mon, 04/03/2017 - 16:35

Hi tomaj,

The download button is still there :(

I'm using the component with the embeded code, in the iframe and in that case i'm not able to chance the css. 

Exist anyway to disable direct the download button by configuration ? 

One workaround is just put some label or image on the front to hide the button, but since the component is not responsive the label that hide the buton does not fit right in some screens resolution...

 

I appreciate any suggestion. 

Thanks ! 

Sebastian.

tomaj's picture

tomaj

Tue, 04/04/2017 - 07:49

Hi Sebastian,

You should be able to change the css inside the iframe by using the hook provided to your system by the h5p plugin.

I don't remember if the audio controls are provided by the html5 audio tag. If it is, then I don't think you can style it away (unless you tinker with the shadow dom, and I don't know how cross browser supported that would be).

- Tom

castelmager's picture

castelmager

Tue, 04/04/2017 - 11:56

Hi tomaj, thaks for your response.

I followed your isntructions here : https://h5p.org/documentation/for-developers/visual-changes and added my custom css file with this change : 

audio::-internal-media-controls-download-button {

    display:none;

}

audio::-webkit-media-controls-enclosure {

    overflow:hidden;

}

audio::-webkit-media-controls-panel {

    width: calc(100% + 30px); /* Adjust as needed */

}

This will hide the download button. 

thanks for support! 

 

Kind Regards,

Sebastian.

tomaj's picture

tomaj

Fri, 04/07/2017 - 08:51

Hi Sebastian,

Good to hear that you found a solution. :)

One question though. Are you not supporting IE/Firefox, since you are using the webkit specific css selectors?

- Tom

kayzoog

Wed, 05/02/2018 - 23:57

Implemented it and it works!

lpallas

Wed, 02/20/2019 - 22:51

I'm struggling here with the same problem. I attempted to add the custom css to the wordpress theme editor as was instructed above, both as solely the script above and as following the script in the example... I'm not really sure what in the example needs to be swapped out with the above script... can you clarify?

lpallas

Wed, 02/20/2019 - 22:54

I'm trying to follow the correction above by adding the css in the wordpress theme css editor but I think I'm not following. Can you clarify what in the "example" script from the visual changes forum needs to be substituted with the script from above? Thank you!

icc's picture

icc

Tue, 04/16/2019 - 10:03

I recommend just copy pasting or using the code from example plugin to get started quickly.