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

 

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



相關文章

免費圖片與背景圖 (Free Background)   好久沒有新增文章了,最近稍微偷懶了一陣子,真是不好意思呢。 相信在做網頁設計的時候常常需要一些素材來製作整個網站的風格,而今天介紹的網站素材是可以用於個人行為或是商業化(有經...
CSS3增加了哪些語法?如何使用?   上篇前言跟大家說明CSS和CSS3的差別是什麼?答案是他們是密不可分的。那麼要如何使用CSS3新增的語法呢?這邊就來跟大家介紹一下CSS3增加了哪些語法以及它的使用方式喔~ &nbs...
網頁滑動式手機菜單 (類似APP菜單)   今天要來和大家分享滑動式的手機菜單如何達成,要製作這個功能需要的是CSS和JS概念。 這個菜單類似手機APP的菜單顯示的方式,這樣子的菜單形式使用在網頁上是相當符合使用者經驗...
滾動到此時執行動畫 Animate On Scroll   今天要介紹 AOS Animate On Scroll Library,他是一款蠻好手上的滾動式動畫的資料庫,對於有需求要自訂義動畫的人也相當方便。我覺得比較值得一提的是當滾輪滾回...