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

Changing the HLS Video Source of a html5 video element for i-Devices

本文关键字：视频 HLS 元素 html5 i-Devices 更改      更新时间：2023-09-26

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

我真的被困在这件事上。我也许可以使用 iframe 来解决它，但这会带来其他问题。

是否有人提示如何使用i设备上的视频标签更改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设备上则不行。

我仍然只能在iPad上播放一个HLS源：如果我使用 Safari 访问 iPad 上的页面，我可以点击视频控件的播放按钮，视频开始播放。如果我点击"Cam02"，视频将停止播放，但没有新视频可播放：我从来没有在 safari 中的视频控件上看到过播放按钮。在服务器端，我可以看到Safari正在请求第二台相机的m3u8文件。但是从未请求任何段。

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

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

也非常有趣：如果我不使用HLS源，而只是一个简单的mp4，type='video/mp4'，一切正常。然后，我也可以在iPad上毫无问题地切换源。

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

您正在更改视频元素的 src 属性，而不是其中的源元素，因此源元素仍具有其原始 src 属性。我什至不确定在这种情况下浏览器是否有"正确"的事情要做，所以不同的浏览器做不同的事情也就不足为奇了。

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

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

（

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

相关文章：