整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

YouTube将默认使用HTML5替代Flash插件

rsTechnica消息:在此之前,每当用户观看YouTube视频时,首先必须安装Flash插件才能观看,而且Flash插件的安装还存在各种各样的安全隐患。为改变这一状况,YouTube在1月27日正式宣布,用户通过Chrome、IE11、Safari 8 还有beta版的Firebox等众多浏览器播放YouTube的视频将默认使用HTML5,取代原先的Flash。YouTube专门为HTML5发表了一篇博文,来解释使用HTML5之后如何解决之前出现过的安全漏洞问题。同时HTML5将会减少50%的缓冲几率,使视频的播放更加流畅,让用户观看视频时享受最佳的视觉体验。(中国青年网编译报道)

基本绘画

在最基本的画图操作中,你需要的只是希望图像出现处的位置(x和y坐标)。图像的位置是相对于其左上角来判断的。使用这种方法,图像可以简单的以其原尺寸被画在画布上。

drawImage (image, x, y)

var ctx = canvas.getContext (’2d’);ctx.drawImage (myImage, 50, 50);

ctx.drawImage (myImage, 125, 125);

ctx.drawImage (myImage, 210, 210);

缩放及调整尺寸

改变图像的尺寸,你需要使用重载的 drawImage 函数,提供给它希望的宽度和高度参数。

drawImage (image, x, y, width, border=1 Height)

var ctx = canvas.getContext (’2d’);ctx.drawImage (myImage, 50, 50, 100, 100);

ctx.drawImage (myImage, 125, 125, 200, 50);

ctx.drawImage (myImage, 210, 210, 500, 500);

这个例子演示了如何画一个比原图小的图像,一个不同长宽比的图像和一个比原图大的图像的方法。

二、媒体

一个响应式的布局是实现响应网站的第一步。现在,让我们把注意力集中在另外一个现代化网站非常重要的方面:媒体,如视频或图像。 下面的 CSS 代码将确保您的图像将永远不会大于他们的父容器,代码非常简单,适用于大多数网站。请注意,IE6 等旧的浏览器不支持 max-width 指令。


1. img { max-width: 100%; }

虽然上述技术是有效的,有时你可能需要有更多的图像控制权,例如根据客户端的显示大小,显示不同的图像。

这是由 Nicolas Gallagher 发明的好方法。让我们看看 HTML:

1. <imgsrc="image.jpg"data-src-600px="image-600px.jpg"data-src-800px="image-800px.jpg"alt="">

正如你可以看到,我们使用 data-* 属性来存储替换图像的 URL。现在,让我们使用强大的 CSS3 来为匹配 min-device-width 条件的媒体指定替换图像:

1. @media (min-device-width:600px) {

2. img[data-src-600px] {

3. content: attr(data-src-600px, url);

4. }

5. }

6.

7. @media (min-device-width:800px) {

8. img[data-src-800px] {

9. content: attr(data-src-800px, url);

10. }

11. }

三、设备访问

对于消除Web应用与原生的应用,最大的障碍就是浏览器需要访问移动设备基本特性的能力,比如说照相机,通讯录,日历,加速器等,利用HTML5技术可以实现此能力方面,Mozilla一直在努力通过移动浏览器Fennec来将强设备访问能力。

对于许多的移动开发商而言,能够提高设备访问能力是HTML5最令人沸腾的时代性的革新,这完全的意味着Web应用能够登陆移动设备,而无需再做任何的PhoneGap式打包。一般游戏开发商当然是最开心,因为某些性能特性对他们来说是封锁的,比如能整合到游戏中的加速器。

四、离线缓存

相对而言,离线缓存算是一个比较新的概念,简单来说就是在离线的情况下,web应用还可以正常的进行运行。传统意义上的web技术应用需要依赖于网络,而HTML5的离线缓存可以冲破这个束缚,利用离线缓存技术,这样才可以在离线状态下正常使用web应用。目前已经有产品实现了这个方式。比如亚马逊Kindle的云阅读器。

、什么是应用程序缓存:

HTML5引入了应用程序缓存,这意味着web应用可进行缓存,并可在没有因特网

连接时进行访问

2、应用缓存的优势:

1): 离线浏览-用户可在应用离线时使用它们

2):速度-已缓存资源加载得更快

3):减少服务器负载-浏览器将只从服务器下载更新过或更改过的资源

3、实现缓存:

如需启用应用程序缓存,请在文档的<html>标签中包含manifest属性

manifest文件的建议的文件扩展名是:’.appcache'"

4、Manifest 文件:

1): CACHE MANIFEST-在此标题下列出的文件将在首次下载后进行缓存

2): NETWORK -在此标题下列出的文件需要与服务器的连接, 且不会被缓存

3): FALLBACK -在此标题下列出的文件规定当页面无法访问时的回退页面(比如

404页面)


具体使用:1、在html页面的html标签里面添加.appcache 的文件
2、创建对应的.appcache文件
3、在缓存文件里面写上
CACHE MANIFEST 注意是大写哦
接着写上CACHE:../db.html
db.js


db.html页面里面:<html manifest="js/db.appcache">db.appcache文件创建在js文件夹里面,创建的时候,选择创建文件即可



页面加上缓存后,本地打开服务器html5页面速度会变快,或者服务器没有连接上,本地也可以显示页面数据