處理 Safari 無法播放 video mp4 的一些問題

最近開始覺得 Safari 大概是未來的 IE。

在使用 HTML5  的 video 播放影片時，遇到兩種影片播不出來的情況。

情況一

較少人會遇到，就是尚未更新成最新的 OS 作業系統，(我的情況是作業系統 OS X EI Capitan, safari版本: 9.0.2)，很不巧的我是用自己 server 的 https，當你的 SSL 憑證不是可以信任的，safari 無法載入 mp4，解法是什麼，就只好把 https 改成 http 了。

這個問題找好久，而且還要找到一台尚未更新 OS 的 Mac 來測真的很有困難。參考: http://stackoverflow.com/questions/25709713/safari-will-not-play-mp4-over-https, Cannot view Quicktime movies over HTTPS in Safari or UIWebView

另外新版的 OS 沒有這個問題，即便我是 https，像我更新到 sierra 就沒有這個問題。


情況二

是針對 iphone 上用 safari 看 video 會出現播放鍵，而且還不會自動播放。
這個問題，要從 2 個方向著手:

1. 請先處理掉播放鍵的顯示，處理的意思就是隱藏。用 css 把 video 標籤的 video::-webkit-media-controls-start-playback-button 隱藏起來，如:

video::-webkit-media-controls-start-playback-button {
  display: none;
}

可以參考: displaying html5 video in ios without play button overlay


2. 自動播放的問題比較麻煩，但是 IOS 10 有辦法，至於 10 以下的就很難說。
video 標籤的自動播放，要加上 autoplay  屬性，若你要針對 ios 10 的 safari，請你再加上 playsinline 的屬性。如:

<video loop muted autoplay playsinline>
   <source src="01.mp4" type="video/mp4">
</video>

注意， autoplay 跟 playinline 這兩個屬性一定要同時擁有，才會在 safari 自動播放! 這個部分你可以參考:

(1) IOS 10 支援  playinline 所以直接使用沒關係:  New <video> Policies for iOS

(2) 但是 ios 10 以下的，可能要靠 javascript 套件來處理:  https://github.com/bfred-it/iphone-inline-video (網路上看到有人推薦的，但我自己是沒有試過)


至於較舊版本的 safari，如果沒有特別想要處理，就記得放 poster 屬性在 video 上，如果影片播不出來，至少也別讓它看起來是空的。


情況一的問題讓我頭痛很久，有時候要注意，當你 google 不到這些問題的時候，可能真的不是大部分的人會遇到的問題，無奈，https 錯了嗎 QQ