HTML5視頻：可以放置在視頻上普通的HTML內容

如果有誰知道任何技巧，讓普通的HTML內容（主要是img標籤）上顯示視頻的頂部（通過視頻標籤）只是想知道？HTML5視頻：可以放置在視頻上普通的HTML內容

來源

2011-01-07 Jason Miesionczek

爲什麼不使用海報屬性？這樣，您可以在視頻加載或播放之前顯示圖像。

來源

2011-01-07 15:06:50

的想法是我試圖將視頻集成到站點，其中沿視頻頂部的區域重疊，使視頻看起來好像這部分是下面的設計的一部分。我試圖把圖像放入視頻本身，但由於壓縮，顏色和尺寸略有變化，差異相當明顯。 – 2011-01-07 15:28:39

我能想到的唯一的解決方案就是自動將div/img放在JavaScript視頻的頂部。這樣視頻就會隨着頁面一起被加載，並且不會干擾圖像。您可能需要關注z-index。 – 2011-01-07 15:57:36

你可以設置視頻作爲背景該分區？不知道這是否會工作爲你的佈局，但它似乎是合乎邏輯......

來源

2011-01-07 15:50:32 zenbike

你如何將視頻設置爲背景？ – 2011-01-07 16:36:46

它一起使用

您可以簡單地把HTML元素對HTML5視頻的頂部由是絕對定位他們在視頻的頂部。將視頻元素和HTML元素設置爲「position：absolute」，並將HTML元素的z-index設置爲高於視頻元素的高度。

來源

2011-02-23 08:45:31 jj1910

正如其他人暗示這很容易定位在使用絕對定位VIDEO元素的頂級HTML元素。當您嘗試在iPhone，iPod和可能較舊的Android手機上捕獲事件時，會遇到挑戰，因爲在這些情況下，VIDEO元素不會在頁面上內聯播放視頻資產（與瘦本地播放客戶端相反）貪婪地捕捉事件。

如果使用IMAGE元素或與其background-image設置爲你想要的「海報」或「縮略圖」使用圖像的DIV那麼您的用戶將不能夠點擊他們，以獲得視頻開始播放 - 移動瀏覽器會將這種行爲視爲在該空間中存在VIDEO元素（如果您碰巧在「大玩」按鈕的中間點擊，但是沒有那麼有用，如果您說一個自定義控件不在中間

我過去使用的解決方案是將IMG或DIV海報放在通常放置VIDEO元素的頁面上，並將VIDEO元素屏幕外（絕對定位，left風格設置爲，例如-3000像素），因此它不能再囤積這些事件。

我知道這不正是有人問，但希望這些信息將被證明是有用的人。

來源

2012-07-11 17:48:01 natlee75

HTML5視頻：可以放置在視頻上普通的HTML內容

回答

相關問題