title: How to properly dispose of an HTML5 Video and close socket or connection
body: <p>I am building a web page with a list of video records.  Clicking on each video record opens a modal dialog on the same page with detail of the record and an HTML5 Video player.</p>
  
  <p>A user can open one video, close it, and open another as many times as they want.  However, on Chome specifically, after 3-5 videos, the browser starts hanging for upwards of two minutes while displaying a message "waiting for socket".</p>
  
  <p>Doing some reading, I have narrowed it to Chrome's inability to open more than 6 connections to the same host.</p>
  
  <p>I must be doing something wrong with how I dispose of the Media players.  I believe the socket remains open to the media for some period even though the html for the player has been removed from the dom.</p>
  
  <p>Using:
  Bootstrap,
  MediaElement.js,
  HTML5 Video,
  MVC,
  Controller returning "Range Request" of FilePathResult </p>
  
  <pre><code>// Handling Bootstrap Modal Window Close Event 
  // Trigger player destroy
  $("#xr-interaction-detail-modal").on("hidden.bs.modal", function () {
      var player = xr.ui.mediaelement.xrPlayer();
      if (player) {
          player.pause();
          player.remove();
      }
  });
  </code></pre>