Is there a way to control which frame an APNG starts from using javascript?

Question

I'm trying to make an APNG play on mouseover, then get the frame the APNG is on on mouseout, then use that frame to play a reversed APNG so that there's a smooth transition. I tried searching around but couldn't really find much.

Basically I want to do something like this:

<img src="regular_png.png" id="apng">

document.getElementById("apng").onmouseover = function() {
  this.src = "apng1.png";
}
document.getElementById("apng").onmouseout = function() {
  // Get the current frame the apng is on
  this.src = "apng2.png";
  // Start apng2.png from total # of frames - current frame from apng1.png
}

Answer 1

You could convert the APNG to a PNG[], the elements of which are displayed (counter)sequentially by way of canvas.drawImage(...), and mediated by canvas.onmouseover and canvas.onmouseout.