Update player API to work with new embedded player

app/views/master_files/_player.html.erb

@@ -19,18 +19,19 @@ Unless required by applicable law or agreed to in writing, software distributed
 <% content_for :page_scripts do %>
 
   <script>
-    <%# Add an offscreen button to allow for proper keyboard navigation through player controls %>
-    $('#content').append('<button id="after-player" style="position:absolute;top:-1000px"></button>')
-
     window.addEventListener('message', function(event) {
       var command = event.data.command;
-      if (command=='play') currentPlayer.play();
-      else if (command=='pause') currentPlayer.pause();
-      else if (command=='toggle_loop') currentPlayer.loop = !currentPlayer.loop;
-      else if (command=='set_offset') currentPlayer.setCurrentTime(event.data.offset); // time is in seconds
-      else if (command=='get_offset') event.source.postMessage({'command':'currentTime','currentTime':currentPlayer.getCurrentTime()}, event.origin);
+      let embeddedPlayer = videojs(document.getElementById('video-js-embed-<%= @master_file.id %>_html5_api'))
+
+      if (command=='play') embeddedPlayer.play();
+      else if (command=='pause') embeddedPlayer.pause();
+      else if (command=='toggle_loop') {
+        embeddedPlayer.loop() ? embeddedPlayer.loop(false): embeddedPlayer.loop(true);
+        embeddedPlayer.autoplay() ? embeddedPlayer.autoplay(false) : embeddedPlayer.autoplay(true);
+      }
+      else if (command=='set_offset') embeddedPlayer.currentTime(event.data.offset); // time is in seconds
+      else if (command=='get_offset') event.source.postMessage({'command':'currentTime','currentTime':embeddedPlayer.currentTime()}, event.origin);
     });
-
   </script>
 
   <style>