video 在各浏览器中显示的差异
video 支持的基本视频格式: mp4 / webm / ogv
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- video
- </title>
- </head>
- <body>
- <video src="data/imooc.mp4">
- </video>
- </body>
- </HTML>
在 Chrome 浏览器中显示一片黑, 需要加上 controls
<video src="data/imooc.mp4" controls></video>
src-- 视频链接
controls-- 视频控制器
Chrome : 三种格式都支持
火狐: 三种格式都支持
Safari : 只支持 mp4
欧朋: 三种格式都支持
IE8 及以下: 不支持 video 标签
IE9+: 支持 video 标签, 只支持 mp4
在不同浏览器中, 默认的样式不同
video 标签的另一种兼容写法:
source 标签, 也可以放 src 属性, 如果当前 source 源无效, 会继续尝试下一个, 直到成功
专门建立的学习 Q-q-u-n: 784783012 , 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习技巧
- (从零基础开始到 Web 前端项目实战教程, 学习工具, 全栈开发学习路线以及规划)
- <video controls>
- <source src="data/imooc.ogv"></source>
- <source src="data/imooc.webm"></source>
- <source src="data/imooc.mp4"></source> 您的浏览器不支持, 请升级浏览器 </video>
video 标签常用属性
src 和 controls 可以看做是 video 标签的必备属性
width height
视频播放器默认的宽高就是视频的原始宽高
可以使用 width 和 height 来改变视频播放器的宽高
默认视频是按照比例进行缩放, 如果同时设置了宽度和高度, 那么视频播放器会按照设置的高度, 而视频内容依然会保持比例, 位置在视频播放器的中心位置
<video src="data/imooc.mp4" controls width="200" height="400"></video>
** autoplay 自动播放 **
在 Chrome 浏览器中有 bug, 无法自动播放
<video src="data/imooc.mp4" controls autoplay></video>
loop 循环
不设置 loop, 视频播放完毕后会停止
设置 loop, 视频播放完毕后会自动进行下一次播放
<video src="data/imooc.mp4" controls loop></video>
poster 视频封面, 只在视频第一次加载时出现
<video src="data/imooc.mp4" controls poster="data/poster.jpg"></video>
muted 视频静音
Chrome 默认 autoplay 不会进行自动播放, 但如果设置了 muted, 则可以进行自动播放
<video src="data/imooc.mp4" controls muted autoplay></video>
来源: http://www.jianshu.com/p/227e6b0f3bc7