问题
I'm trying to dynamically change the video source using javascript. I have a webpage with a <video> element in it that shall play a HLS stream. This works, but I'm unable to change the video dynamically from script.
I'm really stuck on this. I could maybe workaround it by using an iframe, but that introduces other problems.
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?
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?
Update: Following the advice of aldel I have updated the minimal sample to:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TestPage</title>
<script type="text/javascript">
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();
}
</script>
</head>
<body id="body">
<div id="mainDiv">
<video id="vid" idth="260" height="208" controls src="http://10.42.120.25/hls/cam01.m3u8" type="application/x-mpegurl">No support for video</video>
</div>
<div>
<input type="button" name="Cam01" value="Cam01" onclick="changeVideoSrc('http://10.42.120.25/hls/cam01.m3u8');">
<input type="button" name="Cam02" value="Cam02" onclick="changeVideoSrc('http://10.42.120.25/hls/cam02.m3u8');">
</div>
</body>
</html>
Unfortunately, this code is still not working using an iPad. It works fine on Android devices, but not on i-devices.
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.
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.
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.
Also very interesting: Everything works fine if I do not use a HLS source, but just a simple mp4, with type='video/mp4'. Then I can switch the sources without any problems on the iPad too.
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.
回答1:
You're changing the src attribute of the video element, not the source element inside it, so the source element still has its original src attribute. I'm not even sure if there's a "correct" thing for the browser to do in this case, so it's not surprising that different browsers do different things.
You should set the value on the source element, not the video element.
Or else don't use a source element in the first place; just set the src attribute of the video tag. I think this should be fine since you only have one potential stream URL at a time anyway (the source tag is for when you have different encodings of the same video content and the browser needs to choose the one that it can handle). If you do it this way, you also don't need to call .load() when you change the src.
(If you do keep the source element, and change the URL on that element, I'm pretty sure you still need to call .load() on the video element, not the source element.)
来源：https://stackoverflow.com/questions/28219611/changing-the-hls-video-source-of-a-html5-video-element-for-i-devices