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

Introduce pluggable media players in Moodle, add VideoJS player

XMLWordPrintable

    • MOODLE_24_STABLE, MOODLE_27_STABLE, MOODLE_31_STABLE
    • MOODLE_32_STABLE
    • wip-MDL-38158-master
    • Hide

      Test 1 (UPGRADE)

      1. Before upgrade change the settings for the Media players (Site administration > Appearance > Media embedding), disable flash player for mp3 and flv. Do not worry about "legacy" players, they will be removed anyway.
      2. Insert in your config.php define('CORE_MEDIA_VIDEO_WIDTH', 555);
      3. Upgrade
      4. Go to Site administration > Plugins > Media playera > Manage media players and make sure that your settings are similar to what they were before the upgrade. HTML5audio, HTML5video, MP3 and FLV should be replaced with VideoJS, if something was disabled it should now be also disabled.
      5. Make sure that $CFG->media_default_width is now set to 555

      Test 2

      1. Add a URL resource linking to audio or video file, make sure it is displayed embedded with the appropriate filter (usually videojs)
      2. Add a file resource with audio or video file, view it
      3. Insert audio/video files as links in any text areas (for example labels), they should be displayed by appropriate player
      4. Insert audio/video files as <audio> or <video> tags in the text areas, they should be displayed by appropriate players. (If MDL-55324 does not land yet just edit HTML source).

      Test 3 (HTML5)

      1. Disable Flash fallback in VideoJS (in plugin settings), enable all possible extensions. Disable all media plugins except for videojs
      2. Create a course embedding as many media files as you can think of. Test on different browsers, firefox, chrome, Edge, Safari, android mobile, ios, etc. Not all file types can be played in all browsers.

      Test 4 (other players)

      1. Pull "Demo" commit from the branch (it will later go into plugins directory), run unittests on all additional plugins.
      2. Enable only Able player and test (briefly) on some audio and video files.
      3. Disable Able, enable wmp, flowplayer, realplayer and quicktime
      4. Create links to the files in formats that they support, make sure they are viewable if your browser has appropriate plugins
      Show
      Test 1 (UPGRADE) Before upgrade change the settings for the Media players (Site administration > Appearance > Media embedding), disable flash player for mp3 and flv. Do not worry about "legacy" players, they will be removed anyway. Insert in your config.php define('CORE_MEDIA_VIDEO_WIDTH', 555); Upgrade Go to Site administration > Plugins > Media playera > Manage media players and make sure that your settings are similar to what they were before the upgrade. HTML5audio, HTML5video, MP3 and FLV should be replaced with VideoJS, if something was disabled it should now be also disabled. Make sure that $CFG->media_default_width is now set to 555 Test 2 Add a URL resource linking to audio or video file, make sure it is displayed embedded with the appropriate filter (usually videojs) Add a file resource with audio or video file, view it Insert audio/video files as links in any text areas (for example labels), they should be displayed by appropriate player Insert audio/video files as <audio> or <video> tags in the text areas, they should be displayed by appropriate players. (If MDL-55324 does not land yet just edit HTML source). Test 3 (HTML5) Disable Flash fallback in VideoJS (in plugin settings), enable all possible extensions. Disable all media plugins except for videojs Create a course embedding as many media files as you can think of. Test on different browsers, firefox, chrome, Edge, Safari, android mobile, ios, etc. Not all file types can be played in all browsers. Test 4 (other players) Pull "Demo" commit from the branch (it will later go into plugins directory), run unittests on all additional plugins. Enable only Able player and test (briefly) on some audio and video files. Disable Able, enable wmp, flowplayer, realplayer and quicktime Create links to the files in formats that they support, make sure they are viewable if your browser has appropriate plugins

      Note, this issue evolved from adding one media player and arguing about which one to choose into introducing pluggable media players in Moodle. See also https://moodle.org/mod/forum/discuss.php?d=338094

      Original description:

      As I mentioned in the forum, https://moodle.org/mod/forum/discuss.php?d=222753, I would like to suggest using Flowplayer HTML5 as default HTML5 player in Moodle. The reasons:

      • Consistent HTML 5 player throughout different browsers and platforms
      • Falling back to flash if video can't be played using browser HTML5 engine
      • Ready for future (flash is moving away mobile platforms)
      • Themes and splash screen support
      • Configuration features and API
      • Easy integration with Google analytics
      • Supports RTMP streaming playing
      • Possibiliy of "embedding" Moodle video somewhere else (if enabled)
      • Support of subtitles (good for acessibility and using for language teaching)

      For details see website: http://flowplayer.org/docs/

      I gave it a quick go in Moodle, works absolutely nice and smooth. May be it should come initially as an additional player.

      The wiki page on planning this change and detailed comparison of Flowplayer, VideoJS and Projekktor: http://docs.moodle.org/dev/HTML5_player

        1. IMG_3093.PNG
          IMG_3093.PNG
          74 kB
        2. IE9_html5_player.jpg
          IE9_html5_player.jpg
          13 kB
        3. Chrome_html5_player.jpg
          Chrome_html5_player.jpg
          13 kB
        4. Chrome_html5_flowplayer.jpg
          Chrome_html5_flowplayer.jpg
          9 kB
        5. Chrome_html5_flowplayer_embed.jpg
          Chrome_html5_flowplayer_embed.jpg
          19 kB
        6. Chrome_html5_flowplayer_controls.jpg
          Chrome_html5_flowplayer_controls.jpg
          19 kB

            Votes:
            37 Vote for this issue
            Watchers:
            39 Start watching this issue

              Created:
              Updated:
              Resolved:

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