Media mp3 player not changing size / too large after upgrade

Media mp3 player not changing size / too large after upgrade

by Tzvi Daum -
Number of replies: 14

After upgrading to Moodle 3.5 it seems the mp3 audio player changed and the size of the player is larger which is causing it to block text. I tried changing the player settings in the media player settings but it does not seem to be taking effect.

Any suggestions would be appreciated.

Thank you.

TD


Average of ratings: -
In reply to Tzvi Daum

Re: Media mp3 player not changing size / too large after upgrade

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers

I actually think this is the Google chrome that has done this. Not Moodle. It looks rotten.

Are you using standard Moodle to handle MP3? If so you should be able to choose VideoJS as the audio player.

Site administration -> Plugins -> Media players -> Manage media players

Average of ratings: Useful (2)
In reply to Justin Hunt

Re: Media mp3 player not changing size / too large after upgrade

by Tzvi Daum -

Thank you Justin.

Yes, it is only like this in Chrome,

However, when I switched the player to video.js I lose the text of the questions and the whole thing is big...see attached. This effect is true in Chrome, FF and Edge.

What is the fix for that?

TD


In reply to Tzvi Daum

Re: Media mp3 player not changing size / too large after upgrade

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers

That looks wrong. It won't look like that under normal circumstances.  It will look like this:


Can you try to clear your Moodle cache:
site admin -> development -> purge all caches

Also if you have other media filters going
( you can see them on site admin -> plugins -> filters -> manage filters )

try to turn them off temporarily one by one to see if one of those is interfering.

Average of ratings: Useful (1)
In reply to Tzvi Daum

Re: Media mp3 player not changing size / too large after upgrade

by William Stewart -
How is the Hebrew written? Is it actual text or an image? Is there any particular styling in the question box (e.g., is it inside of a div, etc.). A simple solution might be to place the audio link with some space between it an the text via margin, padding, or even simply some <br>.
In reply to Tzvi Daum

Re: Media mp3 player not changing size / too large after upgrade

by Patrick Hallermann -

Hi mate,

hope you have this sorted already, but if not, I would have a look at the CSS and add code specific to chrome there. You can use the developer tools in Chrome (styles) to see which file is being used and what affect changing the values has on your player...Something like \filter\mediaplugins\style.php probably.

All the best.

Pat


In reply to Patrick Hallermann

Re: Media mp3 player not changing size / too large after upgrade

by Tzvi Daum -

Thank you all for replying.


Justin, I tried you suggestions but no luck. Turned off all the media players except .js player and purged all caches but still the same result.


William, here is a sample of the styling:


<table style="width: 96%;" border="0">

<tbody>

<tr>

<td rowspan="2" align="center" valign="bottom" width="85">

<p><a href="http://torahskills.org/tsresources/shmuel02/audio/01x02.mp3">audio link</a></p>

<p align="center"><a href="http://torahskills.org/tsresources/shmuel02/pdf/01x01-12.pdf">Translation Sheet</a></p>

</td>

<td style="font-family: david,times new roman;" colspan="2" align="center" valign="middle" height="35">

<div style="direction: rtl; text-align: right;"><span style="font-size: x-large;">(ב) וַיְהִי בַּיוֹם הַשְּׁלִישִׁי וְהִנֵּה אִישׁ בָּא מִן הַמַּחֲנֶה מֵעִם שָׁאוּל וּבְגָדָיו קְרֻעִים וַאֲדָמָה עַל רֹאשׁוֹ וַיְהִי בְּבֹאוֹ אֶל דָּוִד וַיִּפֹּל אַרְצָה וַיִּשְׁתָּחוּ: </span></div>

</td>

</tr>

<tr>

<td align="center" valign="top" width="20" height="37"> </td>

<td align="center" valign="bottom" width="543">

<div align="left">In this posuk, what was said about the man who came to Dovid?</div>

</td>

</tr>

</tbody>

</table>


What is weird to me is that on a number of questions the .mp3 has been stripped from the question text yet the audio player plays the intended file. I don't know how that is possible...for example here is the text for the question in the image above;


<table style="width: 96%;" border="0">

<tbody>

<tr>

<td rowspan="2" align="center" valign="bottom" width="85">

<p> </p>

<p align="center"><a href="http://torahskills.org/tsresources/shmuel02/pdf/01x01-12.pdf">Translation Sheet</a></p>

</td>

<td style="font-family: david,times new roman;" colspan="2" align="center" valign="middle" height="35">

<div style="direction: rtl; text-align: right;"><span style="font-size: x-large;">(ט) וַיֹּאמֶר אֵלַי עֲמָד נָא עָלַי וּמֹתְתֵנִי כִּי אֲחָזַנִי הַשָּׁבָץ כִּי כָל עוֹד נַפְשִׁי בִּי:</span></div>

</td>

</tr>

<tr>

<td align="center" valign="top" width="20" height="37"> </td>

<td align="center" valign="bottom" width="543">

<div align="left">According to the words of the Amaleiki, Shaul asked the Amaleiki to:</div>

</td>

</tr>

</tbody>

</table>


I don't even see an .mp3 link but the player does play the right file...so I don't know.


Also, I have hundreds of questions like this created over the years so modifying them all, would be rather difficult.





Patrick,

I would use that as a last resort...my installation of Moodle is straight out of the box and nothing fancy...it it works for every Chrome user I believe it should work for me without further modification.

Thoughts?

TD




In reply to Tzvi Daum

Re: Media mp3 player not changing size / too large after upgrade

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers

First up, this is definitely a fixable problem. So I do not think you will need to rewrite questions.

Disabling players and testing, and disabling filters and testing is not really the same thing. So I am not sure if you followed the process I suggested. But its ok.

Since it displays without issue when its the standard HTML5 audio player (browser native), but blows up when you try VideoJS, I think that the CSS /JS being applied by VideoJS is clashing with your theme's. 
You could run that down and fix that. That would be best, but you might need the help of someone with CSS skills.

Failing that though the next step would be to find a player that isn't ugly like Chrome's and doesn't blow up like VideoJS on your theme. To do that you could either:

i) install a different media player, and select that. This means youy are still using Moodle's multi media plugins filter. OR

ii) install a different filter to handle MP3 and select that.

The only different media player on the plugins database is the JW Player.
https://moodle.org/plugins/media_jwplayer

Personally I would use the VideoEasy filter (free) or Poodll filter (not free) because they offer much greater flexibility. (I am biased though ... since those are my filters).
https://moodle.org/plugins/filter_videoeasy
https://moodle.org/plugins/filter_poodll


They work on audio links in the html area. Whether or not you can use those will depend on whether you inserted audio "links" or "embedded players." Its easy to tell which. If you look at the content of your questions in the html editor they will be links if they are "links" or players if they are "embedded players."



In reply to Justin Hunt

Re: Media mp3 player not changing size / too large after upgrade

by Tzvi Daum -

Thanks Justin...using the VideoEasy filter I was able to get the video.js player to look like it does in the screenshot below which is a lot better although not perfect. It doesn't look great but it is functional. Perhaps some css will be helpful here although I am using the Easy theme straight out of the box and switching themes did not help so I can't imagine it is a theme issue.

Tzvi


In reply to Tzvi Daum

Re: Media mp3 player not changing size / too large after upgrade

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers

OK well that is getting better. Do any of the other audio players do a better job. Perhaps mediaelement audio? I attached a new template for mediaelement audio that might be better than the one you have there. See how to use that here (instructions are for poodll, but its the same for videoeasy)

https://poodll.freshdesk.com/support/solutions/articles/19000080054-how-to-use-template-bundles

Also, with VideoEasy you can easily alter the template. The original problem was the native audio player ran into the hebrew text on the page. With VideoEasy in the native audio template  you could add new lines(<br>) after the player, or a bit of styling. 


In reply to Justin Hunt

Re: Media mp3 player not changing size / too large after upgrade

by Tzvi Daum -

Okay, I will take a look.

I wanted to install mediaelement audio (I assume you mean this - https://www.mediaelementjs.com/) just couldn't figure out for the life of me how to install it in Moodle...which folder it goes into...

Thanks.

TD

In reply to Tzvi Daum

Re: Media mp3 player not changing size / too large after upgrade

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers

You do not need to install Mediaelement audio in any way like that. VideoEasy wraps it all up in that template bundle I sent. So you just drag that bundle over the green bundle box on an empty videoeasy template settings page, and save. 




In reply to Justin Hunt

Re: Media mp3 player not changing size / too large after upgrade

by Tzvi Daum -

I appreciate your patience here Justin but I am not clear what exactly goes into the green bundle box..I thought you meant to drag the mediaelement player zip file into there but then I got this .txt message:


{"key":"mediaelementaudio","name":"Mediaelement_Audio","amd":"1","requirejs":"/filter/poodll/3rdparty/mediaelement-2.22.0/build/mediaelement-and-player.js","shim":"mejs","requirecss":"/filter/poodll/3rdparty/mediaelement-2.22.0/build/mediaelementplayer.min.css","body":"<audio id=\"@@AUTOID@@\" src=\"@@VIDEOURL@@\" width=\"@@WIDTH@@\" height=\"@@HEIGHT@@\"></audio>\n","script":"var player = new mejs.MediaElementPlayer(\"#\" + \"@@AUTOID@@\");\nplayer.pause();","defaults":"WIDTH=100,HEIGHT=30","style":"","alternate":"","version":"1.0.0","instructions":"This is a shimmed version of mediaelementjs for audio"}


And the player does not appear to be installed so I am still not clear...

Thanks 

TD

In reply to Tzvi Daum

Re: Media mp3 player not changing size / too large after upgrade

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers

It looks like that content of the bundle file (.txt) opened in the browser. Some browsers may not drag and drop bundles as well as others, though Chrome is usually ok. And the bundle looks wrong too ... it should be the mediaelement_cdn.txt one.

In reply to Tzvi Daum

Re: Media mp3 player not changing size / too large after upgrade

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers

It looks like that content of the bundle file (.txt) opened in the browser. Some browsers may not drag and drop bundles as well as others, though Chrome is usually ok. And the bundle looks wrong too ... it should be the mediaelement_cdn.txt one.