HTML5 - 更改视频源在 Safari 中不起作用答案

【问题标题】：HTML5 - Changing video source not working in SafariHTML5 - 更改视频源在 Safari 中不起作用
【发布时间】：2012-01-16 13:32:27
【问题描述】：

点击不同的链接后，我的 HTML5 视频会发生变化（代码见下文）。它适用于除 Safari 以外的所有浏览器。初始视频可在所有浏览器中播放，但不能在 Safari 中切换视频。如果我这样修改：

<script>
function loadAnotherVideo() {
    var video = document.getElementsByTagName('video')[0];
    video.src="HTML5 MOVREV.m4v";
    video.load(); // need this for the new video to load
}
function loadAnotherVideo2() {
    var video = document.getElementsByTagName('video')[0];
    video.src="HTML5 MOV.m4v";
    video.load(); // need this for the new video to load
}
</script>

它只能在 Safari 中使用，因为它的 mp4，但在 Safari 中不能流畅地切换视频，这意味着它是错误的。

这可能与以下功能在 Safari 中看不到 mp4 有关。

代码：（适用于所有浏览器，但 Safari 除外）

<div id="VIDEOONE"> <video controls="controls" width="852" height="479">
 <source src="HTML5 MOV.m4v" type="video/mp4">
 <source src="HTML5 MOV.theora.ogv" type="video/ogg">
 video not supported
</video>
<script>
function loadAnotherVideo() {
  var video = document.getElementsByTagName('video')[0];
  var sources = video.getElementsByTagName('source');
  sources[0].src = "HTML5 MOVREV.m4v";
  sources[1].src = "HTML5 MOVREV.theora.ogv";
  video.load(); // need this for the new video to load
}
function loadAnotherVideo2() {
  var video = document.getElementsByTagName('video')[0];
  var sources = video.getElementsByTagName('source');
  sources[0].src = "HTML5 MOV.m4v";
  sources[1].src = "HTML5 MOV.theora.ogv";
  video.load(); // need this for the new video to load
}
</script>
<input type="button" value="video two"
       onclick="loadAnotherVideo()">  

<input type="button" value="video one"
       onclick="loadAnotherVideo2()"></div>

【问题讨论】：

标签： html video safari

【解决方案1】：

适用于所有浏览器？如果视频节点中有 SOURCE 节点，AFAIK IE9 无法通过 src() 函数切换视频。

另外，m4v 无法在 Firefox 和 Opera 中播放 - 如果您想切换视频，根据我的经验，最好放弃 SOURCE 节点，而是从一开始就使用 canPlayType() --> 即使是最初的视频. （请注意，Android 2.2 知道 html5 视频，但没有实现该功能 --> 如果通过用户代理找到该设备以防它与您相关，则您必须实现它。请参阅 mediaelement.js 示例代码）

您不应在文件名中使用空格，因为这些也会导致错误。您可能无法在所有常见的浏览器和操作系统上检查您的播放器 --> Chrome/FF/[...] 在 Linux / Windows / Mac 上并不相同

最后但同样重要的是：您为什么使用 m4v 而不是 mp4？仅当您在文件中包含章节信息时才需要 M4V - html5 播放器无论如何都无法读取。只有 iTunes 兼容设备需要 M4V 以及章节信息。

【讨论】：