2016
11
15

使用視頻作為網頁背景的技術探討[轉載自WEB駭客]

關鍵字:videoHTML背景

使用視頻作為網頁背景是件很酷的事情,但也是件困難的事情。CSS裡的background-image屬性只能使用圖片、SVG、顏色或漸變色。但從技術講,我們是可以偽造出一種效果,讓視頻以背景的角色出現在其它HTML元素後面。這其中的難點是視頻要填充整個瀏覽器頁面,而且要響應瀏覽器窗口大小的變化。

 

視頻作為網頁背景的限制因素

在動手編碼實現前,視頻作為網頁背景的有些問題我們要先考慮清楚:

  • 並不是因為技術上可行你就可以任意使用:作為背景的視頻內容必須能增強頁面內容的感染力,而不是因為漂亮或技術上很酷就使用它。
  • 作為背景的視頻應該設置為自動播放,而默認狀態下應該是關閉聲音;事實上,視頻裡面最好不含聲音。(你可以在頁面上放置一個控制聲音的按鈕。)
  • 背景視頻應該有個替代圖片,當瀏覽器不支持這種HTML5技術、視頻格式時用圖片替代。在等待背景視頻加載的過程中也應該使用背景圖片佔位。而對於一些手機移動設備不支持視頻自動播放,也應該使用圖片替代。
  • 視頻長度很重要:太短了會明顯感到重複播放(背景視頻通常情況是重複播放的),太長就變成了情節敘事,如果這樣,這段視頻應該單獨放到頁面上播放。我建議視頻的長度應該是12-30秒之間。
  • 帶寬是個大問題。視頻的體積應很小,盡量的壓縮。同時,它需要在不同尺寸設備上自動的適應屏幕大小。如果有可能,應該使用JavaScript控制對不同的屏幕大小加載不同分辨率的背景視頻。背景視頻最好小於5M,如果你小於500K,那是更好。
傑立資訊傑立資訊事業有限公司

電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:[email protected] | 臺北市信義區和平東路3段257號6樓map

© 2019 傑立資訊 All rights reserved.| 網站隱私政策