HTML5 Video works in all devices except iPhone

Asked Dec 28 '18 at 09:25

Active Dec 28 '18 at 10:36

Viewed 45 times

I'm trying to make header video in my website with html5 video, and this works very well in all devices except iPhone.

Firstly I have added video link like:

<video class="homepage-video" loop autoplay muted="" src="<?php the_field('video_url'); ?>"  poster="<?php the_field('image_head'); ?>" id="homepage-video" type="video/mp4">

</video>

and doesn't worked.

Then I researched for any solution and some developers proposed to write the code like this:

<video class="homepage-video" loop autoplay muted="" poster="<?php the_field('image_head'); ?>" id="homepage-video" type="video/mp4">
<source src="<?php the_field('video_url'); ?>" type="video/mp4" />
</video>

Video is not playing on iphone, the result is just image from poster="image here"

edited Dec 28 '18 at 10:36

asked Dec 28 '18 at 09:25

alar

What codec? https://stackoverflow.com/questions/1535836/video-file-formats-supported-in-iphone – el.pescado - нет войне Dec 28 '18 at 09:32
@el.pescado is this framework for ios? Can I use for web development? – alar Dec 28 '18 at 09:36
He's asking what codec the video is encoded with…! – deceze Dec 28 '18 at 09:42
Hmm, it's mp4 video – alar Dec 28 '18 at 09:46
I converted video in mp4 VC: H.264, but still is the same issue – alar Dec 28 '18 at 10:38
are you sure about the url of the video itself, or anything from your server preventing to read the video – Joel Wembo Dec 28 '18 at 15:00
@WemboMulumba yes I'm sure. Because video works perfect on all browsers, just in iPhone, and in Microsoft Edge – alar Dec 28 '18 at 16:10

HTML5 Video works in all devices except iPhone

0 Answers0