HTML5新增的视频功能——video属性_html-js-css

概述video在各浏览器中显示的差异 video支持的基本视频格式：mp4 / webm / ogv <!DOCTYPE html> <html lang="en"&

vIDeo在各浏览器中显示的差异

vIDeo支持的基本视频格式：mp4 / webm / ogv

<!DOCTYPE HTML><HTML lang="en"head>    Meta charset="UTF-8"Title>vIDeo</bodyvIDeo src="data/imooc.mp4"></vIDeoHTML>

在Chrome浏览器中显示一片黑，需要加上controls

="data/imooc.mp4" controls>

src--视频链接

controls--视频控制器

Chrome ：三种格式都支持

火狐：三种格式都支持

safari ：只支持mp4

欧朋：三种格式都支持

ie8及以下：不支持vIDeo标签

IE9+：支持vIDeo标签，只支持mp4

在不同浏览器中，默认的样式不同

vIDeo标签的另一种兼容写法：

source 标签，也可以放src属性，如果当前source源无效，会继续尝试下一个，直到成功

    controls>        source ="data/imooc.ogv"source="data/imooc.webm">        您的浏览器不支持，请升级浏览器    >

vIDeo标签常用属性

src和controls可以看做是vIDeo标签的必备属性

wIDth height

视频播放器默认的宽高就是视频的原始宽高

可以使用wIDth和height来改变视频播放器的宽高

默认视频是按照比例进行缩放，如果同时设置了宽度和高度，那么视频播放器会按照设置的高度，而视频内容依然会保持比例，位置在视频播放器的中心位置

 controls wIDth="200" height="400">

autoplay 自动播放

在Chrome浏览器中有BUG，无法自动播放

 controls autoplay>

loop 循环

不设置loop，视频播放完毕后会停止

设置loop，视频播放完毕后会自动进行下一次播放

 controls loop>

poster 视频封面，只在视频第一次加载时出现

 controls poster="data/poster.jpg">

muted 视频静音

Chrome默认autoplay不会进行自动播放，但如果设置了muted，则可以进行自动播放

 controls muted autoplay>

总结

以上是内存溢出为你收集整理的HTML5新增的视频功能——video属性全部内容，希望文章能够帮你解决HTML5新增的视频功能——video属性所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

HTML5新增的视频功能——video属性