[ 網頁教學 ] Html5 Video Autoplay 影片自動播放

標籤: , ,

今天要教大家如何製作自動播放影片的網站,有些網站會直接將影片變成首頁的背景這樣的確能夠吸引使用者的注意力而且也能夠替網站創造獨有的風格。可以看到這個免費影片素材的網站 傳送門  Banner 的部分是使用自動播放的影片效果,有的是全屏有的是像他這樣當成是一個 Banner 。或是有時候我們瀏覽網站的時候自動播放的廣告影片。

 

首先你必須要知道,要怎麼樣在網站插入影片可以參考這篇文章

[ 網頁教學 ] HTML5 Video & Fullscreen Video 如何製作全螢幕影片?

 

嵌入影片的方式

假設我要達到自動播放影片的效果,語法如下:

有些人可能會覺得奇怪,autoplay 和 autoplay=”autoplay” 有什麼差別,為什麼樓上那篇文章和這篇文章使用的語法不同,其實兩者都可以意思都一樣,可以用自己習慣的方式就好,沒有絕對的錯與對,兩者達到的結果都相同。

<video loop="true" autoplay="autoplay" >
         <source type="video/mp4" src="影片網址"></source>
</video>

但是你將這段語法貼到網頁後發現它並不能自動播放

 

★為什麼?

因為 Chrome 對影片 autoplay 的部分做了一些修正

請參考 Autoplay Policy Changes

簡單來說就是 Chrome 這項產品的修改會站在使用者的角度而非開發者為主,現今影片自動播放不僅會讓使用者網路流量增加且也會造成他們不必要的麻煩,有些人表示他們根本不想知道影片再乾麻,沒有他按下播放他都不想要知道,諸如此類的概念。所以為了解決這個問題,Chrome 也優化這個項目。

 

★那如何讓影片自動播放呢?

一定要將影片靜音才可以播放影片,這句話非常重要,只要靜音就能夠自動播放影片。

解決方法一定不只一個,我這邊是提供我使用的解決方法。

<video loop="true" autoplay="autoplay"  muted="true">

         <source type="video/mp4" src="影片網址"></source>

</video>

只要在你的影片語法加上 muted=”true” 靜音就能夠自動播放影片,再保險一點就是再加上 preload=”auto” ,自動預先載入。

但是預先載入也不能夠順利自動播放,所以最重要的還是  muted=”true” 。

 

最近因為製作自動循環播放影片的首頁所遇到的問題,寫了自動播放的語法卻不能自動播放真的很苦惱呢。

一研究才知道原來 Chrome 改了這個項目。但是網頁開發者為了要能個在不同瀏覽器能夠正常使用還是要多多測試喔!

 

以上就是能夠達到自動播放的語法,希望有幫助到各位。



相關文章

WordPress對應模板 每個主題基本上都會有這些模板,有些主題可能會有特殊的模板。當你需要修改模板的時候卻不知道從何改起,這篇文章可以幫助你找到你要修改的頁面是哪個模板。   ▲ 模板在哪裡? 外觀 → 主題...
從零開始的 JQuery 開場白 #0   JQuery 在網頁的應用上有很好表現,怎麼說呢?JQuery 像是一塊一塊地積木,擁有各式各樣的形狀(如果沒有我們想要的形狀哩?)讓我們可以自己組合成自己想要的樣子。也就是說 J...
如何使用 JQuery #1   廢話不多說直接來了解如何使用吧!   第一步:引用 JQuery
快速製作 HTML 表格 (HTML Table) 今天要和大家分享一些工具,我覺得真的實在是太厲害了,不懂 HTML 也沒關西只要將試算表 ( Excel ) 的檔案輸出成 CSV 檔案即可快速產生 HTML表格。這樣看下來是不是覺得很厲害呢?現在 ...