Uploaded image for project: 'Moodle app'
  1. Moodle app
  2. MOBILE-2678

core-external-content does not work for <video src=> in iOS

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Minor Minor
    • 3.6.0
    • 3.5.2
    • iOS, Offline
    • Hide

      1. On the website as admin, turn OFF the multimedia filter.
      2. Create a new File using a short .mp4 video clip. (Apart from the name and file, leave all other settings default.)
      3. Right click on the video and copy to clipboard the URL of the mp4 video file.
      4. Create a Page with the following html, including the URL from above:

      <video src="URL" controls></video>

      Now check it on an iOS device (I'm using an iPhone 6 currently on IOS 11.4).

      5. In the app, log into the website and go to the course.
      6. Open the page. Check that the video plays correctly.
      7 Turn off the internet connection / wifi on the device.
      8. Leave and reopen the page. Check that you can still play the video.

      Testing existing videos
      1. Go to the 3.4 site
      2. Open the MM Dev Test course and go to Section "Resource: Page"
      3. Check that all the video resources there work as expected

      Show
      1. On the website as admin, turn OFF the multimedia filter. 2. Create a new File using a short .mp4 video clip. (Apart from the name and file, leave all other settings default.) 3. Right click on the video and copy to clipboard the URL of the mp4 video file. 4. Create a Page with the following html, including the URL from above: <video src=" URL " controls></video> Now check it on an iOS device (I'm using an iPhone 6 currently on IOS 11.4). 5. In the app, log into the website and go to the course. 6. Open the page. Check that the video plays correctly. 7 Turn off the internet connection / wifi on the device. 8. Leave and reopen the page. Check that you can still play the video. Testing existing videos 1. Go to the 3.4 site 2. Open the MM Dev Test course and go to Section "Resource: Page" 3. Check that all the video resources there work as expected
    • Hide

      In terms of label tags (or any code that will be treated with core-format-text), the workaround appears to be quite simple; just use the 'source' tags instead of src. For example, instead of:

      <video controls src="https://example.com/video.mp4"></video>

      you can do

      <video controls>
      <source src="https://example.com/video.mp4" type="video/mp4" />
      </video>

      When doing this in code, the workaround is to do the above, but also change the 'src' attribute to 'target-src'. You then also have to add the normal core-external-content attributes, to the source tag not the video tag.

      <video controls>
      <source target-src="https://example.com/video.mp4" type="video/mp4" core-external-content component="whatever" componentId="whatever" />
      </video>

      This seems rather weird, but appears to work.

      Show
      In terms of label tags (or any code that will be treated with core-format-text), the workaround appears to be quite simple; just use the 'source' tags instead of src. For example, instead of: <video controls src="https://example.com/video.mp4"></video> you can do <video controls> <source src="https://example.com/video.mp4" type="video/mp4" /> </video> When doing this in code, the workaround is to do the above, but also change the 'src' attribute to 'target-src'. You then also have to add the normal core-external-content attributes, to the source tag not the video tag. <video controls> <source target-src="https://example.com/video.mp4" type="video/mp4" core-external-content component="whatever" componentId="whatever" /> </video> This seems rather weird, but appears to work.
    • MOODLE_35_STABLE
    • MOODLE_36_STABLE
    • Moodle Mobile 3.6.0

      The core-external-content directive, and similar features such as the text formatting in labels, do not work properly when modifying the source URL for videos on iOS platform to use the cached version on the device, when the source URL is provided in the 'src' attribute rather than a <source> tag.

      Writing special code so that I could see the DOM source revealed that the problem appears to be caused because in working examples of videos, the video tag src attribute is of the form 'file://var/mobile/Containers/Data/Application/...', whereas in non-working examples it is of the form 'cdvfile://localhost/persistent/sites/...'.

      Other resources such as image tags work fine with the 'cdvfile' syntax so presumably it is something especially weird with video files.

      Note that I actually encountered this problem in a custom plugin by using the core-external-content directive on a video tag generated by the plugin (rather than being user content like in the test script). Since it is easier to reproduce without having to use a custom plugin, I decided to use the label example in the test script above.

      NOTE: The problem most likely affects <audio> as well as <video>, I haven't tested; obviously it should ideally be fixed in both if so.

            dpalou Dani Palou
            quen Sam Marshall
            Pau Ferrer Pau Ferrer
            Juan Leyva Juan Leyva
            Isabel Renedo Rouco Isabel Renedo Rouco
            Votes:
            0 Vote for this issue
            Watchers:
            4 Start watching this issue

              Created:
              Updated:
              Resolved:

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