更改智能设备的html5视频元素的HLS视频源 [英] Changing the HLS Video Source of a html5 video element for i-Devices
问题描述
我正在尝试使用javascript动态更改视频源.我有一个包含<video>元素的网页，该网页将播放HLS流.可以，但是我无法通过脚本动态更改视频.
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.
我真的很坚持.我也许可以通过使用iframe解决此问题，但这会带来其他问题.
I'm really stuck on this. I could maybe workaround it by using an iframe, but that introduces other problems.
有人提示如何在智能设备上使用视频标签来更改HLS-Stream，而不必关闭整个页面并打开另一个页面吗?
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?
我知道移动智能设备只能播放一个视频，但是，如果视频源是HLS，则真的不可能动态更改视频源吗?
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?
更新: 遵循aldel的建议，我已将最小样本更新为:
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>
不幸的是，此代码仍无法在iPad上使用.它可以在Android设备上正常运行，但不能在智能设备上运行.
Unfortunately, this code is still not working using an iPad. It works fine on Android devices, but not on i-devices.
在iPad上，我仍然只能播放一种HLS信号源: 如果我使用Safari到达iPad上的页面，则可以单击视频控件的播放按钮，然后视频开始播放.如果再单击"Cam02"，视频将停止播放，但是无法播放新视频:我从没有在野生动物园的视频控件上看到播放按钮.在服务器端，我可以看到Safari正在请求第二台摄像机的m3u8文件.但从未要求过任何细分.
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.
如果我在更改src-Attribute之后调用load()会变得更加有趣:我在服务器上看到将开始请求第二个摄像机的段.只是视频窗口保持黑屏-从未显示过视频.
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.
此load()还有一个有趣的效果:如果我到达iPad上的页面，并且不开始播放Cam01，而是单击按钮Cam02，切换到Cam02，然后调用Load，则可以开始cam02的播放
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.
也很有趣:如果我不使用HLS源，而只是一个简单的mp4，并且类型为'video/mp4'，一切都可以正常工作.然后，我也可以在iPad上毫无问题地切换信号源.
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.
还有其他提示吗?很快我要说的是，苹果公司只是无法为HLS提供适当的支持-尽管他们已经发明了它. Chrome可以更好地处理它.另外请注意，iPad上的Chrome也存在完全相同的问题.
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.
推荐答案
您要更改视频元素的src属性，而不是其中的source元素，因此source元素仍具有其原始的src属性.在这种情况下，我什至不确定浏览器是否可以执行正确"的操作，因此不同的浏览器执行不同的操作也就不足为奇了.
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.
否则，首先不要使用source元素；只需设置视频标签的src属性即可.我认为应该没问题，因为无论如何一次您只有一个潜在的流URL(当您对同一视频内容使用不同的编码并且浏览器需要选择一种可以处理的URL时，源标记就是适用的).如果采用这种方式，则更改src时也不需要调用.load().
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.
(如果您确实保留了source元素，并更改了该元素的URL，我敢肯定您仍然需要在video元素而不是source元素上调用.load().)
(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.)
这篇关于更改智能设备的html5视频元素的HLS视频源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
