CODEWITHSUNDEEP
htmlioshtml5-videowebm
APorter1031
APorter1031

Reputation: 2256

HTML5 Video not playing on IOS devices but works fine everywhere else

I am trying to create a front page that autoplays a video with full width and full height. It works fine on my machine (Linux [name] 4.15.0-33-generic #36-Ubuntu SMP Wed Aug 15 16:00:05 UTC 2018 x86_64 x86_64 x86_64 GNU/Linux) in FireFox and Chrome. When testing on my iPhone and mac the video is replace with a blank screen.

I read online that IOS dropped support for video autoplay. Is there a way to get around this?

Is WebM support for IOS?

<video autoplay loop muted playsinline>
  <source src="static/video/video.webm" type="video/webm"/>
  Your browser does not support the video tag.
</video>

Upvotes: 4

Views: 19562

Answers (5)

Devosaan
Devosaan

Reputation: 21

<video playsinline muted>

Hey all the combination with playsinline and muted did the trick for me.

It is worth a try.

Upvotes: 2

artico
artico

Reputation: 376

Solution for all browsers: https://stackoverflow.com/a/66344245/3087186 ...

<video controls autoplay loop muted playsinline>
    <source src="https://example.com/my_video.mov" type="video/mp4">
</video>
  1. Convert video to .MOV and 2) type="video/mp4" in the same tag. Working!

Upvotes: 2

Siri
Siri

Reputation: 106

Hey all just thought I would put a solution out there. I was just trying to build a super simple portfolio and hosted it on Github pages. Unfortunately, there is no access to the server to configure anything. I tried everything. I was able to get it to work by just hosting the videos on Vimeo. I was able to do this all with the free version. You can then embed with their iframe. this worked flawlessly on all platforms and vimeo doesnt have annoying ads.

It is worth a try.

Upvotes: 0

subindas pm
subindas pm

Reputation: 2784

<video autoplay loop playsinline>

Please add playsinline to the video tag, it's working fine form me

Upvotes: 5

APorter1031
APorter1031

Reputation: 2256

I was able to fix my problem by adding the following sources to the video tag:

<video autoplay loop muted playsinline>
    <source src="devstories.webm" 
          type='video/webm;codecs="vp8, vorbis"' />
    <source src="devstories.mp4" 
          type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
  Your browser does not support the video tag.
</video>

Upvotes: 6

Related Questions