HTML5 - 更改在Safari中无法使用的视频源

时间:2012-01-16 13:32:27

标签: html5 video safari

我点击不同的链接时会更改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>  

1 个答案:

答案 0 :(得分:0)

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

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

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

最后但并非最不重要:你为什么使用m4v而不是mp4?只有在文件中包含章节信息时才需要M4V - html5播放器无法读取。只有iTunes兼容设备才需要M4V以及章节信息。