Why does not my HTML5 website show the VIDEO tag on an iPhone?


I'm making a website that uses videos, with the VIDEO label; I've tried it on PCs, iPads, iPhones and Android and Windows phones. In all it is shown correctly, less in iPhone (iOS 10); showing the poster image with a 'play' crossed out.

The code is as follows:

<video id="myVideo" poster="img/portada.jpg" autoplay="autoplay" loop muted>
       <source src="video/portada.webm" type="video/webm" />
       <source src="video/portada.mp4" type="video/mp4" />

In some places I have seen that it can be a problem of codecs in old iPhone, but this in an iPhone 7; even so I have tried to regenerate the video with other codecs and the same thing is happening.

However, the idea of this website is that when accessing from a mobile phone it does not show videos but images (the one indicated in the 'poster' parameter), so that in jQuery I detect the screen size and if it is smaller of a certain size I eliminate the source of the video, like this:

var video = document.getElementById('myVideo');
  video.src = "";

Doing this works for me on all the devices mentioned, except for iPhones (that is, if you change the video by the poster image, but you add the crossed out logo, which is what I need not to leave .)

Why can it be ?; Can you do it more elegant ?

Thank you very much

asked by E. Benito 19.04.2017 в 09:05

1 answer


I think what Safari shows you is an indication for the visitor to know that there is a video but that it can not be played.

Why, instead of replacing the video sources, do you not substitute the video tag with another image?

answered by 28.04.2017 в 00:45