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

Add new option in the Insert H5P plugin to enable auto-play of embedded H5P content in the app

XMLWordPrintable

    • MOODLE_500_STABLE
    • MDL-83108-main
    • Hide

      Behat test:

      • lib/editor/tiny/plugins/h5p/tests/behat/h5p.feature

      Manual test:

      1. Edit a Page resource
      2. In the Tiny editor, click the H5P button. In the H5P modal:
        1. Select a H5P package
        2. Check the "Auto-play in the mobile app" in "Display options"
        3. Click "Insert H5P content".
      3. Click View > Source code in the the Tiny editor. In the source code modal:
        1. Verify that the the wrapper div with class "h5p-placeholder" contains the attribute data-mobileapp-autoplay="true"
        2. Click "Cancel" to close the source code modal
      4. Select the H5P content and click the H5P button. In the H5P modal:
        1. Verify that the "Auto-play in the mobile app" checkbox is visible and checked.
        2. Uncheck the "Auto-play in the mobile app"  option.
        3. Click "Insert H5P content".
      5. Click View > Source code in the the Tiny editor. In the source code modal:
        1. Verify that the the wrapper div with class "h5p-placeholder" does not have the attribute data-mobileapp-autoplay.

       

      Show
      Behat test: lib/editor/tiny/plugins/h5p/tests/behat/h5p.feature Manual test: Edit a Page resource In the Tiny editor, click the H5P button. In the H5P modal: Select a H5P package Check the "Auto-play in the mobile app" in "Display options" Click "Insert H5P content". Click View > Source code in the the Tiny editor. In the source code modal: Verify that the the wrapper div with class "h5p-placeholder" contains the attribute data-mobileapp-autoplay="true" Click "Cancel" to close the source code modal Select the H5P content and click the H5P button. In the H5P modal: Verify that the "Auto-play in the mobile app" checkbox is visible and checked. Uncheck the "Auto-play in the mobile app"  option. Click "Insert H5P content". Click View > Source code in the the Tiny editor. In the source code modal: Verify that the the wrapper div with class "h5p-placeholder" does not have the attribute data-mobileapp-autoplay .  
    • Hide

      Code verified against automated checks.

      Checked MDL-83108 using repository: https://github.com/albertgasset/moodle.git

      More information about this report

      Built on: Thu Feb 6 05:49:59 PM UTC 2025

      Show
      Code verified against automated checks. Checked MDL-83108 using repository: https://github.com/albertgasset/moodle.git main (0 errors / 0 warnings) [branch: MDL-83108-main | CI Job ] More information about this report Built on: Thu Feb 6 05:49:59 PM UTC 2025
    • Hide

      Launching automatic jobs for branch MDL-83108-main

      Built on: Fri Feb 21 03:55:12 PM UTC 2025

      Show
      Launching automatic jobs for branch MDL-83108 -main https://ci.moodle.org/view/Testing/job/DEV.02%20-%20Developer-requested%20PHPUnit/18333/ PHPUnit (sqlsrv / complete) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/62719/ Behat (NonJS - boost and classic / complete) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/62720/ Behat (Firefox - boost / complete) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/62721/ Behat (Firefox - classic / complete) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/62722/ App tests (stable app version) / complete) Built on: Fri Feb 21 03:55:12 PM UTC 2025

      This has been widely requested by users of the app.

      Currently the Moodle mobile app does not auto-play H5P content when is embedded from the site, reasons where:

      • This could cause some performance
      • This could cause data consumption issues for large H5p packages, instead of directly allow to download it for offline that won't require additional data requests in following access
      • To easily add the "Download for offline button"

      However, in some scenarios this is not the best user experience that can be provided to users so we are suggesting to add a "Display options" section in the Insert H5 TinyMCE plugin so teachers can decide if they want this specific package to auto.play

      To consider:

      • The design of the modal
      • Whether this should be displayed only when the mobile app is enabled for a site
      • We will include this option as a data attribute (data-mobileapp-autoplay=1) in the div with the class h5p-placeholder so we can detect it in the app
      • What to do in the mobile app to display an option to be able to download the package for offline usage (as once the package is played, the top-right icon that displays the download button in the H5P placeholder image is not displayed anymore)

        1. (1) 3 Passed -- (Main)MDL-83108.png
          (1) 3 Passed -- (Main)MDL-83108.png
          407 kB
        2. (1) 4 Passed -- (Main)MDL-83108.png
          (1) 4 Passed -- (Main)MDL-83108.png
          98 kB
        3. (1) 5 Passed -- (Main)MDL-83108.png
          (1) 5 Passed -- (Main)MDL-83108.png
          407 kB
        4. h5p.png
          h5p.png
          36 kB
        5. image-2025-01-30-12-05-15-795.png
          image-2025-01-30-12-05-15-795.png
          45 kB
        6. image-2025-01-30-12-07-28-024.png
          image-2025-01-30-12-07-28-024.png
          87 kB
        7. screenshot-1.png
          screenshot-1.png
          50 kB
        8. screenshot-2.png
          screenshot-2.png
          39 kB
        9. screenshot-3.png
          screenshot-3.png
          44 kB

            albert.gasset@moodle.com Albert Gasset
            jleyva Juan Leyva
            Juan Leyva Juan Leyva
            Ferran Recio Ferran Recio
            Kim Jared Lucas Kim Jared Lucas
            Votes:
            1 Vote for this issue
            Watchers:
            9 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 4 days, 2 hours, 8 minutes
                4d 2h 8m

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