change player initialization to fix DASH double captions

* switches from class-based "automatic start" of MediaElement.js
instantiation to jQuery-based instantiation. this is necessary
as we need to pass dash.js configuration options in to prevent
it from rendering captions for us.
* add `crossorigin="anonymous"` to `<video>` tag to allow a
browser to load the webvtt file from wowza.lib.b.e.; otherwise
this would be a cross-domain request
* remove `default` from `<track>` tag to prevent captions from
showing automatically.

app/views/player/_audio.html.erb

@@ -1,5 +1,5 @@
 <!--suppress HtmlUnknownAttribute -->
 <%# should match app/assets/stylesheets/application.scss %>
-<audio id="audio-<%= index %>" width="100%" height="40px" class="mejs__player" preload="<%= preload %>" controls>
+<audio id="audio-<%= index %>" width="100%" height="40px" preload="<%= preload %>" controls>
   <source src="<%= track.hls_uri %>" type="<%= BerkeleyLibrary::AV::Track::SOURCE_TYPE_HLS %>"/>
 </audio>

app/views/player/_player_head_additional.erb

@@ -31,6 +31,20 @@
       function rewrite_src_tags() {
           $("source,track").each(rewrite_src);
       }
+
+      function initialize_players() {
+          $("audio,video").mediaelementplayer({
+            iconSprite: "/assets/icons/mejs-controls.svg",
+            success: function (mediaElement, originalNode, instance) {
+                if (typeof dashjs !== "undefined") {
+                    // workaround for mediaelement/mediaelement#2964
+                    mediaElement.dashPlayer.updateSettings({
+                        streaming: { text: { defaultEnabled: false } },
+                    });
+                }
+            }
+          }
+      )}
   </script>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/mediaelement-and-player.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/mediaelementplayer.css">

app/views/player/_record.html.erb

@@ -38,6 +38,7 @@
 
   <script>
       rewrite_src_tags();
+      initialize_players();
   </script>
 
   <% unless record.description.blank? %>

app/views/player/_video.html.erb

@@ -1,13 +1,13 @@
 <%# TODO: figure out how to programmatically set height with JavaScript, or something %>
 <%# should match app/assets/stylesheets/application.scss %>
-<video id="video-<%= index %>" width="100%" height="270" class="mejs__player" preload="<%= preload %>" data-mejsoptions='{"iconSprite": "/assets/icons/mejs-controls.svg"}' controls>
+<video id="video-<%= index %>" width="100%" height="270" preload="<%= preload %>" controls crossorigin="anonymous">
   <% if browser.platform.ios? || browser.device.ipad? %>
     <source src="<%= track.hls_uri %>" type="<%= BerkeleyLibrary::AV::Track::SOURCE_TYPE_HLS %>"/>
   <% else %>
     <source src="<%= track.mpeg_dash_uri %>" type="<%= BerkeleyLibrary::AV::Track::SOURCE_TYPE_MPEG_DASH %>"/>
     <% if (dash_vtt_uri = track.dash_vtt_uri) %>
       <%# TODO: should we also be adding a caption track for HLS streaming to iPhone/iPad? %>
-      <track default kind="captions" srclang="en" src="<%= dash_vtt_uri %>"/>
+      <track kind="captions" srclang="en" src="<%= dash_vtt_uri %>"/>
     <% end %>
   <% end %>
 </video>