本文详细介绍了HTML5的video标签，包括src、poster、preload等属性的使用，以及在不同浏览器中的兼容性问题。同时，文章还列举了在开发过程中遇到的坑，如MP4文件播放问题，iOS设备的自动播放限制等，并提供了相应的解决方案。
一、基本
video标签在兼容性上还是比较差的，如果要在页面中使用video标签，需要考虑三种情况，支持Ogg Theora或者VP8的(Opera、Mozilla、Chrome)，支持H.264的(Safari、IE 9、Chrome)，都不支持的(IE6、7、8)。但是由于H5在移动设备上展现，基本都是使用webkit内核，只需要考虑Android、IOS设备上的差异。
width="640" height="1280">
浏览器不支持，换个牛逼点的吧
video标签含有src、poster、preload、autoplay、loop、controls、width、height等几个属性， 以及一个内部使用的标签。video标签内除了可以包含标签外，还可以包含当指定的视频都不能 播放时，返回的内容，如上面的文字。
1、src
就是媒体文件的URL，不用这个标签也可以使用内部标签，但是个人觉得用src好看些~同样各个浏览器对媒体文件的格式有要求，就支持3种格式ogg、mp4、webM，兼容性如下
格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No
2、poster
poster属性用于指定一张图片的URL，在当前视频数据无效时显示。视频数据无效可能是视频正在加载，可能是视频地址错误等等。这个属性还是蛮有用处的，特别是在网络情况不怎么样的时候，把视频的第一帧图片放在那，然后当视频播放时就没有违和感。
3、preload
此属性用于定义视频是否预加载。属性有三个可选择的值：none、metadata
最低0.47元/天 解锁文章
扫一扫
38万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
