`
zhangbaoming815
  • 浏览: 147532 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

初识html5

阅读更多

html5的一些新特性:

1.添加了<video>和<audio>媒体文件

2.支持本地文件存储

3.新的内容控制元素,如<article>、<footer>、<header>、<nav>和<section>

4.新的表单控件,如: calendar、date、time、email、url和search

 

浏览器对html5的支持:

html5不是官方的标准,所以并没有浏览器完全支持hmtl5

但是所有的主流浏览器如:Firefox、Opera、Chrome等都相继的把html5的新特性添加到最新版本的浏览器中

 

自从1999年的HTML 4.0.1版本以后,因特网有了很大的改变。

现在,HTML 4.0.1中的一些元素已经被丢弃,不会再使用,这些元素在html5中已经被移除或者被重写。

为了更好的使用因特网,html5中添加了更好容易架构和处理的的新元素

 

在html5中嵌入视频变得非常的简单:

首先得确保你所用的浏览器是支持html5 video

知道现在,大多数的视频都是通过插件如 flash来播放,在网页上播放视频并没有一个标准。

html5定义一个标签指定了一种标准的方式将视频文件嵌入到网页: <video>元素

浏览器支持:

Internet Explorer 9, Firefox, Opera, Chrome, and Safari支持 <video> element.

Internet Explorer 8以及更早的版本并不支持<video>元素

下面用一个例子来在网页上嵌入视频文件:

在html5的body中加入下面的代码:

	<video width="320" height="240" controls="controls">
		<source src="movie.mp3" type="video/mp4" />
		Your browser does not support the video tag.
	</video>
 在使用的时候最好给添加上宽度和高度,这样在网页加载不至于出现布局问题,在video的标签中间加上 Your browser does not suppot the video tag,这样如果当前的浏览器不支持video的时候能给用户一个提示

html5 的 video 元素也有方法、属性和事件
播放事件: playing,pausing和loading
给播放器设置不同的事件,播放和停止事件,频幕的大小事件:
body的内容如下:
	The content of the document ....
	<br />
	<div style="text-align:center"> 
			<button onclick="playPause()">Play/Pause</button> 
			<button onclick="makeBig()">Big</button>
			<button onclick="makeSmall()">Small</button>
			<button onclick="makeNormal()">Normal</button>
		<br /> 
		<video id="myVideo" width="320" height="240" controls="controls">
			<source src="movie.mp3" type="video/mp4" />
			Your browser does not support the video tag.
		</video>
	</div>
	<script type="text/javascript"> 
		var myVideo=document.getElementById("myVideo"); 

		function playPause()
		{ 
			if (myVideo.paused) 
				myVideo.play(); 
			else 
				myVideo.pause(); 
		} 

		function makeBig()
		{ 
			myVideo.width=560; 
		} 

		function makeSmall()
		{ 
			myVideo.width=320; 
		} 

		function makeNormal()
		{ 
			myVideo.width=420; 
		} 
	</script> 
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics