Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-84686

Matching H5P Captions to User Language Preferences

    • Icon: Improvement Improvement
    • Resolution: Unresolved
    • Icon: Minor Minor
    • None
    • 4.4.7, 4.5.3
    • H5P
    • MOODLE_404_STABLE, MOODLE_405_STABLE
    • MOODLE_405_STABLE
    • Hide

      Background of Testing

      In my case, I need an interactive video with captions in different languages, allowing users to choose their preferred language while watching the course.

      Why do I use H5P? By using H5P, I can offer users the option to switch captions between languages easily, without having to duplicate video files for each language (which would take up a ton of storage!).

      Benefits of doing it? The biggest benefit is the flexibility it gives users to watch the course in the language they’re most comfortable with. It makes the content more accessible and personalised, which helps me reach a wider, more diverse audience.

      Test Setup Guide

      Steps:

      1. Create a course.
      2. Go to the Content Bank.
      3. Add an “Interactive Video”.
      4. Fill out the "New H5P Interactive Content" form.
        1. Enter the required title.
      5. Upload the test video (attached below). You can add a label (optional).
      6. Go to "Text Tracks".
      7. Add text tracks for the different languages (in this case, English, Chinese, and Thai).
        1. Add English subtitles/text track and upload the WebVTT format source file.
        2. Add Chinese subtitles/text track and upload the WebVTT format source file.
        3. Add Thai subtitles/text track and upload the WebVTT format source file.
      8. Save the Interactive Video.
      9. Return to the course.
      10. Add an H5P activity under the desired course section.
      11. Fill in the H5P activity name.
      12. Add the H5P Package file, using the video you just uploaded in the Content Bank.
      13. Save and display the activity.

      *Video demo of the steps:

      setup_test.mp4

       


      With the setup complete, we can now compare the behavior before and after the improvements.

      Test 1: The previous behaviour

      Steps:

      1. Navigate to the Interactive Video edit form.
      2. Set a default text track using the Track Label of one of the text tracks.
      3. Save and go back to view the video again.

      Result: You will notice that although the caption list is updated, the actual caption content still loads the first one, which is incorrect.

      *Video demo of the issue:

      previous_behaviour_bug.mp4

      Test 2: The new behaviour

      Steps:

      1. Select a user-preferred language using the Moodle language selector.
      2. Navigate to the Interactive Video edit form and watch the video.

      Result: You will see that both the caption list and the actual caption content load correctly based on the user's preferred language, which is an improved feature.

      *Video demo of the behaviours:

      new_behaviour.mp4

      Particular H5P package that I used for testing

      Actually, I am not using a pre-made H5P package for testing. In my case, all I need is a video file and a few caption files (WebVTT) as required by Moodle H5P.

      So, any video file (e.g., .mp4) along with a few WebVTT files will work, as shown in the attachments.

      Test video:

      Test text track files:

      How this improvement has been effective?

      The function I added uses current_language() to ensure captions match the user's preferred language, improving the interactive H5P video experience.

      Previously, subtitles didn’t update correctly, causing inconsistencies. Now, both the caption list and subtitles align, making the experience smoother and more accessible.

      This improvement enhances reliability, reduces confusion, and lets learners focus on the content without manual adjustments.

      Show
      Background of Testing In my case, I need an interactive video with captions in different languages, allowing users to choose their preferred language while watching the course. Why do I use H5P? By using H5P, I can offer users the option to switch captions between languages easily, without having to duplicate video files for each language (which would take up a ton of storage!). Benefits of doing it? The biggest benefit is the flexibility it gives users to watch the course in the language they’re most comfortable with. It makes the content more accessible and personalised, which helps me reach a wider, more diverse audience. Test Setup Guide Steps: Create a course . Go to the Content Bank . Add an “Interactive Video” . Fill out the "New H5P Interactive Content" form . Enter the required title. Upload the test video (attached below). You can add a label (optional). Go to "Text Tracks" . Add text tracks for the different languages (in this case, English, Chinese, and Thai). Add English subtitles/text track and upload the WebVTT format source file. Add Chinese subtitles/text track and upload the WebVTT format source file. Add Thai subtitles/text track and upload the WebVTT format source file. Save the Interactive Video . Return to the course . Add an H5P activity under the desired course section. Fill in the H5P activity name . Add the H5P Package file , using the video you just uploaded in the Content Bank. Save and display the activity. *Video demo of the steps: setup_test.mp4   With the setup complete, we can now compare the behavior before and after the improvements. Test 1: The previous behaviour Steps: Navigate to the Interactive Video edit form. Set a default text track using the Track Label of one of the text tracks. Save and go back to view the video again. Result: You will notice that although the caption list is updated, the actual caption content still loads the first one, which is incorrect. *Video demo of the issue: previous_behaviour_bug.mp4 Test 2: The new behaviour Steps: Select a user-preferred language using the Moodle language selector. Navigate to the Interactive Video edit form and watch the video. Result: You will see that both the caption list and the actual caption content load correctly based on the user's preferred language, which is an improved feature. *Video demo of the behaviours: new_behaviour.mp4 Particular H5P package that I used for testing Actually, I am not using a pre-made H5P package for testing. In my case, all I need is a video file and a few caption files (WebVTT) as required by Moodle H5P. So, any video file (e.g., .mp4) along with a few WebVTT files will work, as shown in the attachments. Test video: Test Video - Earth.mp4 Test text track files: English_text_track.vtt Chinese_text_track.vtt Thai_text_track.vtt   How this improvement has been effective? The function I added uses current_language() to ensure captions match the user's preferred language, improving the interactive H5P video experience. Previously, subtitles didn’t update correctly, causing inconsistencies. Now, both the caption list and subtitles align, making the experience smoother and more accessible. This improvement enhances reliability, reduces confusion, and lets learners focus on the content without manual adjustments.
    • Show
      Fails against automated checks. Checked MDL-84686 using repository: https://github.com/chen-gloria/moodle.git MOODLE_405_STABLE (2 errors / 2 warnings) [branch: MOODLE_405_STABLE | CI Job ] overview (0/0) , phplint (0/0) , phpcs (0/0) , js (0/0) , css (0/0) , phpdoc (0/0) , commit (2/2) , savepoint (0/0) , thirdparty (0/0) , externalbackup (0/0) , grunt (0/0) , shifter (0/0) , mustache (0/0) , gherkin (0/0) , Should these errors be fixed? Built on: Fri Mar 7 05:56:18 UTC 2025

      Description of Improvement and Benefits

      Previously, the default behaviour for selecting text tracks in H5P didn’t align with user language preferences. The default text track was used regardless of the user's language settings, which led to a less personalised experience.

      To address this, I’ve implemented a new feature that automatically selects the text track based on the user’s language, retrieved via current_language(). This enhancement provides several key benefits:

      • It allows for a more personalised user experience by displaying content in the user's preferred language automatically.
      • It eliminates the need for users to manually select the correct text track, improving accessibility and usability.
      • It would ensure that the most relevant text track is always selected, especially in multilingual environments where the content needs to adapt to different languages.
      • This approach provides flexibility for further language-based customisation, which is critical for systems that cater to diverse user bases.

      This would enhance the effectiveness of the text track functionality and align it with the user’s language settings.

      How does it work?

      Step 1: The user selects their preferred language in the user profile settings.

      For instance, they choose Thai (th) as their preferred language.

      Step 2: The user views their H5P video.

      At this point, the H5P captions will detect the user's language settings and automatically select the caption that matches. As shown below, both "CC" options are selected to match the user's language, and the corresponding caption file will be used.

      Note: If no matching language is found, the first available caption on the list will be used.

      How does it get set up from an Admin side?

      As shown below, the source language must match the language selected in the Moodle language selector for our function to recognise it.

      If not found or not recognised, the caption at the top of the list will be used.

       

       

        1. Screenshot 2025-02-28 153001.png
          21 kB
          Gloria C
        2. Screenshot 2025-02-28 163005.png
          398 kB
          Gloria C
        3. Screenshot 2025-02-28 155304.png
          2.20 MB
          Gloria C
        4. previous_behaviour_bug.mp4
          5.79 MB
          Gloria C
        5. Test Video - Earth.mp4
          1.50 MB
          Gloria C
        6. Chinese_text_track.vtt
          0.1 kB
          Gloria C
        7. English_text_track.vtt
          0.1 kB
          Gloria C
        8. Thai_text_track.vtt
          0.2 kB
          Gloria C
        9. setup_test.mp4
          11.56 MB
          Gloria C
        10. new_behaviour.mp4
          8.04 MB
          Gloria C

            Unassigned Unassigned
            gloriac Gloria C
            Votes:
            5 Vote for this issue
            Watchers:
            8 Start watching this issue

              Created:
              Updated:

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 hour, 7 minutes
                1h 7m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.