技术开发 频道

浏览器全面支持HTML 5 欲挑战RIA三巨头

  作为一等公民探索Video和Audio

  现在互联网上视频资源众多,为了解决这种用户需求,HTML 5包含了对两个新元素的支持:Video和Audio,使用Video元素非常简单,如下所示:

<video src="myMovie.ogg"></video>

   而且你还可以对Video元素使用自动播放、播放控制、宽高度和循环播放等属性。Audio也非常容易添加,以下HTML代码播放一个音频文件。

<audio src="sampleSong.ogg" controls="controls">

   在HTML 5之前,用户必须组合使用OBJECT和EMBED元素来增加视频到页面中,而且需要插件支持,诸如Adobe的Flash。而HTML 5则试图通过直接增加视频CODEC(编解码器)到浏览器中,而绕开Windows Media Player、Flash或DIVX插件,通过编解码器技术可以把一个大视频文件转化成许多更小的流格式文件。目前HTML 5支持两个编解码器标准:H.264视频标准和开源视频编码Ogg,它们实现的视频质量并不差,而且无专利权限制。

  谷歌的Chrome、苹果的Safari和火狐3.6支持HTML 5的VIDEO和AUDIO元素。

  使用Canvas绘画

  过去如果用户希望开发RIA应用,可能要被迫使用Java等插件技术。HTML 5限制支持一个名为CANVAS的新富体验媒体元素,让用户可以无需插件就实现RIA体验,它可以让用户以编程方式绘制2D图像。

  CANVAS元素主要依赖JavaScript来实现绘图。基本的CANVAS元素包含宽度、高度和ID属性,如下所示:

<canvas id="myCanvas" width="500" height="500"></canvas>

  我们可以使用如下JavaScript代码来描述CANVAS内容:

<script type="text/javascript">
function draw(){    
var canvas = document.getElementById('myCanvas');    
if (canvas.getContext){      
var defineContext = canvas.getContext('2d');    
}  
}  
</script>

  CANVAS元素还在继续发展。2009年早些时候,Mozilla提出了CANVAS 3D,能够无需插件在页面中展示3D模型。

  在HTML 5中使用CSS 3

  在HTML 5中,元素被用来在描述层面上安排和规划内容。这并不意味着页面会非常美观。页面上内容的展现还要通过CSS 3来控制。但是,使用CSS 3来描述页面外观并非是HTML 5创新。CSS技术最初在1997年亮相,目前在HTML 5中是其第三个主要版本。幸运的是,CSS 3向前兼容CSS 1和CSS 2。

  CSS 3引入了许多用户可以在页面上使用的新设计工具,其中部分包括:嵌入式字体、阴影和动画。

  HTML 5采用新技术来支持真正的字体嵌入。其中三种值得推荐的潜入字体标准是:TrueType、OpenType和Scalable Vector Graphic Fonts。

0
相关文章