How do I get a gif wihtin an Apple Books e-book to touchstart?

Question

I am trying to get a .gif to work via touch start. Specifically, this gif is placed within an e-book intended to work with Apple Books.

I followed the guide here: How to play a gif only on onclick in javascript ... This worked great on Windows as well as on Android e-book readers for starting the .gif on click as well as on touch. However, it's a no-go for Apple Books.

For reference, my e-book creator software (Kotobee Author) allows for JS, HTML, and CSS. Alas, I am new to all of this (obviously).

The working/not working code looks like this:

number = 0;
var animations = ['https://image.ibb.co/epha5A/giphy.gif',
  'https://image.ibb.co/epha5A/giphy.gif',
  'https://image.ibb.co/epha5A/giphy.gif'
];


function character() {

  image = document.getElementById('hiddenimageid');
  image.src = animations[number];

}
.board {
  position: absolute;
  top: 4.3vh;
  left: 10vw;
  cursor: pointer;
}

.board img {
  width: 35.3vw;
  height: 45.5vh;
  border-radius: 15%;
}

<body>
  <div class="board">
    <img src=" https://i.stack.imgur.com/pqbOp.png" id="hiddenimageid" onclick="character();"/>
  </div>
</body>

I tried trading onclick="character();" with ontouchstart="character();"

Unfortunately, this didn't work either. Can somebody guide me as to the correct way to go about making this happen?

How do I get a gif wihtin an Apple Books e-book to touchstart?

0 Answers0