Html5視頻疊加體系結構

Question

我想創建一個包含視頻和圖像疊加的html5頁面 - 意味着通過視頻顯示的某個圖像。在某些情況下，這個疊加層也會成爲文本。有沒有什麼好的方法來實現這一目標？

我一直在嘗試的是使用<video>標記來保存視頻，並將圖像繪製到放置在視頻頂部的畫布上。爲了顯示它，我需要將視頻移回設置z-index爲-1，但是然後視頻控制將不起作用。也許有一個解決方案可以讓控件再次運行，但我不確定我是否在正確的道路上。我假設有一個推薦的解決方案。也許使用我填寫視頻和覆蓋圖的畫布。或者完全不同的東西？

注意：我編輯了這個問題，因爲它最初指向錯誤的方向，關於什麼是重要的。我很想有一個解決方案，它可以在全屏和一切中無縫工作，但重點是：什麼是將項目放在視頻頂部的適當方式 - 在html5中？

Answer 1

實現你想要的功能，並在開箱即用的全屏中支持它是有問題的。 HTML5視頻中的全屏支持只是可選的，並且以任何方式不可訪問API（See discussion here）。 即使您使用全屏內置，您也無法在其上注入內容，除非您願意在運行時更改服務器上的視頻文件本身。

然而，你可以做什麼（和我在類似案例中做的一樣）是實現你自己的視頻控件，運行視頻標籤而沒有內置的控件，並且在上面覆蓋儘可能多的圖層你現在焦點不足的視頻。

至於全屏，可以實現某種自定義背景全屏類似於一直在做here

編輯：阻止內置的HTML你被放置在畫布上的視頻時遇到的問題視頻控制。我的建議是使用html和javascript調用視頻API來實現您自己的視頻控件（播放，暫停，音量，導引等）。你甚至可以使它更漂亮，然後是內置的控制器。 您的控件可以包含在疊加畫布上方的一個圖層中，因此視頻將顯示在其上面，覆蓋圖上方並顯示在控件集上方。

你可以讀一點關於實現自己的控件here或here 而且無論如何，這可以很容易地比這更好。