前端常见兼容问题系列2：视频哪里去了？

最新推荐文章于 2024-09-21 11:29:05 发布

weixin_34342905

最新推荐文章于 2024-09-21 11:29:05 发布

阅读量132

点赞数

文章标签：前端 ViewUI

原文链接：https://yq.aliyun.com/articles/64354

版权

<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所示）：

图1

怎么破？

为什么呢？也许你想到的是，有点像是没有设置宽度和高度导致的。那么来给设置个样式给video加个宽度和高度吧：

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

再试一下，结果video所占区域是增大了，但是视频怎么还是不出现呢（如图2）？

图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）。