處理 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-httpsCannot 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

留言

  1. 隱藏控制項

    video::-webkit-media-controls {
    display:none !important;
    }

    回覆刪除

張貼留言

若你看的文章,時間太久遠的問題就別問了,因為我應該也忘了... XD

這個網誌中的熱門文章

[Android] 筆記 手機上測試自己的 APP

解決fatal: Not a git repository (or any of the parent directories): .git錯誤

[Android 筆記] 設定 ImageView 的圖檔來源