Mobile video created with Adobe Animate

Currently, I am designing an HTML5 banner in Adobe Animate that includes a video element. However, due to restrictions on iPhone and iPad devices, the video cannot autoplay. As a workaround, I would like to display a static image instead. Can anyone provide guidance on how to achieve this?

Previously, I have used the "poster-image" attribute with a still frame from the video clip. However, it displays a play icon over the image which is not the desired effect.

Your assistance in resolving this issue would be greatly appreciated.

javascriptcsshtmljquery-animateanimate-cc

Answer №1

When it comes to playing media on IoS devices, they will only do so upon user interaction. As a result, you'll need an iPad/iPhone detector in order to toggle the visibility of your image.

Here is my suggestion for how you can achieve this: Start by creating an image and positioning it over the video (ensure it's set to be absolute)

Next, include the following code in your JavaScript file:

 // Credit goes 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";

Give this solution a try and see if it works as expected.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve information from jsonObject

Can anyone help me with counting the number of passes and fails for each subject in a JSON object array? Here is an example: [{"Subject":"Maths","status:"Pass"},{"Subject":"Maths","status:"Pass"}, {"Subject":"Maths","status:"Fail"},{"Subject":"Maths ...

javascriptjson

Create a unique design using two vertical sections with Bootstrap 5

I have been grappling with this issue for the past day, and I would greatly appreciate any assistance I can get! I am attempting to achieve a design similar to this using Bootstrap 5. Here is the goal I am aiming for While I have a good handle on creating ...

htmlbootstrap-5

Attempting to import a npm module that is not defined

I recently released an npm package. It is working perfectly when accessed via the global variable window.Router in the browser, but I'm facing issues when trying to import it using ES modules in a Meteor application. It keeps returning undefined... ...

javascriptnode.jsmeteornpmwebpack

Use JavaScript to dynamically populate dropdown list options with array elements

I attempted to populate a dropdown list with array elements using javascript, but I encountered issues. I referred to the following links for assistance: JavaScript - populate drop down list with array use a javascript array to fill up a drop down se ...

javascripthtml

Troubleshooting problem with populating data in Mongoose Database

Here is the code snippet: app.get("/cart", checkAuthentication, function (req, res) { Orders.find({ user: req.user._id }) .populate('user') .populate('order') .exec((err, orders) => { console.log(orders); ...

javascriptnode.jsmongodbexpressmongoose

Analyzing Varied Date Formats

I'm looking to create a function in AngularJS that checks if a given date is after today: $scope.isAfterToday= function(inputDate){ if(inputDate > Date.now().toString()){ return true; } else { return false; } } The iss ...

javascriptangularjsdate

Shift the checkbox label over to the left with just CSS

I am faced with the following code snippet: <div> <span> <input type="checkbox"> <label>I desire this to appear on the left-hand side</label> </span> </div> My goal is to shift the label to the left side of ...

htmlcsscheckboxlabel

iOS7 webkit introduces a new feature called span word break

After upgrading my phone to iOS7 today, I came across a strange issue. (blog.niwyclin.org) This is just a test post on my website Everything looks good on the desktop browser. When I used Responsivator to check, it appeared perfect, like this (i.minus.c ...

htmlioscsswebkitios7

Design an HTML button/label with text and a starting width of zero

I'm attempting to design HTML buttons and labels with text that initially have zero width. Once inserted, they should smoothly transition to a visible state. I've tried adjusting the initial width and min-width style properties without success. ...

htmlcsswidthdart

The range filter is exclusive to the initial controller

My range filter (see code below) is only working on my first controller. I have added the same filter to other controllers in the app.js and HTML, but it's not functioning for some reason. I checked the console for errors, but there are none. Here i ...

javascripthtmlangularjs

Show additional information when a row in the Bootstrap Vue table is clicked

I am attempting to create a unique user experience by displaying row details when a row is clicked, rather than clicking on a button as described in the documentation. However, the documentation lacks specific instructions on how to implement this feature. ...

javascriptvue.jsbootstrap-vue

Retrieving the background image URL from inline CSS using jQuery

I'm looking for a link similar to url(img/bg/06.jpg), but when using jQuery, I get a longer link like url("file:///D:/WORKING%20FILE/One%20Landing%20Page/version/img/bg/06.jpg") https://i.stack.imgur.com/8WKgv.png Below is the code snippet in questi ...

jqueryhtmlcss

Get an Object Array and assign it to a state Array variable after filtering

Here is a JSON Input that I will be filtering by orderId and then setting to a state variable. [{"orderId":3,"userId":3,"firstName":"Amal","lastName":"kankanige","contactNo":"011-3456787","status":"pending","deliveryAddress":"No:24/c,Anders Road,Wijerama, ...

javascriptreactjs

Having issues with django-autocomplete-light triggering JavaScript errors

My implementation of django-autocomplete-light is causing some issues with rendering autocomplete options. There is a section on the website where it functions perfectly, but in another section, it only works partially. The autocomplete options display c ...

javascriptdjangodjango-autocomplete-light

Prevent reloading the page when adding a flash element using JavaScript (jQuery)

Here is the function I am working with: function onVideo(vchat, idUser){ $('#videollamada').html('<div class="videollamada">'+ '<div align="right">'+ ...

javascriptjqueryflash

Removing a value from an array contained within an object

I have a scenario in my task management application where I want to remove completed tasks from the MongoDB database when a logged-in user marks them as done. Below is the snippet of code for my Schema. const user = new mongoose.Schema({ username : Str ...

javascriptarraysexpressmongoose

In order to ensure a valid JSON for parsing in JavaScript, one must reverse the usage of single quotes and double quotes. This adjustment

Received an API response structured like this: [{'name': 'men', 'slug': 'men'}, {'name': 'women', 'slug': 'women'}] After stringifying: const data = JSON.stringify(resp) " ...

javascriptjsonreactjsjavascript-objects

Complete Form Validation Issue Unresolved by Jquery Validation Plugin

I'm facing an issue with the jQuery validation plugin while attempting to validate a form. Strangely, it only works for one input field. Can anyone suggest a solution? <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.valid ...

javascriptjqueryhtmlcssvalidation

Ways to Implement an Origin's First-Party Cookies While Using it as a Third-Party

Imagine I am the owner of a website called "treat1creator.com". I want my clients, who are also website owners, to send HTTP requests to my server that contain cookies I have generated. Here is how it works: User "Sally" visits my site at treat1creator.co ...

javascripthttpcookiescross-domainthird-party-cookies

Ways to obtain data in JavaScript function from HTML

Struggling to pass the key from a database query in HTML using PHP to a JavaScript function? You're not alone. The challenge lies in passing the field_id to the updateRecords() JS function through the onClick() event of an HTML button. Previously, se ...

javascriptphphtmlajax