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

Media embedding should be consistent and customisable

XMLWordPrintable

    • MOODLE_23_STABLE
    • MOODLE_23_STABLE
    • MDL-29624-master
    • Hide

      Note: The behaviour tested here is pretty much the same as existing behaviour. There are not intended to be any really major changes, except occasionally that something works where it was previously broken.

      There may be some cases where the embedding behaviour is less than ideal - this change does improve some embedding behaviour including making the mobile device support better (especially on Android), but most of the embed code is brought forward from the old media filter, so this is not intended to fix all existing issues.

      This test includes a good range of formats but not every single one. The new (and existing) unit tests do basic testing of all the code so it's hopefully not necessary to manually test everything. All videos in the test course are format conversions of a 6 second video of me typing stuff into Word. The audio is also a format conversion of the soundtrack from this video.

      Test difficulty: EASY (but one section requires access to mobile devices).

      PREPARATION

      i. Before you install this patch, you should have default media filter settings. (These are for everything to be on except the HTML 5 options and Vimeo.) You will need to visit the admin page so that it has a chance to update the settings. Or, if you already upgraded and didn't have default settings, skip to point 15 below and set options up as per the 'verify' text before you begin the test.

      ii. A Moodle backup file is attached to this bug. Restore it onto your test system as a new course.

      iii. Your test computer needs to have QuickTime installed.

      RESOURCES

      1. The top area of the course is headed 'Resources'. Each resource in this area is named after a file format, and contains a File resource of that type.
      + All files should be embedded using a suitable player and should play.

      Note: The WMV file will only embed in Internet Explorer. In other browsers you should get a download link.

      URL

      2. In the second section of the course, click 'URL'. This is a link to an mp4 file on a remote server.
      + Should display embedded using QT.

      LESSON

      3. Click 'Lesson'. If necessary, switch to the Preview tab.
      4. Under 'linked media' on the right, click the link.
      + Popup window should appear; within this, the media file should display using QT.

      FILTER

      5. Click into the 'Page'.
      + Check that embedded items A through H display correctly as embedded videos, audio (C), YouTube (G), or Flash (H).
      + Items D and F, which were embedded using URLs ending in #640x480, should display at double size.
      + Item F ('alternative formats MP4 + FLV') should be displaying using the Flash player.

      Note: When displayed inline by the filter, MP3 files use a mini-player which is smaller than when displayed in a File resource; this is intended as it is the same as previous behaviour.

      MOBILE SUPPORT

      6. View the Page using an iDevice.
      + Items A, B, D, and F should all display using QuickTime.
      + Item C should display using HTML5 audio.
      + Items E and H should not display because they use Flash. These should show download links.

      7. View the Page using an Android device (2.2+).
      + Items A, B, and D should all display using HTML5 video.
      + If the device supports Flash, then items E and H should appear, and items F and C should display using Flash.
      + If the device does not support Flash then items E and H should show download links, item F should display using HTML5 video, and item C as HTML5 audio.

      SETTINGS

      8. Go to the new 'Media embedding' settings page under Site administration / Appearance.
      + Verify that all options are on except Vimeo (i.e. the options are same as they were pre-upgrade except the HTML5 options have been enabled, as they are now suitable to be on by default).

      9. Turn off QuickTime option and save settings.

      10. Go look at the Page again on a desktop browser which supports HTML5 including mp4 format (Chrome/Safari).
      + All videos should still display. Videos A, B, and D (i.e. all the ones which were previously QuickTime) should now display using HTML5 video. The others should still use the Flash player as before.

      FALLBACK

      11. Look at the Page on a desktop browser which supports HTML5 but not mp4 format (Firefox/Opera).
      + Everything should display as before except videos A, B, and D which cannot be embedded (now that QT is disabled in settings).
      + These videos should contain download links which you could use to download the video and play locally.
      + The download link should have the same text as the video filename (frog.mp4), except in video B where I used custom fallback text (Frog frog frog frog!).

      FLASH SECURITY

      12. Click into the Forum. Start a new discussion. Give it any subject.
      13. In the Message area, use the Moodle Media button to insert a .SWF file (if you need one, go grab the sample I used for the 'SWF' File item).
      14. Post the discussion containing the SWF link. Click into it to view it.
      + Unlike other media files, the SWF file should not be embedded and should remain as a link. This is because forum messages are not trusted.

      MOODLE MEDIA PREVIEW

      15. Reply to the post. In the reply field, click the 'Moodle media' button in the editor and this time select an .flv file (again, if you don't have one, use the 'FLV' File resource).
      + Once you have uploaded the file but before you insert it, verify that a preview displays in the Moodle Media dialog. When the player does not fit in the preview space, there will be scrollbars.

      Show
      Note: The behaviour tested here is pretty much the same as existing behaviour. There are not intended to be any really major changes, except occasionally that something works where it was previously broken. There may be some cases where the embedding behaviour is less than ideal - this change does improve some embedding behaviour including making the mobile device support better (especially on Android), but most of the embed code is brought forward from the old media filter, so this is not intended to fix all existing issues. This test includes a good range of formats but not every single one. The new (and existing) unit tests do basic testing of all the code so it's hopefully not necessary to manually test everything. All videos in the test course are format conversions of a 6 second video of me typing stuff into Word. The audio is also a format conversion of the soundtrack from this video. Test difficulty: EASY (but one section requires access to mobile devices). PREPARATION i. Before you install this patch, you should have default media filter settings. (These are for everything to be on except the HTML 5 options and Vimeo.) You will need to visit the admin page so that it has a chance to update the settings. Or, if you already upgraded and didn't have default settings, skip to point 15 below and set options up as per the 'verify' text before you begin the test. ii. A Moodle backup file is attached to this bug. Restore it onto your test system as a new course. iii. Your test computer needs to have QuickTime installed. RESOURCES 1. The top area of the course is headed 'Resources'. Each resource in this area is named after a file format, and contains a File resource of that type. + All files should be embedded using a suitable player and should play. Note: The WMV file will only embed in Internet Explorer. In other browsers you should get a download link. URL 2. In the second section of the course, click 'URL'. This is a link to an mp4 file on a remote server. + Should display embedded using QT. LESSON 3. Click 'Lesson'. If necessary, switch to the Preview tab. 4. Under 'linked media' on the right, click the link. + Popup window should appear; within this, the media file should display using QT. FILTER 5. Click into the 'Page'. + Check that embedded items A through H display correctly as embedded videos, audio (C), YouTube (G), or Flash (H). + Items D and F, which were embedded using URLs ending in #640x480, should display at double size. + Item F ('alternative formats MP4 + FLV') should be displaying using the Flash player. Note: When displayed inline by the filter, MP3 files use a mini-player which is smaller than when displayed in a File resource; this is intended as it is the same as previous behaviour. MOBILE SUPPORT 6. View the Page using an iDevice. + Items A, B, D, and F should all display using QuickTime. + Item C should display using HTML5 audio. + Items E and H should not display because they use Flash. These should show download links. 7. View the Page using an Android device (2.2+). + Items A, B, and D should all display using HTML5 video. + If the device supports Flash, then items E and H should appear, and items F and C should display using Flash. + If the device does not support Flash then items E and H should show download links, item F should display using HTML5 video, and item C as HTML5 audio. SETTINGS 8. Go to the new 'Media embedding' settings page under Site administration / Appearance. + Verify that all options are on except Vimeo (i.e. the options are same as they were pre-upgrade except the HTML5 options have been enabled, as they are now suitable to be on by default). 9. Turn off QuickTime option and save settings. 10. Go look at the Page again on a desktop browser which supports HTML5 including mp4 format (Chrome/Safari). + All videos should still display. Videos A, B, and D (i.e. all the ones which were previously QuickTime) should now display using HTML5 video. The others should still use the Flash player as before. FALLBACK 11. Look at the Page on a desktop browser which supports HTML5 but not mp4 format (Firefox/Opera). + Everything should display as before except videos A, B, and D which cannot be embedded (now that QT is disabled in settings). + These videos should contain download links which you could use to download the video and play locally. + The download link should have the same text as the video filename (frog.mp4), except in video B where I used custom fallback text (Frog frog frog frog!). FLASH SECURITY 12. Click into the Forum. Start a new discussion. Give it any subject. 13. In the Message area, use the Moodle Media button to insert a .SWF file (if you need one, go grab the sample I used for the 'SWF' File item). 14. Post the discussion containing the SWF link. Click into it to view it. + Unlike other media files, the SWF file should not be embedded and should remain as a link. This is because forum messages are not trusted. MOODLE MEDIA PREVIEW 15. Reply to the post. In the reply field, click the 'Moodle media' button in the editor and this time select an .flv file (again, if you don't have one, use the 'FLV' File resource). + Once you have uploaded the file but before you insert it, verify that a preview displays in the Moodle Media dialog. When the player does not fit in the preview space, there will be scrollbars.

      There are three areas in Moodle which have media embedding code:

      1) Resource (used when you add a File or URL in 'Embed' mode, or in Lesson for the popup).
      2) Filter (used when you put a link to <a href="somevideo.mp4"> in any text).
      3) Moodle media preview (in TinyMCE when you select a media file to insert).

      All three areas have different, totally independent code. This means the same code is duplicated three times (twice in PHP, once in JavaScript). In practice, the situation is actually worse than this because the code in resource is significantly worse than the code in filter, and different formats are supported using different approaches which work (or not) in different browsers.

      In addition it is possible in a Moodle installation to customise #2 (by writing a new filter) but not possible to customise #1 and #3 at all without editing core code.

      After discussion with other developers (including Petr I think) the best approach to resolve this problem was agreed. This work implements it as follows:

      1) New core_media_renderer contains functions necessary to embed media. It is possible to override this renderer in a theme (achieving the customisation requirement).

      2) The back-end to this class is in medialib.php and consists of a number of ranked 'player' classes (currently these are lightweight classes, not actual moodle plugins). It is easy to add extra classes either in core or inside a theme that extends the renderer as above.

      The system works by outputting content using ALL player classes that support that content, in ranking order, via the object tag fallback mechanism.

      Player classes were implemented starting from the existing functions in filter_mediaplugin.

      There is significant unit testing for this feature.

      3) filter_mediaplugin was changed to implement using these classes. (Obviously it is now very much smaller.) Language files and settings were moved from the filter into core_media. Existing unit test was updated to still pass.

      4) I changed the resource (File) module to use this function as well, deleting all the resource code related to embedding media files. (Note: Resource still handles its own embedding of non-media files such as PDFs, HTML.)

      5) I also changed the 'Moodle media' TinyMCE plugin so that instead of the custom JS embedding code, it adds an iframe to a new php script which outputs the media using the render_media function. [This removes the need to duplicate the code in JavaScript.]

      6) I made necessary improvements to the HTML5 support, including:

      a) Browser detection so that we can now have html5 support left on by default, without breaking fallbacks in the case where the browser does not support the video format in use.

      b) Tweaks to work around bugs on Android versions which are still in wide use. This has now been tested to play on iDevices and Android when using any supported format.

      I also wrote documentation for this proposed feature on the Moodle Docs wiki:
      http://docs.moodle.org/dev/Media_embedding

            quen Sam Marshall
            quen Sam Marshall
            Dan Poltawski Dan Poltawski
            Aparup Banerjee Aparup Banerjee
            Rossiani Wijaya Rossiani Wijaya
            Votes:
            12 Vote for this issue
            Watchers:
            15 Start watching this issue

              Created:
              Updated:
              Resolved:

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