iphone - 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 デモ: 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

動画には 2 つの「ソース」タグを含めることができます。私はサイトでこれを行いましたが、うまく機能します。

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