注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

猪儿不懒

UI设计 前端开发 HTML5+CSS3

 
 
 

日志

 
 

HTML5 -voide标签  

2011-11-20 21:40:55|  分类: 设计教程与素材 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

这里暂时不管voide支持哪些格式的视频,先对voide标签的新属性与JSAPI行进研究!

我们从新建一个voide标签视频开始一点点研究!

打开DW CS新建一个HTML5页面。

输入以下代码:

<video src="voide/movie.ogg"></video>

这样一个最简单的voide视频就建好了!

在支持voide的浏览器里,我们可以看到如图效果(我这里使用的是谷歌浏览器)

11

 

接下来,先看看voide的一些属性

autoplay  值为autoplay  如果出现该属性,则视频在就绪后马上播放

如果不需要的话就不写就行了。

我们把代码改一下:

<video src="voide/movie.ogg" autoplay=“autoplay ”></video>

刷新页面可以看到一开始就播放了!

 

controls  值为controls如果出现该属性,则向用户显示控件,比如播放按钮。

我们再次改一下代码:

<video src="voide/movie.ogg" autoplay=“autoplay ”controls=“controls”></video>

显示如图所示

22

这样我们可以可以控制播放啦!

 

loop 值为loop,如果出现该属性,则当媒介文件完成播放后再次开始播放。

我们改一下代码:

<video src="voide/movie.ogg" autoplay=“autoplay ”controls=“controls”loop=”loop”></video>刷新页面查看效果。

preload值为preload,如果出现该属性,如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。

另外,还有width 和 height属性,大家都明白这是什么,如果不写的话,那就是视频的设置宽高!

以上是voide一些简单的属性,大家只要在页面上写上这个标签就行了,不用再利用任何插件来播放视频!但是播放器的外观都是默认的样式,如果想要改变外观,我们要怎么办呢?下边我们就讲一下如何利JS API进行voide外观改变!

在开始之前,我们先一个个的熟悉voide里js api的东西,因为DW CS5对于HTML5新标签的API没有提示功能,所以这里建议大家下载使用IntelliJ IDEA。

未完待续。。。

  评论这张
 
阅读(648)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017