Iphone DOM更改后iPad中的HTML5视频无法工作

Iphone DOM更改后iPad中的HTML5视频无法工作,iphone,ios,html,ipad,html5-video,Iphone,Ios,Html,Ipad,Html5 Video,以下是将html5视频的标记附加到DOM的脚本: document.body.innerHTML = '<video id="video" controls="controls" src="http://mirror.cessen.com/blender.org/peach/trailer/trailer_iphone.m4v" type="video/mp4"></video>'; var el = document.getElementById('video'); d

以下是将html5视频的标记附加到DOM的脚本:

document.body.innerHTML = '<video id="video" controls="controls" src="http://mirror.cessen.com/blender.org/peach/trailer/trailer_iphone.m4v" type="video/mp4"></video>';
var el = document.getElementById('video');
document.body.removeChild(el);
document.body.appendChild(el);
document.body.innerHTML='';
var el=document.getElementById('video');
文件.正文.删除文件(el);
文件.正文.附件(el);
JSFIDLE演示:

除了iOS上的Safari之外,这在所有测试的浏览器中都有效。在iOS中,当HTMLVideoElement被重新附加到DOM中时,它就不再可播放


还有其他人解决或遇到过这个问题吗?

我没有iPad,但可以在iPhone上重现你的问题。这似乎是一个Webkit错误,但可以通过更改视频的
src
属性轻松绕过它-我希望这对于您的场景来说足够了。您可以在此处看到一个工作演示:

代码如下:

var el = document.getElementById('video');
el.src= "http://mirror.cessen.com/blender.org/peach/trailer/trailer_iphone.m4v";
el.load();

您可以为视频添加两个“源”标记。我在一个网站上做过,效果很好

<video class="video" controls="controls" id="video1">
<source type="video/mp4" src="demo.mp4">
<source type="video/webm" src="demo.webm">              
</video>

我也遇到了同样的问题,我找到了一个使用计时器的解决方法(我在这里使用jQuery)


我只在iOS 6.1上的iPad2上测试过它。

我没有要测试的iPhone,但这在我的第四代iPad上不起作用。Fiddle:我有一个第四代i pad,演示链接对我来说很好:@AndroidUser演示没有从DOM中删除视频,而是重置了
src
属性,并调用了
reload()
。它可以在iPad上运行,但我担心它不能反映DOM更改时产生的问题。请检查我在Windows和Android上测试过的所有浏览器上都能正常工作,但在iPad上却不能。这与问题无关。问题是动态更改视频,而不是在格式不起作用时提供回退链接(iPad上的WebM就是这种情况)。
var v = $('#videoID');
v.appendTo( $('#toDivID') );
var timer = setInterval( function() {
    clearInterval( timer );
    v[0].load();
    v[0].play();
}, 200 );