2010-01-21 254 views
21

與許多Web開發人員一樣,我期待使用新的HTML 5 <video>標籤的流式視頻。瀏覽器支持絕對不夠寬,所以使用Flash/SWF fallback是必須的。HTML 5視頻自定義控件

這讓我想到:在Flash中,可以高度自定義HTML 5中的播放控件(暫停,播放,停止,搜索,音量等)。有哪些選項可用於自定義視頻控件的字形,圖標和顏色?需要Javascript嗎?例如,下面的頁面呈現根據瀏覽器不同的控制 - 使用FF3.5,Chrome和Safari瀏覽器測試:

http://henriksjokvist.net/examples/html5-video/

這將是真正真棒定製和跨瀏覽器的標準化控制,甚至匹配的Flash控件由較舊的瀏覽器使用。

回答

24

在HTML5規範中,controlsattribute<video>

也查看這篇文章:Video on the Web - Dive into HTML5。它解釋爲:

默認情況下,該元素不會公開任何類型的播放器控件。您可以使用普通的舊HTML,CSS和JavaScript創建自己的控件。該元素具有像play()和pause()這樣的方法和一個名爲currentTime的讀/寫屬性。還有讀/寫音量和靜音屬性。所以你真的擁有了構建自己的界面所需的一切。

如果您不想構建自己的界面,可以告訴瀏覽器顯示一組內置控件。要做到這一點,只需在你的標籤中加入controls屬性即可。

+0

屬性鏈接=找不到文檔。 – 2014-05-27 09:21:07

1

我的猜測是控件的外觀是依賴於瀏覽器的(因此不是很可定製的)。您可以通過將其提交至Litmus來查看您的測試頁面在所有瀏覽器中的樣子。

3

YouTube目前正在運行HTML5測試版。您可以通過訪問http://www.youtube.com/html5來激活它。目前,在激活測試版後,並非所有視頻都以HTML5顯示。在HTML5中顯示的視頻會得到不同的加載動畫,因此您可以識別它們(如這一個http://www.youtube.com/watch?v=KT1wdjlbyFc)。

正如你可以看到他們的視頻播放器只是看起來像閃光燈版本一樣。

+0

他們「得到一個小按鈕,所以你可以識別它們」?哪裏?你在談論加載動畫嗎? – Langdon 2010-01-22 14:07:52

+0

是的,我的意思是加載動畫 - 編輯我的答案:-) – Flatlin3 2010-01-22 14:18:10

2

對於那些對跨瀏覽器HTML5視頻播放器感興趣的人,請查看Vimeo(http://vimeo.com)正在做什麼。使用支持HTML5的瀏覽器訪問任何視頻(至少適用於Safari,Chrome和IE9),並選擇「切換到HTML5播放器」。

他們實現了自定義HTML控件,可以完全複製Flash播放器的外觀。這些控件在瀏覽器中看起來完全相同

我見過的最好的跨瀏覽器實現。他們甚至使用<canvas>元素來爲音量選擇器設置動畫。