title: Assigning different streams to `srcObject` of a video element
body: <p>I have a <code>video</code> element.  I have multiple <code>streams</code> captured by <code>navigator.getUserMedia</code>.</p>
  
  <p>I can assign <code>srcObject</code> successfully the first time: </p>
  
  <pre><code>previewVideoElement.srcObject = stream;
  </code></pre>
  
  <p>However if I re-assign a different stream to <code>srcObject</code> later (same element) then the stream doesn't work (no errors, blank video).  How can I do this without recreating video elements each time?</p>
  
  <p>Edit: trying this fails as well: </p>
  
  <pre><code>const previewVideoElement = document.getElementById("new-device-preview");
  previewVideoElement.pause();
  previewVideoElement.srcObject = stream;
  previewVideoElement.play();
  </code></pre>
  
  <p>Edit: calling this works a few times, but then fails with <code>The play() request was interrupted by a call to pause()</code>.  Without <code>pause</code> I get <code>The play() request was interrupted by a new load request.</code>.</p>
  
  <pre><code>previewVideoElement.pause();
  previewVideoElement.srcObject = stream;
  previewVideoElement.load();
  previewVideoElement.play();
  </code></pre>
  
  <p>Edit:  even this heap of garbage doesn't work: </p>
  
  <pre><code>const previewVideoElement = document.getElementById("new-device-preview");
  //previewVideoElement.pause();
  previewVideoElement.srcObject = stream;
  previewVideoElement.load();
  const isPlaying = previewVideoElement.currentTime &gt; 0 &amp;&amp; !previewVideoElement.paused &amp;&amp; !previewVideoElement.ended &amp;&amp; previewVideoElement.readyState &gt; 2;
  if (!isPlaying)
      setTimeout(function () {
           previewVideoElement.play();
      }, 500);
  </code></pre>
  
  <p>The only thing I could get working reliably:</p>
  
  <pre><code>var previewVideoElement = document.getElementById("new-device-preview");
  if (previewVideoElement.srcObject) {
        $("#new-device-preview-container").empty();
        $("#new-device-preview-container").html('&lt;video autoplay class="new-device-preview" id="new-device-preview"&gt;&lt;/video&gt;')
  }
  previewVideoElement = document.getElementById("new-device-preview");
  previewVideoElement.srcObject = stream;
  </code></pre>