Adobe Animate video for mobile

Question

I'm working on an HTML5 banner in Adobe Animate. In this banner, I am using a video. I know that video can't autoplay on iPhone and iPad, so I just want to show a static image, but I don't know how?

Until now i used the "poster-image" of a still frame from the clip, however, it shows a play icon on top of the image.

I hope you can help!

score 0 · Answer 1 · answered Jul 19 '17 at 13:39

IoS devices will only play media on user interaction, therefore in this case you will need to have a ipad/iphone detector to toggle the visibility of your image.

Here is what I imagine you would do: Create an image and attach over the video ( make sure is absolute )

Then add this code in your js

 // thanks to: https://stackoverflow.com/questions/9038625/detect-if-device-is-ios
 function iOS() {
    var iDevices = [
    'iPad Simulator',
    'iPhone Simulator',
    'iPod Simulator',
    'iPad',
    'iPhone',
    'iPod'
  ];

  if (!!navigator.platform) {
    while (iDevices.length) {
      if (navigator.platform === iDevices.pop()){ return true; }
    }
  }

  return false;
}
if(IOS()) document.getElementById("YOUR_IMAGE_ID").style.display = "block";

This should do, please test it

Adobe Animate video for mobile

1 Answers1