title: Confusing HTML video player behaviour while live streaming using DASH
body: <p>I'm live-streaming MPEG DASH video from a raspberry pi camera to an external website. The website only consists of a few basic HTML tags.</p>
  
  <pre><code>  &lt;script src="scriptFunctions.js"&gt;&lt;/script&gt;
    &lt;script src="scripts.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;main&gt;
      &lt;div id="videoArea"&gt; &lt;/div&gt;
  </code></pre>
  
  <p>The video element displaying the stream is loaded into the div using jQuery and AJAX from the scripts.js and scriptFunctions.js files. The <strong>scripts.js</strong> file looks something like this</p>
  
  <pre><code>$(document).ready(function() {
      getElements();
  </code></pre>
  
  <p>The <strong>scriptFunctions.js</strong> file contains the javascript functions with AJAX requests</p>
  
  <pre><code>function getElements() {
    $.get("response.php?getInfo", function(info) {
      if(info == "something") { loadVideoPlayer(); }
    });
  }
  
  function loadVideoPlayer() {
    $("#videoArea").load("response.php?getVideo");
  }
  </code></pre>
  
  <p>And the <strong>response.php</strong> file echos out the video player if the GET request matches</p>
  
  <pre><code>if(isset($_GET['getVideo'])) {
    echo '&lt;video data-dashjs-player 
                 controls autoplay
                 src="http://&lt;ip&gt;/dash/streamtest/index.mpd"
          &lt;/video&gt;';
  }
  </code></pre>
  
  <p>The problem is the video element randomly not playing the stream after page refresh. I've tried Firefox and Chrome where both browsers fail to play the content after page refresh. Firefox is the only browser showing some kind of feedback, which is seen in image 1. The Chrome video player just goes blank. Inspecting the video element source after a fail shows the address to the DASH manifest file.
  <a href="https://i.stack.imgur.com/5Lp0V.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5Lp0V.png" alt="image 1"></a></p>
  
  <p>If I CTRL + SHIFT + Refresh, there's a ~70% chance that the stream will show, this goes for both browsers. I do however get the same error now and then if I keep ctrl+shift+refresh-ing. Inspecting the video element now shows a BLOB source as seen in image 2, under.
  <a href="https://i.stack.imgur.com/6kBqw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6kBqw.png" alt="image 2"></a></p>
  
  <p>While troubleshooting this issue, I first tried moving the <code>&lt;video&gt;</code> element directly to the HTML file, removing all AJAX and jQuery. This completely removed the issue from both (all) browsers. I then tried moving <code>$("#videoArea").load("response.php?getVideo");</code> directly to the <strong>scritps.js</strong> file, instead of using the function call. This made Chrome able to normal refresh the page with a ~70% chance of success, while Firefox still wasn't able to. I could still CTRL+SHIFT+Refresh the page.</p>
  
  <p><strong>Update:</strong> The firefox video player error message seen above appears with the console message </p>
  
  <pre><code>HTTP “Content-Type” of “application/octet-stream” is not supported. Load of media resource http://&lt;ip&gt;/dash/streamtest_low/index.mpd failed.
  </code></pre>
  
  <p>Even on a successful page refresh, this error is displayed in the video player for a split second together with the above error output in the console. After follows the console output from Dash.js as the stream becomes watchable</p>
  
  <pre><code>[10] EME detected on this user agent! (ProtectionModel_21Jan2015) 
  [12] Streaming Initialized 
  [16] Playback Initialized 
  [16] [dash.js 2.6.7] MediaPlayer has been initialized 
  [18] Converted primaryVideo1 to dash.js player and added content: http://&lt;ip&gt;/dash/streamtest_low/index.mpd 
  [128] Parsing complete: ( xml2json: 26.0ms, objectiron: 12.0ms, total: 0.0380s) 
  [132] SegmentTimeline detected using calculated Live Edge Time 
  [132] MediaSource attached to element.  Waiting on open... 
  [134] Manifest has been refreshed at Sun Apr 01 2018 16:25:24 GMT+0200 (Vest-Europa (sommertid))[1522592724.974]  
  [164] MediaSource is open!
  </code></pre>