整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          Web端文件上傳從未如此簡單,但卻很強(qiáng)大-bootstrap-fileinput

          對(duì)于文件上傳,我們并不陌生,HTML自帶了上傳文件表單,但是我們都知道,那些真的滿足不了我們的大多數(shù)需求,諸如多選、預(yù)覽、刪除、拖拽等各類繁雜的功能,原生的文件上傳Input確實(shí)很難滿足我們的需求,因此就誕生了很多第三方的上傳組件,比如大家熟知的百度WebUploader、之前我也有介紹過類似的組件,功能都非常豐富,大家可以根據(jù)自己的需求酌情選擇,符合自己的需要才是最好的,當(dāng)然原生的或許就夠了呢!



          Github

          https://github.com/kartik-v/bootstrap-fileinput

          此項(xiàng)目一共多大一千多次提交,60+發(fā)布以及,4k+star,可見還是很受廣大開發(fā)者的認(rèn)可的!



          功能描述

          以下是借助翻譯將功能大致描述下:

          1、Bootstrap 3.x和4.x的增強(qiáng)型HTML 5文件輸入以及各種文件的文件預(yù)覽,提供多種選擇,可恢復(fù)的塊上傳等;



          2、該插件允許您使用一種簡單的方法來設(shè)置高級(jí)文件選擇器/上傳控件,該控件專為Bootstrap 3.x或4.x CSS3樣式而設(shè)計(jì);



          3、它通過提供支持來預(yù)覽各種文件,即圖像,文本,html,視頻,音頻,閃存和對(duì)象,進(jìn)一步增強(qiáng)了文件輸入功能。



          4、此外,它還包括基于AJAX的上傳,拖放文件,查看上傳進(jìn)度以及有選擇地預(yù)覽,添加或刪除文件。



          安裝使用

          【1】使用bower

          bower install bootstrap-fileinput
          

          【2】使用npm

          npm install bootstrap-fileinput
          

          【3】初始化,例如

          //默認(rèn)
          $("#input-id").fileinput();
          // 外加插件
          $("#input-id").fileinput({'showUpload':false, 'previewFileType':'any'});
          

          所有特性

          文件輸入功能(翻譯+意譯):

          1、該插件將簡單的HTML文件輸入轉(zhuǎn)換為高級(jí)文件選擇器控件。對(duì)于不支持JQuery或Javascript的瀏覽器,將有助于回退到正常的HTML文件輸入。


          2、文件輸入包含以下三個(gè)部分,其中包含用于控制顯示的選項(xiàng)和模板:

          • 文件標(biāo)題部分:顯示所選文件的簡要信息
          • 文件操作按鈕部分:瀏覽,刪除和上傳文件。
          • 文件預(yù)覽部分:在客戶端上顯示所選文件以進(jìn)行預(yù)覽(支持圖像,文本,閃存和視頻文件類型的預(yù)覽)。其他文件類型將顯示為普通縮略圖。

          3、type = file如果設(shè)置了插件,插件會(huì)自動(dòng)將輸入轉(zhuǎn)換為高級(jí)文件選擇器輸入class = file。輸入的所有選項(xiàng)都可以作為HTML5 data屬性傳遞 。


          4、能夠選擇和預(yù)覽多個(gè)文件。使用HTML 5文件閱讀器API來讀取和預(yù)覽文件。如果選擇了多個(gè)文件,則顯示正在加載到預(yù)覽區(qū)域的文件的進(jìn)度。


          5、提供預(yù)定義的模板和CSS類,可根據(jù)需要更改為文件輸入顯示的樣式。


          6、能夠配置插件以顯示帶有初始標(biāo)題的圖像/文件初始預(yù)覽 (對(duì)于記錄更新方案更有用)。參考initialPreview, initialPreviewConfig,和 initialCaption 插件選項(xiàng)部分中的屬性用于配置此屬性。


          7、能夠?qū)?nèi)容縮放為詳細(xì)預(yù)覽。在預(yù)覽中查看縮放內(nèi)容的幻燈片,最大化為無邊框或全屏預(yù)覽。


          8、能夠通過拖放在初始預(yù)覽中對(duì)內(nèi)容進(jìn)行排序/重新排列。


          9、能夠完全控制窗口小部件并控制樣式和布局。


          10、通過語言環(huán)境/翻譯支持同一頁面上的多語言小部件。


          11、顯示/隱藏以下任何或所有內(nèi)容的選項(xiàng):

          • 標(biāo)題部分
          • 預(yù)覽部分
          • 上傳按鈕
          • 刪除按鈕

          12、自定義目標(biāo)容器元素的位置以顯示整個(gè)插件,標(biāo)題容器,標(biāo)題文本,預(yù)覽容器,預(yù)覽圖像和預(yù)覽狀態(tài)。


          13、對(duì)于文本文件預(yù)覽,將文本自動(dòng)換行到縮略圖寬度,并顯示環(huán)繞指示符以在懸停時(shí)顯示完整文本。您可以自定義換行指示符(默認(rèn)為...)。


          14、自定義預(yù)覽,進(jìn)度和所選文件的信息。


          15、上傳操作默認(rèn)為表單提交。支持上傳路由/服務(wù)器操作參數(shù),用于基于自定義ajax的上傳


          16、觸發(fā)JQuery事件以進(jìn)行高級(jí)開發(fā)。目前可用的事件是filereset, fileclear,filecleared,fileloaded,和fileerror。


          17、已禁用和只讀文件輸入支持。


          18、動(dòng)態(tài)自動(dòng)調(diào)整超過容器寬度的長文件名的文件標(biāo)題。


          19、提升fileimageuploaded在預(yù)覽容器上完全加載圖像后觸發(fā)的新事件。


          20、當(dāng)預(yù)覽圖像超出預(yù)覽容器的大小時(shí)自動(dòng)調(diào)整大小。


          21、完全模板化和可擴(kuò)展,允許以開發(fā)人員想要的方式配置文件輸入。


          22、基于各種文件預(yù)覽類型預(yù)覽智能。內(nèi)置的文件支持類型分類為 image,text,html,video,audio,flash, object,和other。


          23、allowedPreviewTypes:您現(xiàn)在可以配置允許將哪些文件類型顯示為預(yù)覽。默認(rèn)為['image', 'html', 'text', 'video', 'audio', 'flash', 'object']。因此,默認(rèn)情況下,所有文件類型都被視為要預(yù)覽的對(duì)象。對(duì)于只有exampleTo預(yù)覽image 和video,你可以將其設(shè)置為['image', 'video']。要禁用所有文件類型的內(nèi)容預(yù)覽并將其顯示previewIcon為縮略圖,請(qǐng)將其設(shè)置為null,empty或false。


          24、allowedPreviewMimeTypes:除此之外allowedPreviewTypes,您還可以控制可以顯示哪些mime類型以供預(yù)覽。默認(rèn)為null,表示支持所有mime類型。>注意:對(duì)于2.5.0版,您現(xiàn)在可以通過設(shè)置allowedFileTypes和控制允許上載哪些文件類型或擴(kuò)展名allowedFileExtensions。


          25、layoutTemplates:允許您在一個(gè)屬性中配置所有布局模板設(shè)置。可配置的布局的對(duì)象是:main1,main2, preview,caption,和modal。


          26、previewTemplates:每種預(yù)覽類型的所有預(yù)覽模板都已合并為一個(gè)屬性,而不是圖像,文本等的單獨(dú)模板。鍵是設(shè)置的格式allowedPreviewTypes,值是用于預(yù)覽的模板。下面是每個(gè)預(yù)覽文件類型(默認(rèn)預(yù)置的模板generic,image,text,html, video,audio,flash,object,和other)。該generic模板僅用于initialPreview使用直接標(biāo)記顯示 內(nèi)容。


          27、previewSettings:允許您為每個(gè)預(yù)覽圖像類型配置寬度和高度。該插件具有默認(rèn)的寬度和預(yù)定義的每個(gè)類型,即高度 image,text,html,video,audio,flash,和object。


          28、fileTypeSettings:允許您使用回調(diào)配置和標(biāo)識(shí)每個(gè)預(yù)覽文件類型。該插件具有預(yù)定義識(shí)別不同類型即默認(rèn)回調(diào) image,text,html,video,audio,flash,和object。


          29、替換模板中的標(biāo)簽已得到增強(qiáng)。使用此版本,它將自動(dòng)檢查要在模板字符串中替換的每個(gè)標(biāo)記的多次出現(xiàn)。


          30、通過在任何其他事件中將輸出返回到中止上載,操作事件并輕松添加自己的自定義驗(yàn)證消息。


          31、支持多語言和區(qū)域設(shè)置。


          總結(jié)

          好用的插件千千萬,當(dāng)你正缺少這樣一個(gè)強(qiáng)大的文件上傳組件時(shí),bootstrap-fileinput或許能幫到你,它雖然不是我用過最好的,但至少能符合很多場景下的需求了,特別適合對(duì)于文件上傳非常頻繁的時(shí)候來說,真的非常有用,希望能給你帶來幫助,當(dāng)然您如果有更好的推薦,則感謝在評(píng)論區(qū)留言分享!

          PS:筆者近期想深入的學(xué)習(xí)下Javascript,小伙伴們知道現(xiàn)在有什么書籍比較合適么,網(wǎng)絡(luò)上的系統(tǒng)化的較少,想要系統(tǒng)的深入學(xué)習(xí)下,感謝推薦的道友們!

          們?cè)趯W(xué)習(xí)Web開發(fā)的過程中會(huì)使用到一些HTML5 的特效模板,接下來我們?yōu)榇蠹彝扑]一些超贊的HTML5動(dòng)畫高級(jí)特效,接著往下看,你會(huì)覺得這些專業(yè)人士制作的HTML5高級(jí)特效都是非常炫酷,而且很是實(shí)用的。

          在今天的web開發(fā)入門的學(xué)習(xí)中將它們分享給各位HTML5動(dòng)畫愛好者,也許你能用到這些 HTML5 動(dòng)畫,希望大家能夠喜歡,我們可以讓一張張普通的圖片變酷炫感十足,特別是在利用HTML5的時(shí)候,可以實(shí)現(xiàn)一些很復(fù)雜的高級(jí)特效。

          好了,接下來,我們?yōu)榇蠹乙灰唤榻B一些在web開發(fā)技術(shù)中人氣超高的HTML5特效欣賞。

          1.滑動(dòng)觸發(fā)

          騰訊視頻:這一幕你期待已久

          長頁HTML5,滑動(dòng)觸發(fā)動(dòng)效,和呆板的幻燈片式樣的HTML5頁面拉開了距離。Epub360雖然能實(shí)現(xiàn)帶動(dòng)效帶觸發(fā)的長頁,但是目前暫時(shí)還不能實(shí)現(xiàn)這種滑動(dòng)觸發(fā)動(dòng)畫。

          2. 序列幀動(dòng)畫

          大眾點(diǎn)評(píng):我們之間只有一個(gè)字

          百度百科:序列幀動(dòng)畫是只在時(shí)間軸的每幀上逐幀繪制不同的內(nèi)容,使其連續(xù)播放而成動(dòng)畫。 因?yàn)橹饚瑒?dòng)畫的幀序列內(nèi)容不一樣,不但給制作增加了負(fù)擔(dān)而且最終輸出的文件量也很大,但它的優(yōu)勢(shì)也很明顯:逐幀動(dòng)畫具有非常大的靈活性,幾乎可以表現(xiàn)任何想表現(xiàn)的內(nèi)容,而它類似與電影的播放模式,很適合于表演細(xì)膩的動(dòng)畫。例如:人物或動(dòng)物急劇轉(zhuǎn)身、頭發(fā)及衣服的飄動(dòng)、走路、說話以及精致的3D效果等等。

          3. 粒子特效

          星際傳奇:這是探索宇宙的門票

          百度百科:為模擬現(xiàn)實(shí)中的水、火、霧、氣等效果由各種三維軟件開發(fā)的制作模塊,原理是將無數(shù)的單個(gè)粒子組合使其呈現(xiàn)出固定形態(tài),借由控制器,腳本來控制其整體或單個(gè)的運(yùn)動(dòng),模擬出現(xiàn)真實(shí)的效果。

          4. SVG路徑動(dòng)畫

          元小望:SVG練習(xí)NO.1_描述孤獨(dú)

          簡而言之,就是讓SVG的描邊像是有人繪制一樣的動(dòng)畫效果。動(dòng)畫輕巧不失真,特別適合那些崇尚簡約設(shè)計(jì)風(fēng)格的網(wǎng)頁。

          5. 全線性動(dòng)畫

          騰訊UP大會(huì):生命之下,想象之上

          全線性動(dòng)畫可以理解為動(dòng)畫連續(xù),幾乎不間斷播放,像視頻一樣流暢細(xì)膩。

          這支HTML5頁面打破了傳統(tǒng)幻燈片式的呈現(xiàn)方式,塑造出了一種寬廣、素雅、幽靜的整體感受,該作品也被很多人推崇為HTML5里的動(dòng)畫片。

          6. 全景

          杜蕾斯的第一座美術(shù)館

          虛擬全景美術(shù)館的概念并不新鮮。其鼻祖應(yīng)該是 Google 的 Art Project,讓你能夠在線瀏覽全世界大多數(shù)博物館和美術(shù)館。杜蕾斯“美術(shù)館”的創(chuàng)新,在于它其實(shí)是熱門廣告形式HTML5頁面的偽裝。“我們想要通過多重手段(比如館內(nèi)的彩蛋、12 點(diǎn)閉館無法訪問等等)來創(chuàng)造一個(gè)虛擬的真實(shí)空間,而不是傳統(tǒng)HTML5的單線程教育的邏輯。” Socialab 杜蕾斯組的負(fù)責(zé)人說,“液體主義群展將是杜蕾斯美術(shù)館無數(shù)展覽中的第一個(gè)。”

          7. 3D

          康師傅:2015最飛羊的新春祝愿

          祝福燈籠可以360旋轉(zhuǎn)呈現(xiàn),而且具有夜空繁星中題字燈籠飛來飛去的3D炫目效果,彰顯“最飛羊的新春祝愿”。其中意趣和精妙所在,恐非文字所能表述。

          8. 點(diǎn)擊碎屏

          大眾點(diǎn)評(píng):這個(gè)陌生來電你敢接嗎?

          “點(diǎn)擊屏幕”不新鮮,但是這種屏幕擊碎的畫面好像也特別討人喜歡,大概有三輪左右的“擊碎”動(dòng)作,這是整個(gè)HTML5的互動(dòng)高峰。發(fā)現(xiàn)這種“屏幕敲擊”的常規(guī)動(dòng)作特別有慣性,點(diǎn)一點(diǎn)就停不下來。是不是抓住了手機(jī)族的某些“強(qiáng)迫癥”特點(diǎn)。

          9. 長按逐字

          韓寒再談一加:1步1步看清韓寒

          整個(gè)HTML5頁面用打字機(jī)的形式呈現(xiàn),隨著用戶按下按鈕,紙片會(huì)逐漸顯示出韓寒從1999年起,為人熟知或不知的成長軌跡。觸發(fā)逐字等動(dòng)效很有真實(shí)感。

          10. Cinemagraphic

          Levi’s: “換”醒你的夏天

          什么是Cinemegraphic?如果你不知道,就有點(diǎn)OUT了。顧名思義,Cinema是電影,Graph是圖片,Cinemagraphic是一項(xiàng)將神奇的局部運(yùn)動(dòng)賦予靜態(tài)照片的新技術(shù)。

          其中Cinemagraphic的應(yīng)用恰到好處地了詮釋了“自然風(fēng)”的概念,只見畫面上,人物的頭發(fā)和衣角飛舞著,仿佛吹拂著一陣陣自然風(fēng),在炎炎夏日,他們依舊感受著清爽,盡情玩耍。作為互動(dòng)者的人們,當(dāng)看到畫面上被風(fēng)拂過的Cinemagraphic動(dòng)態(tài)場景,他們也身臨其境地感受到自然風(fēng)所能帶來的這種清爽感受。

          下面說說和交互相關(guān)的動(dòng)畫特效。

          本期文章的最后簡單總結(jié)一個(gè)觀點(diǎn):現(xiàn)在網(wǎng)頁上的圖片已不再是10年前的那種低分辨率靜態(tài)圖片了,在Web開發(fā)的未來必定是要更加多樣化,更加豐富多彩,更加方便用戶交互的頁面。 HTML5應(yīng)用恰好可以達(dá)到這個(gè)要求,大家可以看一下幾款超贊的HTML5動(dòng)畫的高級(jí)特效,效果相當(dāng)驚艷。

          TML5是萬維網(wǎng)的核心語言、標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用超文本標(biāo)記語言(HTML)的第五次重大修改,為了順應(yīng)整個(gè)互聯(lián)網(wǎng)時(shí)代變遷,使得人們能夠以更好的方式去進(jìn)行網(wǎng)頁結(jié)構(gòu)搭建,HTML5應(yīng)運(yùn)而生。HTML5新增了如下幾個(gè)方面你的特性:

          一、語義特性(Class:Semantic)

          HTML5賦予網(wǎng)頁更好的意義和結(jié)構(gòu)。更加豐富的標(biāo)簽將隨著對(duì)RDFa的,微數(shù)據(jù)與微格式等方面的支持,構(gòu)建對(duì)程序、對(duì)用戶都更有價(jià)值的數(shù)據(jù)驅(qū)動(dòng)的Web。

          HTML結(jié)構(gòu)語義化,是最近幾年才提出來的,以前的html結(jié)構(gòu),都是一堆沒有語義的冷冰冰的標(biāo)簽。最泛濫的就是div+css,以前的頁面,一打開就是一堆div+css,為了改變這種這種狀況,開發(fā)者們和官方提出了讓HTML結(jié)構(gòu)語義化的概念,并且w3c也在HTML5給出了幾個(gè)新的語義化的標(biāo)簽。

          語義化之后文檔會(huì)有什么效果呢?就是你寫的HTML結(jié)構(gòu),是用相對(duì)應(yīng)的有一定語義的英文字母(標(biāo)簽)表示的,標(biāo)記的,因?yàn)镠TML本身就是標(biāo)記語言。不僅對(duì)自己來說,容易閱讀,書寫。別人看你的代碼和結(jié)構(gòu)也容易理解,甚至對(duì)一些不是做網(wǎng)頁開發(fā)的人來說,也容易閱讀。。

          怎么知道自己的頁面結(jié)構(gòu)是否語義化,那就要看HTML布局結(jié)構(gòu),在去掉CSS樣式表之后,是否,依然能很好的呈現(xiàn)內(nèi)容的代碼結(jié)構(gòu)。也就是說,去掉CSS的裝飾之后,整個(gè)HTML的結(jié)構(gòu)閱讀起來依舊主次分明,能夠看清其整體的架構(gòu)模塊。這也就是,語義化之后我們想要HTML文檔達(dá)到的效果。

          其實(shí)語義化,也無非就是自己在使用標(biāo)簽的時(shí)候在合適的場景下選取合適的標(biāo)簽,比如h1~h5系列標(biāo)簽,在HTML中就是就是用來定義標(biāo)題;而p標(biāo)簽,大部分情況下用以處理文字段落,table表格則適合做信息表格,等等。

          我們對(duì)整個(gè)HTML結(jié)構(gòu)進(jìn)行語義化的規(guī)范操作有如下幾個(gè)好處:

          1,這樣有利于SEO:和搜索引擎建立良好溝通,有助于爬蟲抓取更多的有效信息:爬蟲依賴于標(biāo)簽來確定上下文和各個(gè)關(guān)鍵字的權(quán)重;

          2,方便其他設(shè)備解析(如屏幕閱讀器、盲人閱讀器、移動(dòng)設(shè)備)以有意義的方式來渲染網(wǎng)頁;

          3,便于團(tuán)隊(duì)開發(fā)和維護(hù),語義化更具可讀性,遵循W3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn),可以減少差異化。

          HTML5中新增的語義化標(biāo)簽進(jìn)一步加強(qiáng)了我們針對(duì)整個(gè)HTML結(jié)構(gòu)進(jìn)行語義化跟進(jìn)的可操作性,使得我們網(wǎng)頁布局的可閱讀性更高。

          常見的HTML5語義化標(biāo)簽及其使用場景如下:

          <article>

          定義頁面獨(dú)立的內(nèi)容區(qū)域。

          <aside>

          定義頁面的側(cè)邊欄內(nèi)容。

          <command>

          定義命令按鈕,比如單選按鈕、復(fù)選框或按鈕

          <details>

          用于描述文檔或文檔某個(gè)部分的細(xì)節(jié)

          <dialog>

          定義對(duì)話框,比如提示框

          <summary>

          標(biāo)簽包含 details 元素的標(biāo)題

          <figure>

          規(guī)定獨(dú)立的流內(nèi)容(圖像、圖表、照片、代碼等等)。

          <figcaption>

          定義 <figure> 元素的標(biāo)題

          <footer>

          定義 section 或 document 的頁腳。

          <header>

          定義了文檔的頭部區(qū)域

          <mark>

          定義帶有記號(hào)的文本。

          <meter>

          定義度量衡。僅用于已知最大和最小值的度量。

          <nav>

          定義導(dǎo)航鏈接的部分。

          <progress>

          定義任何類型的任務(wù)的進(jìn)度。

          <section>

          定義文檔中的節(jié)(section、區(qū)段)。

          <time>

          定義日期或時(shí)間。

          二、本地存儲(chǔ)特性(Class: OFFLINE & STORAGE)

          基于HTML5開發(fā)的網(wǎng)頁APP擁有更短的啟動(dòng)時(shí)間,更快的聯(lián)網(wǎng)速度,這些全得益于HTML5 APP Cache,以及本地存儲(chǔ)功能。

          早些時(shí)候,本地存儲(chǔ)使用的是 cookie。但是Web 存儲(chǔ)需要更加的安全與快速,這些數(shù)據(jù)不會(huì)被保存在服務(wù)器上,但是這些數(shù)據(jù)只用于用戶請(qǐng)求網(wǎng)站數(shù)據(jù)上,它也可以存儲(chǔ)大量的數(shù)據(jù),而不影響網(wǎng)站的性能。數(shù)據(jù)以 鍵/值 對(duì)存在, web網(wǎng)頁的數(shù)據(jù)只允許該網(wǎng)頁訪問使用。

          客戶端存儲(chǔ)數(shù)據(jù)的兩個(gè)對(duì)象為:

          localStorage - 用于長久保存整個(gè)網(wǎng)站的數(shù)據(jù),保存的數(shù)據(jù)沒有過期時(shí)間,直到手動(dòng)去除。

          sessionStorage - 用于臨時(shí)保存同一窗口(或標(biāo)簽頁)的數(shù)據(jù),在關(guān)閉窗口或標(biāo)簽頁之后將會(huì)刪除這些數(shù)據(jù)。

          不管是 localStorage,還是 sessionStorage,可使用的API都相同,常用的有如下幾個(gè)(以localStorage為例):

          保存數(shù)據(jù):localStorage.setItem(key,value);

          讀取數(shù)據(jù):localStorage.getItem(key);

          刪除單個(gè)數(shù)據(jù):localStorage.removeItem(key);

          刪除所有數(shù)據(jù):localStorage.clear();

          得到某個(gè)索引的key:localStorage.key(index);

          三、連接特性(Class: CONNECTIVITY)

          更有效的連接工作效率,使得基于頁面的實(shí)時(shí)聊天,更快速的網(wǎng)頁游戲體驗(yàn),更優(yōu)化的在線交流得到了實(shí)現(xiàn)。HTML5擁有更有效的服務(wù)器推送技術(shù),Server-Sent Event和WebSockets就是其中的兩個(gè)特性,這兩個(gè)特性能夠幫助我們實(shí)現(xiàn)服務(wù)器將數(shù)據(jù)“推送”到客戶端的功能。

          WebSocket 是 HTML5 開始提供的一種在單個(gè) TCP 連接上進(jìn)行全雙工通訊的協(xié)議。

          WebSocket 使得客戶端和服務(wù)器之間的數(shù)據(jù)交換變得更加簡單,允許服務(wù)端主動(dòng)向客戶端推送數(shù)據(jù)。在 WebSocket API 中,瀏覽器和服務(wù)器只需要完成一次握手,兩者之間就直接可以創(chuàng)建持久性的連接,并進(jìn)行雙向數(shù)據(jù)傳輸。

          在 WebSocket API 中,瀏覽器和服務(wù)器只需要做一個(gè)握手的動(dòng)作,然后,瀏覽器和服務(wù)器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送。

          現(xiàn)在,很多網(wǎng)站為了實(shí)現(xiàn)推送技術(shù),所用的技術(shù)都是 Ajax 輪詢。輪詢是在特定的的時(shí)間間隔(如每1秒),由瀏覽器對(duì)服務(wù)器發(fā)出HTTP請(qǐng)求,然后由服務(wù)器返回最新的數(shù)據(jù)給客戶端的瀏覽器。這種傳統(tǒng)的模式帶來很明顯的缺點(diǎn),即瀏覽器需要不斷的向服務(wù)器發(fā)出請(qǐng)求,然而HTTP請(qǐng)求可能包含較長的頭部,其中真正有效的數(shù)據(jù)可能只是很小的一部分,顯然這樣會(huì)浪費(fèi)很多的帶寬等資源。

          HTML5 定義的 WebSocket 協(xié)議,能更好的節(jié)省服務(wù)器資源和帶寬,并且能夠更實(shí)時(shí)地進(jìn)行通訊。

          我們使用WebSocket 與Ajax的長輪詢做對(duì)比,從而感受WebSocket 的優(yōu)勢(shì)所在,其對(duì)比圖如下:

          四、網(wǎng)頁多媒體特性(Class: MULTIMEDIA)

          支持網(wǎng)頁端的Audio、Video等多媒體功能, 與網(wǎng)站自帶的APPS,攝像頭,影音功能相得益彰。

          video元素,在HTML5中專門用來播放網(wǎng)絡(luò)上的視頻或者電影。

          audio元素,在HTML5中專門用來播放網(wǎng)絡(luò)上的音頻。

          使用video和audio元素進(jìn)行播放時(shí)就不在需要使用其他的插件了,只要我們的瀏覽器支持HTML5就可以。

          瀏覽器的支持:

          Safari3以上、Firefox4以上、0pera10以上、chrome3.0以上版本都對(duì)audio元素和video元素支持!

          1,基本使用方法

          audio元素只需要給他指定一個(gè)src屬性:

          <audio src="MP3.mp3" controls="controls"></audio>

          對(duì)于不支持的瀏覽器我們可以在這對(duì)元素之間加入提示語句來代替

          <audio src="MP3.mp3" controls="controls">您的瀏覽器不支持Audio元素</audio>

          video元素要設(shè)定好長寬和src屬性就可以了:

          <video width="750" height="400" src="time.mp4"></video>

          同樣對(duì)于不支持video的瀏覽器可以在中間加入替換文字:

          <video width="750" height="400" src="time.mp4">您的瀏覽器不支持video元素</video>

          source元素指定多個(gè)播放格式與編碼:

          source元素可以為同一個(gè)媒體數(shù)據(jù)指定多個(gè)播放格式與編碼方式,以確保瀏覽器可以從中選擇一種自己支持的播放格式進(jìn)行播放。選擇順序自上而下,直到選擇到所支持的格式為止。

          使用方法:

          <video>

          <source src="video.m4v" type="video/mp4" />

          <source src="video.webm" type="video/webm" />

          <source src="video.ogv" type="video/ogg" />

          <source src="video.mp4" />

          </video>

          各種設(shè)備對(duì)編碼格式的支持情況:

          webm(.webm)格式的視頻 火狐4.0+、chrome6.0+、opera10.6+

          mp4(.m4v)格式的視頻 IE9.0+ 、Safari3.1+ 、iso5.0 、Android4.0+

          ogg(.ogv)格式的視頻 火狐3.5+、chrome3.0+、opera10.5+

          mp4(.mp4)格式的視頻 IE9.0+ 、Safari3.1+ 、iso3.0 、Android2.3+

          2、viedo與audio的常用屬性

          audio元素和video元素的常用屬性

          src屬性:在這個(gè)屬性里面指定媒體數(shù)據(jù)的URL地址。

          controls屬性:指定是否為視頻或者音頻數(shù)據(jù)添加瀏覽器自帶的播放控制條,控制條中有播放按鈕、暫停等按鈕。

          width和height屬性(video獨(dú)有):指定視頻的寬度與高度。

          autoplay屬性:這個(gè)屬性指定是否當(dāng)我們網(wǎng)頁加載完成之后就開始自動(dòng)播放。

          preload屬性:這個(gè)屬性指定是否對(duì)數(shù)據(jù)進(jìn)行預(yù)加載,如果是的話,瀏覽器會(huì)將視頻數(shù)據(jù)或者音頻數(shù)據(jù)進(jìn)行緩沖,這樣做可以加快播放的速度。

          preload屬性的三個(gè)值:

          none 表示不進(jìn)行預(yù)加載。

          metadata 表示只預(yù)加載媒體的元數(shù)據(jù)。

          auto(默認(rèn)值) 表示預(yù)加載全部的視頻或者音頻。

          2,使用Javascript提供的方法操作多媒體。

          Javascript為我們提供了豐富的方法,用以靈活控制多媒體文件,這樣我們就可以根據(jù)實(shí)際的項(xiàng)目需求,定義自己的多媒體播放器。

          其中controls屬性經(jīng)過設(shè)定,會(huì)在界面中顯示一個(gè)瀏覽器自帶的控制條。如果對(duì)于UI沒有要求的需求,其內(nèi)置控制器已經(jīng)可以滿足大部分的需求。隱藏控制條并模擬:那么實(shí)現(xiàn)一個(gè)自定義功能的播放器關(guān)鍵就在于,我們不使用原生的控制器,將其隱藏掉之后,在下方同樣的位置通過HTML、CSS來模擬所需樣式,同時(shí)通過js來調(diào)用video標(biāo)簽所暴露給我們的接口函數(shù)及屬性,以及檢測(cè)用戶的操作行為來同步的模擬UI與視頻播放數(shù)據(jù)的相應(yīng)變化。

          幾個(gè)核心函數(shù)及屬性的用法:

          myVid=document.getElementById("video1");//控制視頻開關(guān)

          myVid.play() // 觸發(fā)媒體文件的播放

          myVid.pause() //觸發(fā)媒體文件的暫停

          myVid.currentTime=5; //返回或設(shè)定當(dāng)前視頻播放位置

          myVid.duration // 返回視頻總長度

          myVid.volume //控制音量大小

          myVid.muted //控制多媒體是否靜音

          五、三維、圖形及特效特性(Class: 3D, Graphics & Effects)

          基于SVG、Canvas、WebGL及CSS3的3D功能,用戶會(huì)驚嘆于在瀏覽器中,所呈現(xiàn)的驚人視覺效果。

          <canvas>是一個(gè)可以使用腳本(通常為JavaScript)來繪制圖形的 HTML 元素.例如,它可以用于繪制圖表、制作圖片構(gòu)圖或者制作簡單的(以及不那么簡單的)動(dòng)畫. 右邊的圖片展示了一些 <canvas> 的實(shí)現(xiàn)示例。

          使用 <canvas> 元素不是非常難但你需要一些基本的HTML和JavaScript知識(shí)。一些過時(shí)的瀏覽器不支持<canvas> 元素,但是所有的新版本主流瀏覽器都支持它。Canvas 的默認(rèn)大小為300像素×150像素(寬×高,像素的單位是px)。但是,可以使用HTML的高度和寬度屬性來自定義Canvas 的尺寸。為了在 Canvas 上繪制圖形,我們使用一個(gè)JavaScript上下文對(duì)象,它能動(dòng)態(tài)創(chuàng)建圖像( creates graphics on the fly)

          隨著大數(shù)據(jù)等領(lǐng)域的發(fā)展及應(yīng)用,canvas繪圖在數(shù)據(jù)可視化方面扮演了重要的角色,可以讓我們靈活地通過各種形式展示數(shù)據(jù),提高數(shù)據(jù)的可讀性,增強(qiáng)產(chǎn)品的數(shù)據(jù)能力。

          下圖展示了canvas在數(shù)據(jù)可視化方面的應(yīng)用效果:

          綜上,HTML5新功能的出現(xiàn),使得前端在很多新的應(yīng)用領(lǐng)域發(fā)揮出了更加強(qiáng)大的能力,也讓很多已有項(xiàng)目在表現(xiàn)形式上有了更好的選擇。私信【前端】領(lǐng)取web前端開發(fā)/html5學(xué)習(xí)視頻。


          主站蜘蛛池模板: 乱色精品无码一区二区国产盗| 无码人妻精品一区二| 精品一区二区ww| 国产凹凸在线一区二区| 精品一区二区三区视频| 国产自产V一区二区三区C| 日本中文一区二区三区亚洲| 久久se精品一区精品二区国产| 国产精品区AV一区二区| 精品欧洲av无码一区二区三区| 蜜芽亚洲av无码一区二区三区| 一区国严二区亚洲三区| 精品国产乱子伦一区二区三区| 国产MD视频一区二区三区| 国产亚洲福利精品一区| 日本精品一区二区久久久| 午夜福利一区二区三区高清视频| 亚洲色精品VR一区区三区 | 熟女精品视频一区二区三区| 精品日本一区二区三区在线观看| 美女视频黄a视频全免费网站一区| 爱爱帝国亚洲一区二区三区| 无码一区二区三区在线| 福利一区二区视频| 中文字幕一区二区三区永久| 国产一区二区三区手机在线观看| 中文字幕av人妻少妇一区二区| 亚洲高清一区二区三区| 国产对白精品刺激一区二区| 天天看高清无码一区二区三区| 午夜在线视频一区二区三区| 精品成人一区二区三区免费视频| 午夜视频久久久久一区 | 久久亚洲色一区二区三区| 日韩免费视频一区二区| 国产一区二区三区内射高清| 日本一区二区不卡在线| 国产精品一区二区av不卡| 国产在线一区观看| 国产成人一区二区三中文| 一区二区三区91|