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

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

    XMLWordPrintable

    Details

    • Testing Instructions:
      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. #
    • Affected Branches:
      MOODLE_39_STABLE
    • Fixed Branches:
      MOODLE_39_STABLE
    • Pull Master Branch:
      MDL-68330-master-2
    • Story Points:
      1

      Description

      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. 

        Attachments

        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

          Issue Links

            Activity

              People

              Assignee:
              Geshoski Mihail Geshoski
              Reporter:
              Geshoski Mihail Geshoski
              Peer reviewer:
              Farhan Karmali
              Integrator:
              Adrian Greeve
              Tester:
              Anna Carissa Sadia
              Participants:
              Component watchers:
              Amaia Anabitarte, Carlos Escobedo, Ferran Recio, Sara Arjona (@sarjona), Amaia Anabitarte, Carlos Escobedo, Ferran Recio, Sara Arjona (@sarjona)
              Votes:
              1 Vote for this issue
              Watchers:
              9 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Fix Release Date:
                15/Jun/20

                  Time Tracking

                  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