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

【问题标题】：Changing the HLS Video Source of a html5 video element for i-Devices更改 i-Devices 的 html5 视频元素的 HLS 视频源
【发布时间】：2015-03-28 23:13:44
【问题描述】：

我正在尝试使用 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 属性后调用 load() 会变得更有趣：我在服务器上看到将开始为第二个摄像头请求片段。只是视频窗口保持黑色 - 没有显示任何视频。

这个load()还有一个有趣的效果：如果我到达iPad上的页面，并没有开始播放Cam01，而是点击Cam02按钮，切换到Cam02，然后调用Load我可以开始播放cam02 .

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

还有其他提示吗？很快我就会说 Apple 只是无法实现对 HLS 的适当支持——尽管他们已经发明了它。 Chrome 只是处理得更好。另请注意，iPad 上的 Chrome 也有完全相同的问题。

【问题讨论】：

标签： javascript ios html5-video http-live-streaming

【解决方案1】：

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

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

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

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

【讨论】：

感谢 aldel 的提示。我会尽快对此进行测试，但这可能会在下周进行。然后我会回复以确认这（希望）有效。
Aldel，我已经测试了您的提示并相应地更新了我的示例。不幸的是，我仍然没有运气 - 问题仍然存在。请注意，如果我不使用 HLS 源，而是使用简单的“视频/mp4”源，我就没有这个问题。
@erg 很有趣。听起来您应该在 Safari 上提交错误。如果事实证明这不是一个错误，他们应该告诉你你做错了什么（尽管我不知道他们是否擅长这个）。
@erg 我很好奇如果视频元素具有自动播放属性会发生什么。但我对此并不乐观。我认为可能可行的是创建一个全新的视频标签并将其换入。暂停旧视频，将其从 DOM 中删除，创建新的视频元素（可能具有自动播放属性），将其添加到 DOM，设置其 src 属性.不确定订单有多重要。如果可行，我会将其添加到上面的答案中。
aldel，如果我是对的，我测试了从 DOM 中完全添加/删除视频标签作为第一个解决方法 - 也不起作用。也很有趣：如果我在视频上调用 pause() Safari 不会停止从服务器加载片段，它只会停止播放视频。您停留的时间越长，Safari 中缓冲的片段就越多。当您继续使用 play() 时，所有这些片段都会播放。关于自动播放：自从 iOs 6.x（或更高版本）以来，这是不允许的。如果您处于某些用户操作（如单击）的直接处理程序中，则只能调用 play()。也不行。