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

    xiaoxiao2026-06-04  29

    <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)。

    图3

    结论

    经过试验,在小米2S的自带浏览器(Anndroid版本:5.0.2LRX22G)中,video元素的宽高并不会根据其src所引用的文件宽高自动撑开,再加上未设置controls属性,因此也不会显示播放控件,所以最终的结果就是一小块空白。

    接着,我们想在video上面遮盖一个层,来放置一些内容,这时又会遇到什么预想不到的问题呢,下回继续。

    相关资源:python入门教程(PDF版)
    最新回复(0)