ipadの動的に挿入された動画タグオーバーレイ

Question

私は現在ipadをサポートするビデオプレーヤーを開発中です。
jqueryプラグインの詳細です。それはデスクトップ上で素晴らしい作品と私​​はさらにipadに自分のカスタムコントロールを追加することができました。
これまでのところとても良いです。
問題は、ビデオ要素を動的に作成して挿入していることです。実際には、ipadを少しばかげてしまいます。私はコンテナにビデオを（$.wrap）ラップしようとすると、ビデオがクラッシュすることがわかったので、私はこのアプローチに従った。
ビデオを挿入すると、それはほぼ正常に機能し（再生可能でイベントに応答します）、位置/表示プロパティが乱雑になります。上にオーバーレイを追加できません。私のコントロールをビデオの上に表示できるようにするため、これは問題です。

また、ビデオ自体は通常のtouchmove touchstart touchendイベントには反応しません。いくつかの調査の後で、デフォルトのコントロールがオンになっていないと、ビデオはすべてのイベント（iPad touch events on <video> tag）をキャプチャします。
私の2番目の問題は、デフォルトのコントロールを含めた後も、ビデオ要素はまだ私のイベントハンドラを無視しているようです。

だから、私の質問は、（両方のみのIpadケースでは）次のとおりです。

• は、あなたがこの問題に直面している、とあなたがやった場合はもちろん、どのようにそれを修正しましたか？
• ハードコードされたビデオ要素だけがイベントをトリガーしますか？

Answer 1

もう少し掘り下げた後、私は答えを見つけました。
this stackoverflow questionにマークされていない回答が鍵を保持しているように見えます。
Jaffa The Cake（ありがとうございました）sais：「動画エレメント-webkit-transform-style：preserve-3dを与えることで、動的に作成された動画にZ-インデックスを修正できます。唯一の回避策はcss3プロパティ-webkit-transform-style: preserve-3dを使用してください。
このようにして、すべてのイベント（再生/一時停止など）を処理できるオーバーレイを動画の上に配置できます。

Answer 2

Ipadはダイナミックに挿入されたビデオをIpadで処理することはできません。Ipadのビデオはタッチまたは移動に反応しません。再生ボタンのようなリンクをクリックするだけで、 jQueryが

ビデオ

var vid = $('video').get(0); 

$('#someselector').click(function() { 
vid.play(); 

}); 
$('#someselector').click(function() { 
vid.stop(); 

}); 

オーディオ

以下のようにこれを行うには

これが役に立った。

Answer 3

私のためのソリューションは、この

$('video').each(function() { 
    $(this).removeAttr("controls"); 
}); 

などのすべてのビデオのためのjQueryを使用してコントロールを削除した後、オーバーレイ要素は、対応するイベントに応答します。

$('video').click(function() { 
    $(this).trigger('play'); 
}); 

役立ちます希望を： ビデオが再び動作させるために、私はビデオを一時停止/担っているjQueryのクリックイベントを追加しました。