
video元素及其属性
在上面的案例中,video元素中包含了两个属性:controls及autoplay。属性controls让浏览器显示视频中的控制元素,属性autoplay则让浏览器在准备就绪后自动播放视频。
和canvas元素一样,video元素也属于嵌入式内容(embeddedcontent),也就是说它其实并非直接与HTML关联。如果浏览器不支持video元素,你可以在嵌人式内容中提供的一些备用解决方案(例如后退功能)。若此情况发生在4.所举的范例中,你将会看到一段文字“Sorry,yourbrowserisunabletoplaythisvideo”,另外还可能看到视频中的一个静止画面。
宁波网站建设还是先来详细了解一下元素video中可能出现的属性,如果元素video中不包含src属性,浏览器将生成一个或多个source元素。这个情况下可能用到的属性有src、type及media。相反,若其包含一个及以上的source元素,则无法为视频设置src属性。
浏览器依据两个标准来决定播放哪段source元素:视频MIME类型,以及media属性——如果存在的话。media属性可以通过CSS媒体査询(CSSmediaquery)格式,为视频添加额外的限制。
CSS3中媒体査询指令有了进一步扩展,除了常见关键字诸如print、screen、handheld及projection之外,还出现了更多复合指令。例如:media="screenand(min-width:800px)M这正是视频输出的有趣之处:视频显示尺寸可根据浏览器规格调整,也正是因为这一点,屏幕小、网速慢的移动设备现在也能很好地播放视频。以下案例说明了如何借助媒体查询播放缩减了尺寸的视频:
〈!DOCTYPEhtml〉
〈title〉SimpleVideo〈/title〉
〈videocontrolsautoplay〉
〈sourcesrc='videos/mvi_0.webm*typevideo/webm'media=,*screenand(min-width:500px)"〉
〈sourcesrc='videos/mvi0__qvga.webrn'type='video/webm'media="screenM〉
Sorry,yourbrowserisunabletoplaythisvideo.
〈/video〉
宽度小于像素的浏览器将自动播放较小尺寸的视频mvi_0_qvga.webm。
CSS3媒体查询规范目前还处于起草阶段,尚有细节待调整。
规范的当前进度可见JyW3C网站: http://dev.w3.org/csswg/css3-mediaqueriesf决定播放哪个视频的另一个参考标准是MIME类型。可选择性添加的编解码器让浏览器能够识别相应的视频,甚至在加载前就能知道该视频能否被解码,但这些编解码器到底是什么呢?
本文由乐华网络编辑,转载请注明出处
宁波网站建设www.leseo.net