bug: HTML5 video element refuses to play on all devices after update although it works on browser versions of Safari and Chrome

[simaxme]

Bug Report

Capacitor Version

💊 Capacitor Doctor 💊

Latest Dependencies:

  @capacitor/cli: 5.0.4
  @capacitor/core: 5.0.4
  @capacitor/android: 5.0.4
  @capacitor/ios: 5.0.4

Installed Dependencies:

  @capacitor/cli: 5.0.4
  @capacitor/core: 5.0.4
  @capacitor/android: 5.0.4
  @capacitor/ios: 5.0.4

Platform(s)

• iOS / iPadOS

Current Behavior

HTML5 Video-Element from assets folder or blob url refuses to play.

Expected Behavior

HTML5 Video-Element should play normally

Code Reproduction

      <video [muted]="true"
             loop="loop"
             muted
             playsinline
             [attr.webkit-playsinline]="'webkit-playsinline'"
             [controls]="false"
             #video
             src="{{content}}"
      ></video>

Here, every possible attribute is used for making the video play automatically and in a loop. This does completely work in the Safari and Chrome browser.

Other Technical Details

This issue is only happening due to using a local url or blob url. In the given example, content does refer to the simple string "/assets/quickstart/example.mp4". The safari dev-tools show that the video is being loaded in different chunks:

In chrome dev-tools simply many errors are sent while trying to load the mp4:

Here, two of the video elements are loaded in chunks, but neither of them does play. When manually activating the controls and pressing the play button, the timeline on the button is very bugged and always extends the duration of the video.

One interesting fact: Videos do play in this way as soon as they refer to a complete existing HTTP-URL from an other server. It looks like it has to do something with the capacitor:// url.

Local addresses are working normally when using images. Only video tags are not loading.

npm --version output:

node --version output:

pod --version output (iOS issues only):

Additional Context

This did happen at first after updating to Capacitor v5 from v4. It seems some mechanics changed here.

At least when using the local urls, it has to do something with the range requests: #1343

Hope someone can help me 😓

[JaHollTV]

Hey there,
i have same problem with a simmilar usecase. Only with iOS

[simaxme]

Hello, i have to give one small update: Android now works by using a workaround

• i was able to manually fetch the video and provide the video tag with a reference to the corresponding blob. This did work perfectly.
• I found this solution from the issue: Android range requests #5956

For the next person facing this: We circumvent the issue by downloading the media file without streaming (using Angular HTTP service, fetch() would probably also work) and map it to a resource URL (URL.createObjectURL(blob)) that we point our media elements to.

iOS still does not work with this solution. Although i have preloaded the video, safari keeps trying to load the blob in small parts:

[simaxme]

Next comment: I also got it working in iOS and iPadOS:

While createObjectURL() causes Safari trying to load the video in chunks, dataURLs are not causing this weird issue and are working perfectly when using videos. The only downside on this part is the data limitation of around 2Mb.

In our application this is not important as the videos reach a maximum of 3sec playtime.

Although for me this issue is fixed, i will keep it open as these described things are complete workarounds that will not work in any case.

[Ionitron]

This issue may need more information before it can be addressed. In particular, it will need a reliable Code Reproduction that demonstrates the issue.

Please see the Contributing Guide for how to create a Code Reproduction.

Thanks!
Ionitron 💙

[jansgescheit]

I am running in similar failure on Capacitor 4!

💊   Capacitor Doctor  💊 

Latest Dependencies:

  @capacitor/cli: 5.0.4
  @capacitor/core: 5.0.4
  @capacitor/android: 5.0.4
  @capacitor/ios: 5.0.4

Installed Dependencies:

  @capacitor/core: 4.8.0
  @capacitor/cli: 4.8.0
  @capacitor/ios: 4.8.0
  @capacitor/android: 4.8.0

[success] iOS looking great! 👌

In my case i download the Videos with angular http.get as a blob and create with URL.createObjectURL the object url. This works fine on a desktop browsers and sometimes also on native! But i discovered problems on iOS / iPadOS.

The created Object URL's are prefixt with blob:capacitor://localhost/. In this case the HTMLVideo Player shows a blank Video.

if i remove capacitor:// from URL to blob:localhost/6310f486-da40-423d-95b9-c96253a00555 the video plays as expected.

[Miguelmcanabal]

Im managing the same issue on Capacitor 5 in a 10th gen iPad with iOS 16.4.

   Capacitor Doctor   

Latest Dependencies:

  @capacitor/cli: 5.0.4
  @capacitor/core: 5.0.4
  @capacitor/android: 5.0.4
  @capacitor/ios: 5.0.4

Installed Dependencies:

  @capacitor/cli: 5.0.4
  @capacitor/core: 5.0.4
  @capacitor/ios: 5.0.4
  @capacitor/android: 5.0.4

I cannot reproduce videos from Angular assets, video player fails and it crashes the iPad gallery! After trying to play a video, if i try to open a video in iOS gallery, it wont play either. Its a weird behaviour to be honest.

[digaus]

Same issue here. Workaround is to use the Filesystem and Uri but thats not a great solution.

I could provide a demo project if needed?

[jansgescheit]

Same issue here. Workaround is to use the Filesystem and Uri but thats not a great solution.

I could provide a demo project if needed?

I had also tried that way, but that had not worked either. Would be nice if you could share a few lines of code.

[digaus]

Same issue here. Workaround is to use the Filesystem and Uri but thats not a great solution.
I could provide a demo project if needed?

I had also tried that way, but that had not worked either. Would be nice if you could share a few lines of code.

                const url: string = './assets/getreide.mp4' 
                const path: string = 'videos/getreide.mp4';
                const dir: ReadFileResult = await Filesystem.readFile({
                    path,
                    directory: Directory.Data,
                }).catch((err: unknown) => { console.error(err); return null; });
                if (!dir) {
                    const v: Blob = await fetch(url).then((val: Response) => val.blob());
                    await writeBlob({
                        path,
                        directory: Directory.Data,
                        blob: v,
                        fast_mode: true,
                        recursive: true,
                    });
                    
                }
                const directory: GetUriResult = await Filesystem.getUri({
                    path,
                    directory: Directory.Data,
                }).catch((err: unknown) => { console.error(err); return null; });
                if (directory) {
                    const fileSrc: string = Capacitor.convertFileSrc(`${ directory.uri }?v=${Date.now()}`);
                    return this.myDomSanitizer.bypassSecurityTrustResourceUrl(fileSrc);
                }

writeBlob is imported from capacitor-blob-writer

I needed to make sure to only write the blob once, otherwise it stops working after a while (only restarting iPhone fixed that)

[Ionitron]

This issue may need more information before it can be addressed. In particular, it will need a reliable Code Reproduction that demonstrates the issue.

Please see the Contributing Guide for how to create a Code Reproduction.

Thanks!
Ionitron 💙

[Ionitron]

It looks like this issue didn't get the information it needed, so I'll close it for now. If I made a mistake, sorry! I am just a bot.

Have a great day!
Ionitron 💙

[simaxme]

Wow, you have the best bot ever . This Issue is real and needs to be adressed!

[jansgescheit]

Wow, you have the best bot ever . This Issue is real and needs to be adressed!

I thought so too

[simaxme]

If there is no response in this week, i will open a new issue with the same problem. The problem is obvious and needs to be adressed. It would be nice if someone could respond to avoid this unnecessary work.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.