2013-10-27 65 views
3

如何鏡像HTML5中的元素?我第一次嘗試使用帶縮放/旋轉的CSS轉換,但不幸的是,它也將控件映射到視頻元素。我只是想讓視頻本身被鏡像。如何鏡像<video> HTML5

我可以在技術上使用畫布,在畫布上繪製視頻,並通過一些圖像操作來鏡像,但這對於如此簡單的事情似乎過於複雜/浪費。

我需要這個的原因是因爲我正在攝像頭輸入,不幸的是它是鏡像的,這對我的用戶來說稍微不直觀。我對該圖像執行一些圖像處理並顯示結果。如果我可以在不反映控件的情況下鏡像視頻,那麼一切都可以實現。

有什麼建議嗎?

+0

你檢查這 http://stackoverflow.com/questions/14455844/is-that-possible-to-make-video-mirrored –

回答

2

如果問題是視頻與控件一起被鏡像,那麼不要使用視頻的默認控件,用javascript創建這些控件。

如果您按照HTML5 Video at w3.org的示例進行創建並不難,例如Building HTML5 video controls javascript at bloken-link.com,他們的working demo也有一些在線教程。

這也可以讓你自由地設置獨立的視頻控件,所以你可以決定用CSS來應用他們的變化。如果你想模仿原始控件,你可以考慮讓它們出現在懸停和使用CSS動畫,使他們淡出。


附錄:退房VideoJS,這是一個非常好的解決方案,就是這樣做的。儘管如此,你將不得不嘗試你的轉換。

+0

謝謝!我會看看VideoJS,並且我明白你在看什麼。 – ImpGuard