capacitor: bug: HTML5 video element refuses to play on all devices after update although it works on browser versions of Safari and Chrome
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: https://github.com/ionic-team/capacitor/issues/1343
Hope someone can help me 😓
About this issue
- Original URL
- State: closed
- Created a year ago
- Reactions: 3
- Comments: 15 (5 by maintainers)
Wow, you have the best bot ever . This Issue is real and needs to be adressed!
Im managing the same issue on Capacitor 5 in a 10th gen iPad with iOS 16.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.
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.
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 💙
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 💙
I had also tried that way, but that had not worked either. Would be nice if you could share a few lines of code.
I am running in similar failure on Capacitor 4!
In my case i download the Videos with
angular http.getas a blob and create withURL.createObjectURLthe 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 toblob:localhost/6310f486-da40-423d-95b9-c96253a00555the video plays as expected.