amp-videoタグについてマウスホバー時の動画再生について

amp-videoタグでマウスホバーした際に動画を再生したいのですが、上手く動画が再生してくれません。
タイミングによっては再生されるのですが、原因がわかるかたご教示いただけますと幸いです。
triggerは反応しているのですが、動画が再生してくれません。
単純にマウスでクリックしたときは再生されますが、強制的にtriggerでクリックをすると上手く再生されません。

html
1<!doctype html>
2<html ⚡>
3  <head>
4    <meta charset="utf-8">
5    <title>AMP動画テスト</title>
6    <link rel="canonical" href="./regular-html-version.html">
7    <meta name="viewport" content="width=device-width">
8    <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
9    <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
10    <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
11
12    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
13    <script async src="https://cdn.ampproject.org/v0.js"></script>
14
15  </head>
16  <body>
17   
18    <div class="footer">
19
20        <amp-video id="footer"
21                layout="responsive"
22                src="./video/amp_nagata.mp4"
23                width="1920px"
24                height="1080px"
25                layout="fill"
26                loop=""
27               >
28        </amp-video>
29          <div class="video-player">
30        <div id="myOverlay" class="click-to-play-overlay">
31          <button  class="play-icon" role="button" tabindex="0" on="tap:myOverlay.hide, footer.play">test</button>
32        </div>
33        
34	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
35        <script>
36          $(function(){
37            $(window).on('load', function() {
38              $("#footer").on("hover",function(){
39                $('#myOverlay').find('button').trigger('click');
40              });
41            });
42          });
43        
44        </script>
45      </div>
46    </div>
47  </div>
48  </body>
49</html>