The value of the html-title (either explicitly specified or based on the filename) does not get escaped correctly in audio and video tags. It causes visual problems in some cases or a complete break down in other cases.

REPRODUCTION STEPS:

Audio and Video get html-title with URL-encoded value

I start with creating an assignment:

Now I add a new audio by pressing the button “Insert or edit an audio/video file”. I get the popup and go to the audio tab:

I press “Browse repositories...” and in the File picker I choose “Upload a file”. I browse and find my file and the under Save as I give it a name with some special characters:

I press “Upload this file” and get back to the ”Insert media” dialog:

I can see that the file name has been cleaned from certain special characters (“&<>). The spaces have been encoded as %20 and the %-sign has been encoded as %25. So far so good.

I choose to leave the Display options, Advanced settings and Subtitles and captions unchanged. That means that the title is empty:

I press “Insert media”. Everything looks good:

Time to test the assignment. I save and display. On mouse over, the title appears as a tooltip. Since I did not specify a title, the filename is used:

Shouldn’t the tooltip be unescaped as URL and escaped as html?

Second case:

Just like before, but this time I will specify a title:

I press “Insert media” and it looks good. Even the tooltip is fine:

I press “Save and display” and something is wrong:

The tooltip seems to include something that is supposed to be part of the html-code. And the audio player is now bigger, like a video player. The generated html code is not escaped correctly. The opening tag for audio looks like this:

<audio controls="true" title=""Test" <<Hello data-setup-lazy="{"language": "en", "fluid": true, "controlBar":

{"fullscreenToggle": false}

, "aspectRatio": "1:0"}" id="id_videojs_647467957cd65_2" class="video-js">

For the first audio, the audio tag looks like this:

<audio controls="true" data-setup-lazy="{"language": "en", "fluid": true, "controlBar":

{"fullscreenToggle": false}

, "aspectRatio": "1:0"}" id="id_videojs_647467957ccab_1" class="video-js" title="My%20great%20%20100%25%20awesome%20file%20.mp3">

So, it appears that the title and the data-setup-lazy have been merged into one attribute because the value of the title has not been escaped correctly. It worked correctly in the Edit mode (inside the rich text editor).

These problems affect both assignments and quizzes and both the question part (that the teacher specifies) and the answer part (that the student specifies, for quiz only if the question type is Essay and the Response format is “HTML editor with file picker”). And of course the same problems apply to audio and video.