HTML5-更改视频源在Safari中不起作用
我有HTML5视频在点击不同的链接后改变(见下面的代码)。它适用于除Safari以外的所有浏览器。初始视频可以在所有浏览器中播放,但不能在Safari中切换视频。如果我这样修改:HTML5-更改视频源在Safari中不起作用,html,video,safari,Html,Video,Safari,我有HTML5视频在点击不同的链接后改变(见下面的代码)。它适用于除Safari以外的所有浏览器。初始视频可以在所有浏览器中播放,但不能在Safari中切换视频。如果我这样修改: <script> function loadAnotherVideo() { var video = document.getElementsByTagName('video')[0]; video.src="HTML5 MOVREV.m4v"; video.load(); // n
<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>
函数loadAnotherVideo(){
var video=document.getElementsByTagName('video')[0];
video.src=“HTML5 MOVREV.m4v”;
video.load();//要加载新视频,需要这个
}
函数loadAnotherVideo2(){
var video=document.getElementsByTagName('video')[0];
video.src=“HTML5 MOV.m4v”;
video.load();//要加载新视频,需要这个
}
它只适用于Safari,因为它的mp4,但在Safari中不能流畅地切换视频,这意味着它是错误的
这可能与以下在Safari中看不到mp4的功能有关
代码:(适用于所有浏览器,但Safari除外)
不支持视频
函数loadAnotherVideo(){
var video=document.getElementsByTagName('video')[0];
var sources=video.getElementsByTagName('source');
来源[0].src=“HTML5 MOVREV.m4v”;
来源[1].src=“HTML5 MOVREV.theora.ogv”;
video.load();//要加载新视频,需要这个
}
函数loadAnotherVideo2(){
var video=document.getElementsByTagName('video')[0];
var sources=video.getElementsByTagName('source');
来源[0].src=“HTML5 MOV.m4v”;
来源[1].src=“HTML5 MOV.theora.ogv”;
video.load();//要加载新视频,需要这个
}
适用于所有浏览器?如果视频节点中有源节点,AFAIK IE9无法通过src()函数切换视频
此外,m4v不会在Firefox和Opera中播放-如果您想切换视频,根据我的经验,明智的做法是丢失源节点,而从一开始就使用canPlayType()-->即使对于初始视频也是如此。(请注意,Android 2.2知道html5视频,但没有实现该功能-->如果通过用户代理找到与您相关的设备,则必须实现该功能。有关示例代码,请参阅mediaelement.js)
您不应该在文件名中使用空格,因为这些空格也可能导致错误。您可能无法在所有常见浏览器和操作系统上检查播放器-->Chrome/FF/[…]在Linux/Windows/Mac上不一样
最后但并非最不重要的一点:为什么要使用m4v而不是mp4?只有在文件中包含章节信息时才需要M4V,html5播放器无论如何都无法读取这些信息。M4V仅适用于iTunes兼容设备以及章节信息
<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>