資訊分享

Technology share

我想在網站放影片怎麼做?

Mar 6, 2019

這幾年是不是很常在網路上看到一進去除了標題文字以外後面會有影片在跑的網站?

像是我們的美食地圖就有使用到這樣的效果,那要如何使用呢?

首先放置影片最容易遇到的問題是編碼,因為每家瀏覽器支援的影片格式都不太一樣。這邊直接推薦兩個格式 WebM 與 MP4。基本上將影片轉成這兩個格式就可以應付市面上大部分的瀏覽器了。

再來第二的問題因為網站放影片會是個消耗大量流量的作法。影片要想辦法減少大小,影響影片大小最關鍵的地方是影片長度與解析度。

影片長度建議控制在 30 秒以內解析度用 480P 或是 720P 就行了但實際狀況依舊看各自需求決定,只是要拿流量來換就是了。

當上面兩個基本問題搞定後就可以在網站上放上影片拉

語法很簡單

<video>
<source src="video.webm" type="video/webm" />
<source src="video.mp4" type="video/mp4" /></video>

其中 src 裡面填的就是影片的檔案位置 稍微調整就可以將影片放在網站上了