前端常見相容問題系列2：視訊哪裡去了？

pai_an發表於2016-11-17
前端

<video>是HTML5中新增的重要標籤，用它來引入視訊這一生動活波的媒體形式，簡單好用，因而這個標籤在各種網頁中非常常用。但它卻並不那麼完美。

問題來啦

我們來看一個再簡單不過的頁面（程式碼清單如下），主題內容只新增了一個video標籤和一個用於做參照物的p標籤：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no, address=no, email=no, time=no">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
    <title>Title</title>
</head>
<body>
    <video src="http://www.w3school.com.cn/i/movie.mp4"></video>
    <p>文字內容</p>
</body>
</html>

可是，當用小米2S的自帶瀏覽器（Anndroid版本：5.0.2LRX22G）瀏覽時，卻發現視訊並沒有出現（如圖1所示）：

TB1r_0ONVXXXXbaXXXXXXXXXXXX-720-1280.png

圖1

怎麼破？

為什麼呢？也許你想到的是，有點像是沒有設定寬度和高度導致的。那麼來給設定個樣式給video加個寬度和高度吧：

video{
    width: 320px;
    height: 240px;
}

再試一下，結果video所佔區域是增大了，但是視訊怎麼還是不出現呢（如圖2）？

TB1lGFoNVXXXXcbXVXXXXXXXXXX-720-1280.png

圖2

經過一番試驗，原來是沒有設定controls屬性導致的。於是把<video src="http://www.w3school.com.cn/i/movie.mp4"></video>改成<video src="http://www.w3school.com.cn/i/movie.mp4" controls="controls"></video>，這下，video終於出現了（如圖3）。

TB1fRtHNVXXXXa_XpXXXXXXXXXX-720-1280.png

圖3

結論

經過試驗，在小米2S的自帶瀏覽器（Anndroid版本：5.0.2LRX22G）中，video元素的寬高並不會根據其src所引用的檔案寬高自動撐開，再加上未設定controls屬性，因此也不會顯示播放控制元件，所以最終的結果就是一小塊空白。

接著，我們想在video上面遮蓋一個層，來放置一些內容，這時又會遇到什麼預想不到的問題呢，下回繼續。


相關文章