[ 網頁教學 ] 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 改了這個項目。但是網頁開發者為了要能個在不同瀏覽器能夠正常使用還是要多多測試喔!

 

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



相關文章

網頁滑動式手機菜單 (類似APP菜單)   今天要來和大家分享滑動式的手機菜單如何達成,要製作這個功能需要的是CSS和JS概念。 這個菜單類似手機APP的菜單顯示的方式,這樣子的菜單形式使用在網頁上是相當符合使用者經驗...
Scroll Animations 網頁滾動時播放動畫   今天要介紹幾個當網頁滾輪滾動時播放動畫的製作方式,一共有4個方法,目前我最常用的是Scroll Me。其他的大家可以嘗試試看看自己喜歡哪種方式。會了這些工具可以讓網頁在瀏覽的時後比...
JQuery 點擊後滑動到某個區塊(4/19新增語法說明與GoTop功能)... 今天要做的功能是 1. 點擊一元素後到達某個區塊 2. 點擊一元素後回到網頁最頂端 使用的語言是JQuery   簡述 這個功能類似快捷鍵可以運用在蠻多地...
如何指定分享網址的縮圖?   當你想要分享連結的時候網頁的縮圖讓你覺得很尷尬嗎?還是網頁的縮圖不盡理想,不是很好看呢?這個時候你就可以使用這款工具,這個工具可以幫助你指定你分享網址的縮圖,不只是縮圖喔!影片也可...