2016年11月11日 星期五

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

2016年11月1日 星期二

[工作筆記] 原來 IE 不支援 SVG 的 animation...

參考: [SVG animation is not working on IE11] http://stackoverflow.com/questions/33812303/svg-animation-is-not-working-on-ie11

因為今天在處理一個 svg 的動畫發現在 IE 跑不出來,原本以為是因為使用 stroke-dasharray 跟 stroke-dashoffset... ,結果得到的解答是只有 Edge 會支援 SVG 的 Transition 跟 animation。簡單來說目前沒有特別方便快速的解法,網路上的解法建議是轉用 svg 的 library 像是 GreenSock 。

連我都還沒使用到 Edge 的人了,直接放棄在 IE 上的效果,結案。不過依舊要寫兩份樣式,先偵測瀏覽器是否為 IE,在 <body> 上 append 一個新的 css class,再用 .ie something, 跟 .not-ie something.. 類似的方式去做替換 SVG 的方案。

Vue multiselect set autofocus and tinymce set autofocus

要在畫面一進來 focus multiselect 的方式: 參考: https://jsfiddle.net/shentao/mnphdt2g/ 主要就是在 multiselect 的 tag 加上 ref (例如: my_multiselect), 另外在 mounted...