网站建设的video元素及其属性

发布时间:2014-10-27 8:05:56

网站建设的video元素及其属性

  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
上一篇:
“热带商品”:去旧迎新可口可乐当年青率改动配方,推出“新可乐”,成果引发一场剧烈争辩。半个世纪过去了
下一篇:
连到您页面的PageA以Link给PageB投出一票,PageA的PRValue即是权重。连到您页面
关于乐华
乐华介绍
乐华思维
人才招聘
使用条款
隐私保护
RSS订阅
网站地图
新闻动态
乐华观点
行业动态
频道介绍
服务介绍
案例展示
品牌研究
品牌理论
品牌体系
联系我们
400-680-2900
社会媒体
微信公众平台
微信公众平台