Soldato
Does anyone have any links to resources on best practice for displaying/not displaying video backgrounds on mobiles?
My old approach was just to disable them on mobile and show an image instead, but a couple of newer phones (Note 9 and S8 for two) do play them. However iPhones - or at least the ones I have access to - don't. They therefore fallback to the poster, which I usually opt to have as the first still of the video as a preload.
However that still is often irrelevant to the content, or certainly not as good as another chosen image. BUT if I do that then those devices that can play the video have a horrible UX where you see an image for 1-5 seconds (or however long the video takes to load) before jumping to the video.
The <video> is in a wrapper that also has a backup image, but devices that can't load the video still show the element's poster, rather than the image behind.
Is there a way to check if a video element is able to be played, and only then disable it?
Any other tips?
My old approach was just to disable them on mobile and show an image instead, but a couple of newer phones (Note 9 and S8 for two) do play them. However iPhones - or at least the ones I have access to - don't. They therefore fallback to the poster, which I usually opt to have as the first still of the video as a preload.
However that still is often irrelevant to the content, or certainly not as good as another chosen image. BUT if I do that then those devices that can play the video have a horrible UX where you see an image for 1-5 seconds (or however long the video takes to load) before jumping to the video.
The <video> is in a wrapper that also has a backup image, but devices that can't load the video still show the element's poster, rather than the image behind.
Is there a way to check if a video element is able to be played, and only then disable it?
Any other tips?
