Show Image Instead of Video on iPhone?

user_14284475 0
Viewed 169

I'm making this website with video effects (like this) instead of images. I've added code like this:

<video muted autoplay playsinline src="path_to_video.mp4"></video>

However, iOS doesn't support the autoplay property, which makes the video stuck on its first frame. I want to display a alternative image instead of the video on iPhones and browsers that don't support autoplay.

Is there a way to do this? (with JavaScript of possible)

html5-video html javascript
2 Answers

If you're checking for the system not the screen ratio, then you can use navigator property.

and adjust your code to be like this

<video id="video-img" muted autoplay playsinline src="path-to-video"></video>

and in your js script

$(document).ready(function() {
  if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
    $('#video-img').replaceWith('<img src="path-to-img" >');
  }
});

Here is a working example on codepen

To check if the code working or not just change the if condition to be the opposite by adding an exclamation ! to the following (!navigator.userAgent.match(/(iPod|iPhone|iPad)/))

user_146623300

There is an alternative for 'autoplay'.

$("document").ready(() => {
  $("#vid").play()
})
<video muted autoplay playsinline src="path_to_video.mp4" id="vid"></video>

This should automatically run the video when the document loads. This should work on all browsers and IE versions higher than 9.0.

Admin1
Related