Question

这是一个脚本，它将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);

jsfiddle演示： http://jsfiddle.net/h8RLS/2/

这适用于所有测试的浏览器，但iOS上的Safari除外。在iOS中，当HTMLVideoElement重新附加到DOM时，它不再可播放。

是否有其他人已解决或遇到此问题？

Answer 1

我没有iPad，但可以在iPhone上重现您的问题。这似乎是一个Webkit错误，但可以通过更改视频的src属性轻松绕过它 - 我希望这对您的方案来说已经足够了。你可以在这里看到一个有效的演示：

http://vidhtml5.appspot.com/jsembed.html

这是代码：

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

Answer 2

我遇到了同样的问题，我找到了使用计时器的解决方法（我在这里使用jQuery）。

var v = $('#videoID');
v.appendTo( $('#toDivID') );
var timer = setInterval( function() {
    clearInterval( timer );
    v[0].load();
    v[0].play();
}, 200 );

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

Answer 3

您可以为视频添加两个“来源”标记。我在一个网站上完成了这项工作，效果很好。

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

在DOM更改后，iPad中的HTML5视频无法正常工作

3 个答案: