在使用 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