web前端入门到实战:HTML5新增的视频功能——video属性
video在各浏览器中显示的差异
video支持的基本视频格式:mp4 / webm / ogv
video
在chrome浏览器中显示一片黑,需要加上controls
src--视频链接
controls--视频控制器
chrome :三种格式都支持
火狐:三种格式都支持
safari :只支持mp4
欧朋:三种格式都支持
IE8及以下:不支持video标签
IE9+:支持video标签,只支持mp4
在不同浏览器中,默认的样式不同
video标签的另一种兼容写法:
source 标签,也可以放src属性,如果当前source源无效,会继续尝试下一个,直到成功
专门建立的学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到WEB前端项目实战教程,学习工具,全栈开发学习路线以及规划)
video标签常用属性
src和controls可以看做是video标签的必备属性
width height
视频播放器默认的宽高就是视频的原始宽高
可以使用width和height来改变视频播放器的宽高
默认视频是按照比例进行缩放,如果同时设置了宽度和高度,那么视频播放器会按照设置的高度,而视频内容依然会保持比例,位置在视频播放器的中心位置
** autoplay 自动播放**
在chrome浏览器中有bug,无法自动播放
loop 循环
不设置loop,视频播放完毕后会停止
设置loop,视频播放完毕后会自动进行下一次播放
poster 视频封面,只在视频第一次加载时出现
muted 视频静音
chrome默认autoplay不会进行自动播放,但如果设置了muted,则可以进行自动播放
发表评论 (审核通过后显示评论):