编者序言:今天晚上闲来无事,开始想到HTML5标准已经发布有了一段时间,听说HTML5是新一代的HTML,HTML5有大量的新特性诞生,自己也去稍作了解吧,于是乎打开360综合搜索,进行搜索到w3c的 html5教程网站开始查看学习;
第一章:HTML5小案例
先是一个HTML5并编写的小实例,自己直接复制网站上的代码保存到本地html5.html文件中,然后通过360浏览器打开查看效果,居然显示 一行 英文:
Your browser does not support the video tag. 还好我能看得懂, 您的浏览器不支持video标签;可能是咱的浏览器的确是版本太低了吧,好久没更新了,于是打开360软件管家看看浏览器是不是有新版本需要更新了。打开一看本人电脑上安装的是IE8版本,没有提示要更新IE9.这就不知道怎么搞了,既然html5不支持video标签,同时我的浏览器版本也暂时升级不到IE9,那我还是先去学习其他的HTML5标签好了。总之今天总的展示给大家一个HTML5编写的网页。
第二章:HTML5新增加的新特性:
1:用于绘画的 canvas 元素
2:用于媒介回放的 video 和 audio 元素
3:对本地离线存储的更好的支持
4:新的特殊内容元素,比如 article、footer、header、nav、section
5:新的表单控件,比如 calendar、date、time、email、url、search
同时了解到,最新版本的Chrome,Firefox,和IE9才会支持HTML5的一部分特性,这么一看好像HTML5还是有那么一点点遥远。
第三章:Web上的视频
这一章真够神奇的,首先来一个小测验,一个Check按钮摆在 哪里,让你点击测试自己的电脑是否支持HTML5视频,果断点击 ,结果显示 Sorry. No video support.
对于学习过网页设计的我们来讲,都知道大多数Web上的视频还是通过插件来实现的,比如常用的flash插件,然后,并不是所有的浏览器都支持相同的插件,就好比我们总是遇到在打开浏览器的时候,有提示flash插件更新的提醒,好麻烦,但也总是无奈地接受,HTML5规定了一种通过video元素来包含视频的标准方法,彻底解决掉浏览器不支持全部插件而带来的 烦恼。
借助HTML5在Web上显示视频,您所需要做的工作如下:
<video src="movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag. </video>
control 属性供添加播放、暂停和音量控件,同时video元素中也可以加上显示在web上视频的高度和宽度属性;<video> 与 </video> 之间的内容是供不支持 video 元素的浏览器显示的;比如我们大多数人目前的浏览器就会显示这句话:Your browser does not support the video tag.
<video> 标签的属性学习
属性 | 属性值 | 作用简单描述 |
autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
height | pixels | 高度,用于设置视频播放器的高度 |
loop | loop | 当视频播放器播放完毕后再次开始重新播放 |
preload | preload | 预先加载,在页面加载过程中进行加载视频文件,并预备播放,如果出现了autoplay属性,则该属性无效 |
src | url | 设置Web页面中需要播放视频的URL |
width | pixels | 设置视频播放器的显示宽度 |
上面对video标签的属性进行了简单的学习,肯定会有同学问到,在HTML5中,video除了有属性外是不是也有事件和方法呢?答案是肯定的,的确有。
在HTML5中对于video标签的方法和事件,统一使用DOM进行控制。让我们一起来学习更多关于video标签的方法属性和事件吧。
属性 | 方法 | 事件 |
currentSrc | play() 播放 | play |
currentTime | pause() 暂停 | pause |
videoWidth | load() 加载 | progress |
videoHeight | canPlayType | error |
duration | timeupdate | |
ended | ended | |
error | abort | |
paused | empty | |
muted | emptied | |
seeking | waiting | |
volume | loadedmetadata | |
height | ||
width |
汤阴招聘网 特别说明:在所有属性中,只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后,其他属性才有效果。