最近在做行動版網頁的時候遇到一些小問題

深深覺得 IOS 的 Safari 有點像電腦版 IE 那般難搞......

首先一開始在用 display: flex 做垂直置中的時候就遇到了問題

.vertical-align {

display: flex;

align-items: center;

}

後來發現是瀏覽器太舊了.....所以 display: flex 不支援,但是手邊這台好像已經升不上去了

http://caniuse.com/#feat=flexbox

擷取  

所以後來改用 display : table +  display : table-cell 來處理

然後進入正題 :

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

IMAG2411  

以下列出幾個會在 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 上根本無法播放,因為沒有按鈕,也不會自動播放

IMAG2412  

請參考官方說明 :

On the desktop or iPad, you must either include the controls attribute or provide playback controls using JavaScript.

It is especially important to provide user controls on iPad because autoplay is disabled to prevent unsolicited cellular download. 

https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html

 

三、IIS 的 MIME Type 記得要加上相對應的類型

如下圖,沒加主機根本不認識什麼叫 .mp4

Clipboard02  

 

四、還是無法順利播放,你可能少了 Accept-Ranges: bytes

其實我遇到的不是這個問題,因為我沒加也是可以,但如果你是直接訪問 .mp4 檔可能就會遇到

原因在於在伺服器上的影音要在 IOS 裝置跑的話,你的 http header 必須要有 Accept-Ranges: bytes

請參考下面這兩篇 :

http://stackoverflow.com/questions/10511006/html5-video-not-working-on-ipad

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/CreatingVideoforSafarioniPhone/CreatingVideoforSafarioniPhone.html#//apple_ref/doc/uid/TP40006514-SW6

在 Safari 直接訪問 .mp4 的話就要在 header 上加工

C# 範例如下 : 

http://onoffswitch.net/streaming-video-ios-device-custom-httphandler-asp-net/

如下在 http header 上增加 Accept-RangesETag

==========================================

Response.Headers.Add("Accept-Ranges", "bytes");

Response.Headers.Add("ETag", HashUtil.QuickComputeHash(target));

Response.ContentType = "video/mp4";

Response.TransmitFile(target);

但其實不太需要 ETag ,ETag 的用途好像是用來 Cache 用的

ETag 全名是 Entity Tag,不是不爽裝也可以上高速公路的 ETag

想要深入了解請參考這篇 :  使用Etag增強iOS的URL緩存功能

然後要注意 IOS 影片最大只支援到 2GB

 

五、HTML5 Video 標籤在 IPad、IPhone 無法滿版的問題

這問題好像是 Safari 無法分辨影片大小的問題,就會變成類似下圖這樣

IMAG2413  

都已經設定 100% 了結果影片還是那麼小,旁邊都是黑邊

解決方法請參考下面 : 

http://stackoverflow.com/questions/14250583/safari-on-ipad-ios6-does-not-scale-html5-video-to-fill-100-of-page-width

======================================================

在外面放一個 canvas or object 如下 :

<div id="container">

<canvas width="634" height="264"></canvas>

<video controls width="634" height="264">

<source src="http://xxx.xxx.xxx/test.mp4" type="video/mp4">

<source src="http://xxx.xxx.xxx/test.webm" type="video/webm">

<source src="http://xxx.xxx.xxx/test.ogv" type="video/ogg; codecs=theora, vorbis">

</video>

</div>

然後 CSS : 

#container {

position: relative;

}

video, canvas {

top: 0;

left: 0;

width: 100%;

max-width: 100%;

height: auto;

}
video {

height: 100%;

position: absolute;

}

這樣就可以了,但其實這個方法還是會有致命性的問題

因為使用了絕對定位所以高度沒算好會蓋到下面本來的元素

所以我後來使用的是這個方法解決的.....

http://stackoverflow.com/a/21194229

#container {
 position: relative;
 padding-top:56.25%;
} video,canvas{ display: block; position: absolute; width:100%; height:100%; top:0;
}

上面那個 56.25% 算得好好的,在 ipad 上完全正常

但是在手持行動裝置 ex : android phone 就會死掉....所以要下 media queries 

預設是正常,但螢幕超過 768px 就轉成這個模式,如下

@media screen and (min-width: 768px) {

#content {

position: relative;

padding-top: 56.25%;

margin-bottom:20px;

}

video, canvas {

display: block;

position: absolute;

width: 100%;

height: 100%;

top: 0;

}

}

照上面這方式就可以解決了~~

 

最後覺得 Safari 不見得有比 IE 來的好搞

 

創作者介紹
創作者 小雕 的頭像
小雕

小雕雕的家

小雕 發表在 痞客邦 留言(0) 人氣()