HTML5 video, different poster image for devices without autoplay

0
votes

  • The video is being used as a background video.

  • The poster image needs to be the first frame of the video so when the video is loading there are no jumps.

  • On certain devices, particularly iOS where autoplay of videos is disabled, can I choose a different image to display?

SUMMARY: Can I show a different poster image if autoplay is disabled?

Thank you.

Note: I'm aware I can hide/show things with media queries, but this doesn't work too well with the likes of the iPad Pro around.

If possible I'd like a solution that doesn't require detecting different devices.

1
javascriptjqueryiosvideohtml5-video

1 Answers

0
votes

I don't know the specifics of how you'd do it, but off the top of my head, I'd suggest running a detection script at some point beforehand. Use a "dummy" video (perhaps something like a 1x1px blank video in a data-URI to ensure speed and synchronicity) with autoplay on, then check to see if it's playing or not after shortly after it renders. Then flag accordingly depending on whether it plays or not.