title: Changing the HLS Video Source of a html5 video element for i-Devices
body: <p>I'm trying to dynamically change the video source using javascript. I have a webpage with a <code>&lt;video&gt;</code> element in it that shall play a HLS stream. This works, but I'm unable to change the video dynamically from script.</p>
  
  <p>I'm really stuck on this. I could maybe workaround it by using an iframe, but that introduces other problems.</p>
  
  <p>Has someone a hint on how to change the HLS-Stream using a video tag on an i-device without having to close the entire page and open another one?</p>
  
  <p>I know that the mobile i-Devices are limited to playback exactly one video - but is it really not possible to dynamically change the video source, if the video-source is HLS?</p>
  
  <p><strong>Update:</strong>
  Following the advice of aldel I have updated the minimal sample to:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;  
    &lt;title&gt;TestPage&lt;/title&gt; 
    &lt;script type="text/javascript"&gt;
    function changeVideoSrc(url)
    {
      var vid = document.getElementById("vid");
      vid.src = url;
      // Calling load() makes Safari request the segments, but still no video is being displayed:
      vid.load();
    }
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body id="body"&gt;
  &lt;div id="mainDiv"&gt;
   &lt;video id="vid" idth="260" height="208" controls src="http://10.42.120.25/hls/cam01.m3u8" type="application/x-mpegurl"&gt;No support for video&lt;/video&gt;
  &lt;/div&gt;
  &lt;div&gt;
   &lt;input type="button" name="Cam01" value="Cam01" onclick="changeVideoSrc('http://10.42.120.25/hls/cam01.m3u8');"&gt;
   &lt;input type="button" name="Cam02" value="Cam02" onclick="changeVideoSrc('http://10.42.120.25/hls/cam02.m3u8');"&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Unfortunately, this code is still not working using an iPad. It works fine on Android devices, but not on i-devices.</p>
  
  <p>I still can play only exactly one HLS-source on the iPad:
  If I reach the page on the iPad using Safari, I can hit the play-button of the video control and the video starts playing. If I then click on 'Cam02', the video stops playing, but no new video becomes playable: I never ever get a play button on the video-control inside safari. On the server-side, I can see that Safari is requesting the m3u8 file of the second camera. But no segment is ever requested. </p>
  
  <p>It gets more interesting if I do call load() after changing the src-Attribute: I see on the server will start requesting segments for the second camera. Just the video-window stays black - no video is ever displayed.</p>
  
  <p>This load() has an interesting other effect: If I reach the page on the iPad, and do not start playing Cam01, but click the button Cam02, to switch to Cam02, then call Load I can start the playback of cam02.</p>
  
  <p>Also very interesting: <strong>Everything works fine if I do not use a HLS source, but just a simple mp4</strong>, with type='video/mp4'. Then I can switch the sources without any problems on the iPad too.</p>
  
  <p>Anyone other hints? Soon I'm going to say that Apple is just unable to implement proper support for HLS - despite the fact that they have invented it. Chrome just handles it way better. Also note that Chrome on the iPad has exactly the same problem.</p>