解決HTML5 Video tag 在 IPhone、IPad 上播放影音的各種問題

最近又遇到 html5 的 video 標籤沒法在iphone、ipad 上播放，會顯示如下的畫面 :

以下列出幾個會在 IOS 設備上遇到的問題與解決方式

一、影片編碼 :

html5 目前只支援三種格式的影片播放 mp4、ogg、webm

而且mp4 在 ios 只支援編碼為 H.264 的影片

(新版 ios 不知道，但要讓舊版可以觀看還是需要轉)

這個非常之重要...........如果你的影片無法播放請優先檢查.mp4 的編碼!!!

二、video 一定要放 controls 屬性

如下方黑體字的 controls 

<video width="320" height="240" controls>

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

<source src="movie.ogg" type="video/ogg">

Your browser does not support the video tag.

</video>

這問題會在 ipad 上發生，由於 IOS 不支援自動播放 (據說新版好像可?)

所以如果在不放 controls 屬性的話影片會根本無法開始播，但這問題會在桌上型或 ipad 發生

就會變成如下圖這樣 (很抱歉因為 ipad 要把圖抓出來實在有點麻煩，所以用相機拍)

可以看到在 ipad 上根本無法播放，因為沒有按鈕，也不會自動播放