覆蓋在動態插入的視頻標籤在ipad

我目前正在開發支持ipad的視頻播放器。
它更像是一個jquery插件。它在桌面上效果很好，我甚至設法將自定義控件添加到iPad上。
到目前爲止這麼好。
問題是，我正在創建和動態插入視頻元素，事實上，這一點弄亂了iPad。我遵循這種方法，因爲我發現（幾個小時後），如果您試圖將視頻包裝（$.wrap）到容器中，視頻將會崩潰。
插入視頻後，它的行爲幾乎與正常情況類似（可播放並響應事件），但它的位置/顯示屬性已混亂：我無法在其上添加任何疊加層。這是一個問題，因爲我希望我的控件能夠顯示在視頻之上。覆蓋在動態插入的視頻標籤在ipad

此外，視頻本身不會響應正常的touchmove touchstart touchend事件。經過一番調查，事實證明，如果您沒有打開默認控件，則視頻會捕獲所有事件（iPad touch events on <video> tag）。
我的第二個問題是，包括默認控件後，視頻元素仍然似乎忽略我的事件處理程序。

所以，我的問題是（都只有在iPad保護套）：

你曾經面臨過這樣的問題，當然，如果你沒有，你怎麼解決？
只做硬編碼的視頻元素觸發事件嗎？

來源

2011-07-29 gion_13

經過一些挖掘，我找到了答案。
看起來像this stackoverflow question中的無標記答案是關鍵。
因此，作爲Jaffa The Cake（我非常感謝）sais：「您可以通過給視頻元素-webkit-transform-style：preserve-3d修復動態創建的視頻上的z-index，唯一的解決方法是使用css3屬性-webkit-transform-style: preserve-3d。
通過這種方式，可以在可處理所有事件（如播放/暫停）的視頻頂部放置疊加層。

來源

2011-07-29 14:03:29

沒有iPad可以通過jQuery的處理動態插入的視頻，iPad上的視頻不會響應觸摸或移動因爲默認情況下你必須按一下像播放按鈕的鏈接觸發視頻音頻，所以你可以只使用jQuery來做到這一點像下面

視頻

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

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

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

});

音頻

var aud = $('audio').get(0); 

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

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

});

希望這對我有所幫助。

來源

2011-07-29 12:01:59 Mike

謝謝，但我的視頻幾乎可以正常工作，它只是'z-index'類問題。如果只有我可以在視頻上添加疊加層，可以捕獲所有「觸摸」事件並充當播放/暫停觸發器。 –

對我來說，解決辦法是刪除使用jQuery控件的所有視頻這樣

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

然後，覆蓋物元件也相應的響應事件。爲了使視頻時播放一遍，我已經添加了jQuery的單擊事件/暫停視頻：

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

希望有所幫助。

來源

2014-05-27 07:57:46

覆蓋在動態插入的視頻標籤在ipad

回答

相關問題