YouTube將默認(rèn)使用HTML5替代Flash插件

rsTechnica消息：在此之前，每當(dāng)用戶觀看YouTube視頻時(shí)，首先必須安裝Flash插件才能觀看，而且Flash插件的安裝還存在各種各樣的安全隱患。為改變這一狀況，YouTube在1月27日正式宣布，用戶通過(guò)Chrome、IE11、Safari 8 還有beta版的Firebox等眾多瀏覽器播放YouTube的視頻將默認(rèn)使用HTML5，取代原先的Flash。YouTube專(zhuān)門(mén)為HTML5發(fā)表了一篇博文，來(lái)解釋使用HTML5之后如何解決之前出現(xiàn)過(guò)的安全漏洞問(wèn)題。同時(shí)HTML5將會(huì)減少50%的緩沖幾率，使視頻的播放更加流暢，讓用戶觀看視頻時(shí)享受最佳的視覺(jué)體驗(yàn)。（中國(guó)青年網(wǎng)編譯報(bào)道）

、基本繪畫(huà)

在最基本的畫(huà)圖操作中，你需要的只是希望圖像出現(xiàn)處的位置(x和y坐標(biāo))。圖像的位置是相對(duì)于其左上角來(lái)判斷的。使用這種方法，圖像可以簡(jiǎn)單的以其原尺寸被畫(huà)在畫(huà)布上。

drawImage (image, x, y)

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

ctx.drawImage (myImage, 125, 125);

ctx.drawImage (myImage, 210, 210);

縮放及調(diào)整尺寸

改變圖像的尺寸，你需要使用重載的 drawImage 函數(shù)，提供給它希望的寬度和高度參數(shù)。

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);

這個(gè)例子演示了如何畫(huà)一個(gè)比原圖小的圖像，一個(gè)不同長(zhǎng)寬比的圖像和一個(gè)比原圖大的圖像的方法。

二、媒體

一個(gè)響應(yīng)式的布局是實(shí)現(xiàn)響應(yīng)網(wǎng)站的第一步。現(xiàn)在，讓我們把注意力集中在另外一個(gè)現(xiàn)代化網(wǎng)站非常重要的方面：媒體，如視頻或圖像。下面的 CSS 代碼將確保您的圖像將永遠(yuǎn)不會(huì)大于他們的父容器，代碼非常簡(jiǎn)單，適用于大多數(shù)網(wǎng)站。請(qǐng)注意，IE6 等舊的瀏覽器不支持 max-width 指令。

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

雖然上述技術(shù)是有效的，有時(shí)你可能需要有更多的圖像控制權(quán)，例如根據(jù)客戶端的顯示大小，顯示不同的圖像。

這是由 Nicolas Gallagher 發(fā)明的好方法。讓我們看看 HTML：

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

正如你可以看到，我們使用 data-* 屬性來(lái)存儲(chǔ)替換圖像的 URL?，F(xiàn)在，讓我們使用強(qiáng)大的 CSS3 來(lái)為匹配 min-device-width 條件的媒體指定替換圖像：

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

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

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

4. }

5. }

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

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

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

10. }

11. }

三、設(shè)備訪問(wèn)

對(duì)于消除Web應(yīng)用與原生的應(yīng)用，最大的障礙就是瀏覽器需要訪問(wèn)移動(dòng)設(shè)備基本特性的能力，比如說(shuō)照相機(jī)，通訊錄，日歷，加速器等，利用HTML5技術(shù)可以實(shí)現(xiàn)此能力方面，Mozilla一直在努力通過(guò)移動(dòng)瀏覽器Fennec來(lái)將強(qiáng)設(shè)備訪問(wèn)能力。

對(duì)于許多的移動(dòng)開(kāi)發(fā)商而言，能夠提高設(shè)備訪問(wèn)能力是HTML5最令人沸騰的時(shí)代性的革新，這完全的意味著Web應(yīng)用能夠登陸移動(dòng)設(shè)備，而無(wú)需再做任何的PhoneGap式打包。一般游戲開(kāi)發(fā)商當(dāng)然是最開(kāi)心，因?yàn)槟承┬阅芴匦詫?duì)他們來(lái)說(shuō)是封鎖的，比如能整合到游戲中的加速器。

四、離線緩存

相對(duì)而言，離線緩存算是一個(gè)比較新的概念，簡(jiǎn)單來(lái)說(shuō)就是在離線的情況下，web應(yīng)用還可以正常的進(jìn)行運(yùn)行。傳統(tǒng)意義上的web技術(shù)應(yīng)用需要依賴于網(wǎng)絡(luò)，而HTML5的離線緩存可以沖破這個(gè)束縛，利用離線緩存技術(shù)，這樣才可以在離線狀態(tài)下正常使用web應(yīng)用。目前已經(jīng)有產(chǎn)品實(shí)現(xiàn)了這個(gè)方式。比如亞馬遜Kindle的云閱讀器。

、什么是應(yīng)用程序緩存:

HTML5引入了應(yīng)用程序緩存，這意味著web應(yīng)用可進(jìn)行緩存，并可在沒(méi)有因特網(wǎng)

連接時(shí)進(jìn)行訪問(wèn)

2、應(yīng)用緩存的優(yōu)勢(shì):

1): 離線瀏覽-用戶可在應(yīng)用離線時(shí)使用它們

2):速度-已緩存資源加載得更快

3):減少服務(wù)器負(fù)載-瀏覽器將只從服務(wù)器下載更新過(guò)或更改過(guò)的資源

3、實(shí)現(xiàn)緩存:

如需啟用應(yīng)用程序緩存，請(qǐng)?jiān)谖臋n的<html>標(biāo)簽中包含manifest屬性

manifest文件的建議的文件擴(kuò)展名是:’.appcache'"

4、Manifest 文件:

1): CACHE MANIFEST-在此標(biāo)題下列出的文件將在首次下載后進(jìn)行緩存

2): NETWORK -在此標(biāo)題下列出的文件需要與服務(wù)器的連接，且不會(huì)被緩存

3): FALLBACK -在此標(biāo)題下列出的文件規(guī)定當(dāng)頁(yè)面無(wú)法訪問(wèn)時(shí)的回退頁(yè)面(比如

404頁(yè)面)

具體使用：1、在html頁(yè)面的html標(biāo)簽里面添加.appcache 的文件
2、創(chuàng)建對(duì)應(yīng)的.appcache文件
3、在緩存文件里面寫(xiě)上 CACHE MANIFEST 注意是大寫(xiě)哦
接著寫(xiě)上CACHE:../db.html
db.js

db.html頁(yè)面里面：<html manifest="js/db.appcache">db.appcache文件創(chuàng)建在js文件夾里面，創(chuàng)建的時(shí)候，選擇創(chuàng)建文件即可

頁(yè)面加上緩存后，本地打開(kāi)服務(wù)器html5頁(yè)面速度會(huì)變快，或者服務(wù)器沒(méi)有連接上，本地也可以顯示頁(yè)面數(shù)據(jù)

在線咨詢

上一篇：將JavaScript代碼轉(zhuǎn)換為漂亮的SVG流程圖-js2flowchart
下一篇：Python Flashtext 實(shí)現(xiàn)大數(shù)據(jù)集下高效的關(guān)鍵詞查找和替換

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

YouTube將默認(rèn)使用HTML5替代Flash插件

您的項(xiàng)目需求