-
Bug
-
Resolution: Unresolved
-
Minor
-
None
-
4.4.7, 4.5.4, 5.0, 5.1
-
MOODLE_404_STABLE, MOODLE_405_STABLE, MOODLE_500_STABLE, MOODLE_501_STABLE
-
MDL-85159-404
-
MDL-85159-405
-
MDL-85159-500
-
MDL-85159-main
-
Preparation
- Download the attached media file sample-video.webm
. - Download the attached vtt file sample-subtitle.vtt.
Note: You can repeat the following tests on "Captions", "Descriptions", "Chapters" and "Metadata" using the same vtt file.
Testing 1: Backward compatibility test (Main and 500)
- Do not checkout the patch yet.
- Login as admin
- Go to edit profile
- In description area where there is a tinymce editor, click on "Multimedia" to add a media file
- Click on the dropzone area to select the file and dd the downloaded media file
- Once the media is previewed, click on "Subtitles and captions" to add the subtitle
- Go to "Subtitles" tab to add the downloaded subtitle
- Set the language from the languages installed list "en"
- Set the label to "English"
- Click "Save" to insert the media into the tinymce editor.
- Click "Update profile" to save the changes
- Play the uploaded video and hover the "cc" for the available subtitles
- Verify that you see "english" is listed and it is working when enabled
- Apply the patch and go back to edit profile page
- Click on the media to select and click on "Multimedia" to edit
- Once the media is previewed, click on the "Subtitles and captions" and go to "Subtitles" tab
- Verify that the language is populated with "English (en)" based on the previously selected language.
- Verify that the language list is not listed as language codes but language names.
Testing 1: Backward compatibility test (405 and 404)
- Do not checkout the patch yet.
- Login as admin
- Go to edit profile
- In description area where there is a tinymce editor, click on "Multimedia" to add a media file
- Go to "Video" tab and add the downloaded media file in "Video source URL"
- Click on "Subtitles and captions"
- Add the downloaded subtitle in "Subtitle track URL"
- Set the language from the languages installed list "en"
- Set the label to "English"
- Click "Insert media" to insert the media into the tinymce editor.
- Click "Update profile" to save the changes
- Play the uploaded video and hover the "cc" for the available subtitles
- Verify that you see "english" is listed and it is working when enabled
- Apply the patch and go back to edit profile page
- Click on the media to select and click on "Multimedia" to edit
- Click on "Subtitles and captions"
- Verify that the language is populated with "English (en)" based on the previously selected language.
- Verify that the language list is not listed as language codes but language names.
Test 2: Fix accessibility issue (continue from step #18)
- Click on "Save" to update the media in the editor
- Click on "Update profile"
- Play the uploaded video and hover the "cc" for the available subtitles
- Verify that you still see "english" is listed and it is working when enabled
- View the page source code, copy them all and paste in html validator then click "Check"
- Once the results are generated search for "srclang"
- Verify that you don't see warning like in the following screenshot
Preparation Download the attached media file sample-video.webm . Download the attached vtt file sample-subtitle.vtt . Note : You can repeat the following tests on "Captions", "Descriptions", "Chapters" and "Metadata" using the same vtt file . Testing 1: Backward compatibility test (Main and 500) Do not checkout the patch yet. Login as admin Go to edit profile In description area where there is a tinymce editor, click on "Multimedia" to add a media file Click on the dropzone area to select the file and dd the downloaded media file Once the media is previewed, click on "Subtitles and captions" to add the subtitle Go to "Subtitles" tab to add the downloaded subtitle Set the language from the languages installed list "en" Set the label to "English" Click "Save" to insert the media into the tinymce editor. Click "Update profile" to save the changes Play the uploaded video and hover the "cc" for the available subtitles Verify that you see "english" is listed and it is working when enabled Apply the patch and go back to edit profile page Click on the media to select and click on "Multimedia" to edit Once the media is previewed, click on the "Subtitles and captions" and go to "Subtitles" tab Verify that the language is populated with "English (en)" based on the previously selected language. Verify that the language list is not listed as language codes but language names. Testing 1: Backward compatibility test (405 and 404) Do not checkout the patch yet. Login as admin Go to edit profile In description area where there is a tinymce editor, click on "Multimedia" to add a media file Go to "Video" tab and add the downloaded media file in "Video source URL" Click on "Subtitles and captions" Add the downloaded subtitle in "Subtitle track URL" Set the language from the languages installed list "en" Set the label to "English" Click "Insert media" to insert the media into the tinymce editor. Click "Update profile" to save the changes Play the uploaded video and hover the "cc" for the available subtitles Verify that you see "english" is listed and it is working when enabled Apply the patch and go back to edit profile page Click on the media to select and click on "Multimedia" to edit Click on "Subtitles and captions" Verify that the language is populated with "English (en)" based on the previously selected language. Verify that the language list is not listed as language codes but language names. Test 2: Fix accessibility issue (continue from step #18) Click on "Save" to update the media in the editor Click on "Update profile" Play the uploaded video and hover the "cc" for the available subtitles Verify that you still see "english" is listed and it is working when enabled View the page source code, copy them all and paste in html validator then click "Check" Once the results are generated search for "srclang" Verify that you don't see warning like in the following screenshot - Download the attached media file sample-video.webm
-
Code verified against automated checks with warnings.Checked MDL-85159 using repository: https://github.com/stevandoMoodle/moodle.git
MOODLE_404_STABLE (0 errors / 19 warnings) [branch: MDL-85159-404 | CI Job]
- overview (0/1), phplint (0/0), phpcs (0/0), js (0/0), css (0/0), phpdoc (0/0), commit (0/0), savepoint (0/0), thirdparty (0/0), externalbackup (0/0), grunt (0/0), shifter (0/0), mustache (0/18), gherkin (0/0),
- Warn: The MDL-85159-404 branch at https://github.com/stevandoMoodle/moodle.git has not been rebased recently (>20 days ago).
- MOODLE_405_STABLE (0 errors / 18 warnings) [branch: MDL-85159-405 | CI Job]
MOODLE_500_STABLE (0 errors / 0 warnings) [branch: MDL-85159-500 | CI Job]- main (0 errors / 0 warnings) [branch: MDL-85159-main | CI Job]
Built on: Wed May 14 05:33:46 UTC 2025
Code verified against automated checks with warnings. Checked MDL-85159 using repository: https://github.com/stevandoMoodle/moodle.git MOODLE_404_STABLE (0 errors / 19 warnings) [branch: MDL-85159-404 | CI Job ] overview (0/1) , phplint (0/0) , phpcs (0/0) , js (0/0) , css (0/0) , phpdoc (0/0) , commit (0/0) , savepoint (0/0) , thirdparty (0/0) , externalbackup (0/0) , grunt (0/0) , shifter (0/0) , mustache (0/18) , gherkin (0/0) , Warn: The MDL-85159 -404 branch at https://github.com/stevandoMoodle/moodle.git has not been rebased recently (>20 days ago). MOODLE_405_STABLE (0 errors / 18 warnings) [branch: MDL-85159-405 | CI Job ] overview (0/0) , phplint (0/0) , phpcs (0/0) , js (0/0) , css (0/0) , phpdoc (0/0) , commit (0/0) , savepoint (0/0) , thirdparty (0/0) , externalbackup (0/0) , grunt (0/0) , shifter (0/0) , mustache (0/18) , gherkin (0/0) , MOODLE_500_STABLE (0 errors / 0 warnings) [branch: MDL-85159-500 | CI Job ] main (0 errors / 0 warnings) [branch: MDL-85159-main | CI Job ] Should these errors be fixed? Built on: Wed May 14 05:33:46 UTC 2025 -
-
2
-
Team Hedgehogs 2025 Sprint 2.0, Team Hedgehogs 2025 Sprint 2.1, Team Hedgehogs 2025 Sprint 2.2
-
Small
In the TinyMCE editor, when a user wants to add an embed multimedia with subtitles, the language selector displays inversed language code and language label.
The wrong value is then inserted in the <track> HTML tag, causing accessibility issues in the media player.
<video title="[Redacted]" |
poster="[Redacted]" |
controls="controls" width="1920" height="1080"> |
<source
|
src="[Redacted].mp4"> |
<track kind="subtitles" src="[Redacted].chapters.en.vtt" |
srclang="English (en)" label="English"> </video> |
When using a screen reader, the lang attribute of the subtitles is not valid per HTML standards.
Problem found in 4.4.7+, investigated on a clean install of 5.0rc2.
Solution :
In /lib/editor/tiny/plugins/media/amd/src/embed/embedhelpers.js, in the prepareMoodleLang() function, swap the lang and code positions in the mapping logic for the installed and available variables (lines 227 and 233).
In fact, the tiny_media/embed/metadata/subtitles template seems to be semantically ok with the object structure received; the values are only inversed in the prepareMoodleLang() function.
Steps to reproduce
- Download video file from https://github.com/iandevlin/iandevlin.github.io/blob/master/mdn/video-player-with-captions/video/sintel-short.webm (Download raw file)
- Download vtt file from https://github.com/iandevlin/iandevlin.github.io/blob/master/mdn/video-player-with-captions/subtitles/vtt/sintel-en.vtt (Download raw file)
- Create a Page ressource in you Moodle installation
- In the Page content, click on "Multimedia" to insert a video
- Upload the downloaded video file
- In the subtitles, upload the vtt file
- Select "en" as the Language
- Insert "English" as the Label
- Click on "Insert media"
- Save and display the page
- Validate the page HTML
- The attribute srclang attribute of the track element is not valid.
- The attribute srclang attribute of the track element is not valid.
The error is caused by the language selector at step 6.1, where the value attribute and <option> innerHTML should be inverted.
Once inserted in the editor, the <video> tag contains the <track> tag, which has "Anglais" (the localized language name) as srclang value.
