Question

我尝试使用javascript动态更改视频源。我有一个网页，里面有一个<video>元素，可以播放HLS流。这有效，但我无法从脚本中动态更改视频。

我真的坚持这个。我可以通过使用iframe来解决它，但这会引入其他问题。

是否有人提示如何使用i-device上的视频标签更改HLS-Stream，而无需关闭整个页面并打开另一个页面？

我知道移动i-Devices仅限播放一个视频 - 但如果视频源是HLS，是否真的无法动态更改视频源？

更新根据aldel的建议，我已将最小样本更新为：

<!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设备，但不适用于i-devices。

我仍然可以在iPad上只播放一个HLS源：如果我使用Safari访问iPad上的页面，我可以点击视频控件的播放按钮，视频开始播放。如果我然后点击“Cam02”，视频就会停止播放，但没有新视频可播放：我从未在视频控制内部获取播放按钮。在服务器端，我可以看到Safari正在请求第二台摄像机的m3u8文件。但是没有要求任何细分。

如果我在更改src-Attribute后调用load（），会变得更有趣：我在服务器上看到将开始为第二个摄像头请求段。只是视频窗口保持黑色 - 没有显示任何视频。

此load（）有一个有趣的其他效果：如果我到达iPad上的页面，并且没有开始播放Cam01，但是单击按钮Cam02，切换到Cam02，然后调用Load I可以开始播放cam02

同样非常有趣：如果我不使用HLS源，但只是一个简单的mp4 ，一切正常，类型=＆＃39; video / mp4＆＃39;。然后我也可以在iPad上没有任何问题地切换来源。

还有其他提示吗？很快，我会说苹果公司无法对HLS实施适当的支持 - 尽管他们已经发明了它。 Chrome只是更好地处理它。另请注意，iPad上的Chrome存在完全相同的问题。

Answer 1

您正在更改视频元素的src属性，而不是其中的源元素，因此源元素仍具有其原始src属性。在这种情况下，我甚至不确定浏览器是否有“正确”的东西，所以不同的浏览器做不同的事情并不奇怪。

您应该在源元素上设置值，而不是视频元素。

否则首先不要使用源元素;只需设置视频标签的src属性即可。我认为这应该没问题，因为你一次只有一个潜在的流URL（源标签用于当你对同一视频内容进行不同的编码时，浏览器需要选择它可以处理的那个）。如果你这样做，你也不需要在更改src时调用.load（）。

（如果你确实保留了源元素，并更改了该元素的URL，我很确定你仍然需要在视频元素上调用.load（），而不是源元素。）

更改i-Devices的html5视频元素的HLS视频源

1 个答案: