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

Video and audio is not properly rendered by videojs in the course page

XMLWordPrintable

    • MOODLE_39_STABLE
    • MOODLE_39_STABLE
    • MDL-68330-master-2
    • Hide

      Test 1 (Embed video and audio files)

      1. Login as Admin.
      2. Create a Course.
      3. Enable 'Multimedia plugins' filter (Site administration > Plugins > Filters > Manage filters)
      4. Enable the VideoJS media player and prioritise it over the other media players (Site administration > Plugins > Media players > Manage media players)
      5. Go to the Course
      6. Add a Label in the course
        1. For 'Label text' add a link to a video file (ex. mp4)
          NOTE: 3gp format is not supported. If your browser does not have flash installed, flv will also not work. Make sure that you test in at least one browser with flash enabled.
        2. Save and return to course
      7. Make sure the video file is properly rendered and can be played by the videojs media player.
      8. Add a new label in the Course.
        1. For 'Label text' add a link to an audio file (ex. mp3)
        2. Save and return to course
      9. Make sure the audio file is properly rendered and can be played by the videojs media player.

      Test 2 (Re-test MDL-67244)

      1. Login as admin
      2. Go to site administration -> plugins -> media players -> manage media players and:
        1. disable JSplayer
        2. enable HTML5 video
      3. Create a course and turn editing on
      4. Drag and drop both samples (sample_320.mp4 and sample_720.mp4) into the course and in both select "Add media to course page"
      5. Turn editing off, maximize browser window and hide all developer panel until the course section wide is wider than the 320p video
      6. If the window is wide enough the 720p video should be wider than the 320p
      7. Activate mobile view on the browser or reduce the window width until boths players need to be shrinked to fit into the course section
      8. Now you should see that both videos players are as wide as the course topic box

      Test 3 (Re-test MDL-57991)

      1. Login as Admin
      2. Go to site administration -> plugins -> media players -> manage media players and:
        1. enable JSplayer
        2. disable HTML5 video
      3. Create a course
      4. Create an URL or Assign
      5. Add a link to some video to description
      6. Check 'Display description'
      7. Confirm that the video is not causing horizontal scrolling, and appears centered.
      8. Create a label with a video
      9. Confirm that the video is also centered. Note that label text and activities descriptions have different layouts and centers of them do not match
      10. Toggle editing mode on and off
      11. Confirm that the video is not causing horizontal scrolling, and appears centered.
        #
      Show
      Test 1 (Embed video and audio files) Login as Admin. Create a Course. Enable 'Multimedia plugins' filter (Site administration > Plugins > Filters > Manage filters) Enable the VideoJS media player and prioritise it over the other media players (Site administration > Plugins > Media players > Manage media players) Go to the Course Add a Label in the course For 'Label text' add a link to a video file (ex. mp4) NOTE: 3gp format is not supported. If your browser does not have flash installed, flv will also not work. Make sure that you test in at least one browser with flash enabled. Save and return to course Make sure the video file is properly rendered and can be played by the videojs media player. Add a new label in the Course. For 'Label text' add a link to an audio file (ex. mp3) Save and return to course Make sure the audio file is properly rendered and can be played by the videojs media player. Test 2 (Re-test  MDL-67244 ) Login as admin Go to site  administration -> plugins -> media players -> manage media players  and: disable JSplayer enable HTML5 video Create a course and turn editing on Drag and drop both samples ( sample_320.mp4  and  sample_720.mp4 ) into the course and in both select "Add media to course page" Turn editing off, maximize browser window and hide all developer panel until the course section wide is wider than the 320p video If the window is wide enough the 720p video should be wider than the 320p Activate mobile view on the browser or reduce the window width until boths players need to be shrinked to fit into the course section Now you should see that both videos players are as wide as the course topic box Test 3 (Re-test  MDL-57991 ) Login as Admin Go to site  administration -> plugins -> media players -> manage media players  and: enable JSplayer disable HTML5 video Create a course Create an URL or Assign Add a link to some video to description Check 'Display description' Confirm that the video is not causing horizontal scrolling, and appears centered. Create a label with a video Confirm that the video is also centered. Note that label text and activities descriptions have different layouts and centers of them do not match Toggle editing mode on and off Confirm that the video is not causing horizontal scrolling, and appears centered. #
    • 1

      This issue was discovered while working on the upgrade of VideoJs to the latest version (https://tracker.moodle.org/browse/MDL-67383)

      When adding a video link to a content of a label or in a description of an activity (enable to be displayed in the course page), with the media filters enabled, the video is not properly rendered.

      Replication steps:

      1. Login as Admin.
      2. Create a Course.
      3. Enable 'Multimedia plugins' filter (Site administration > Plugins > Filters > Manage filters)
      4. Enable the VideoJS media player and prioritise it over the other media players (Site administration > Plugins > Media players > Manage media players)
      5. Go to the Course
      6. Add a Label in the course
        • For 'Label text' add a link to a video file (for ex. mp4)

      Expected: The video link is displayed properly in a media player in the course page.

      Actual: The media player with the video link is not properly displayed (See attached screenshot).

      Alternatively, you can just upload the provided course backup in order to replicate the issue. 

        1. backup-moodle2-course-3-testing_players-20170407-1113-nu.mbz
          10.56 MB
        2. MDL-68330_Test1_Step9.mp4
          333 kB
        3. MDL-68330_Test1.jpg
          MDL-68330_Test1.jpg
          20 kB
        4. MDL-68330_Test2.jpg
          MDL-68330_Test2.jpg
          67 kB
        5. MDL-68330_Test3.jpg
          MDL-68330_Test3.jpg
          32 kB
        6. MDL-68330.gif
          MDL-68330.gif
          102 kB
        7. sample_320.mp4
          375 kB
        8. sample_720.mp4
          5.01 MB
        9. Screenshot from 2020-04-02 13-49-02.png
          Screenshot from 2020-04-02 13-49-02.png
          13 kB

            Geshoski Mihail Geshoski
            Geshoski Mihail Geshoski
            Farhan Karmali Farhan Karmali
            Adrian Greeve Adrian Greeve
            Anna Carissa Sadia Anna Carissa Sadia
            Votes:
            1 Vote for this issue
            Watchers:
            8 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 day, 5 hours, 50 minutes
                1d 5h 50m

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