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

Posted 2023-05-08

【中文标题】DOM 更改后 iPad 中的 HTML5 视频无法正常工作

【英文标题】：HTML5 Video in iPad not working after DOM changes

【发布时间】：2013-01-08 23:19:50

【问题描述】：

这是一个将 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 时，它不再可播放。

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

【参考方案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();

【讨论】：

我没有要测试的 iPhone，但这不适用于我的第 4 代 iPad。小提琴：jsfiddle.net/nHjRR

我有一个第 4 代 i pad，演示链接对我来说很好用：vidhtml5.appspot.com/jsembed.html

@androidUser 该演示没有从 DOM 中删除视频，而是重置了src 属性并调用了reload()。它可以在 iPad 上运行，但恐怕它并不能反映 DOM 更改时产生的问题。请查看我的fiddle，它适用于我在 Windows 和 Android 上测试过的所有浏览器，但不适用于 iPad。

【参考方案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 上测试过。

【参考方案3】：

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

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

【讨论】：

这与问题无关。

问题是关于动态更改视频，而不是在格式不起作用的情况下提供后备链接（iPad 上的 WebM 就是这种情况）。