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

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 demo: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();