整合營銷服務(wù)商

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

          免費咨詢熱線:

          網(wǎng)頁設(shè)計入門-HTML5+CSS3+JavaScript

          頁設(shè)計基礎(chǔ)

          隨著互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展和普及,網(wǎng)絡(luò)與現(xiàn)實生活的結(jié)合越來越緊密,網(wǎng)站代表了企業(yè)和個人的形象,網(wǎng)頁如同個人的社交名片,不可或缺。越來越多的人開始學(xué)習(xí)和制作網(wǎng)頁,更多的企業(yè)和個人把自己的“家”搬到網(wǎng)上。

          應(yīng)該說,設(shè)計精美的頁面效果,需要用戶掌握一定的技術(shù),了解相關(guān)的知識,初步積累網(wǎng)頁設(shè)計素養(yǎng),同時還應(yīng)該熟悉網(wǎng)站開發(fā)的流程。

          熟悉網(wǎng)頁設(shè)計概念

          網(wǎng)站是互聯(lián)網(wǎng)上一個信息小站,網(wǎng)頁是互聯(lián)網(wǎng)上顯示的信息頁面,如果說網(wǎng)站是一本書,那么網(wǎng)頁就是生活中的一頁書,是展示信息的最小單元。在網(wǎng)頁中包含文字、圖像、多媒體等內(nèi)容,通過這些內(nèi)容向瀏覽者傳達(dá)一定的信息。

          網(wǎng)頁和網(wǎng)站

          網(wǎng)站就是由網(wǎng)頁組成的,網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素,是承載各種應(yīng)用的平臺。一個網(wǎng)站如果沒有網(wǎng)頁,將是一個空站,如果只有域名和虛擬主機而沒有制作任何網(wǎng)頁的話,任何人都無法訪問網(wǎng)站。

          網(wǎng)頁類型

          網(wǎng)頁可以分為多種類型,但是由于分類方法不同,也會有不同的類型,根據(jù)是否使用了服務(wù)器技術(shù),人們把網(wǎng)頁分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁。

          網(wǎng)頁構(gòu)成

          網(wǎng)頁內(nèi)可以包含很多內(nèi)容,如文本、圖像、動畫等內(nèi)容,這些信息構(gòu)成了網(wǎng)頁的基本內(nèi)容,如圖1.4所示。實際上網(wǎng)頁包含的元素是很多的,有些元素可以直觀地看到,而有的元素可能看不到,只有通過代碼才能夠看到。

          HTML

          HTML是一種語言,全稱為Hypertext Markup Language,即超文本標(biāo)識語言,是用于描述網(wǎng)頁文檔的一種工具。由HTML語言編寫的文檔,就是網(wǎng)頁文檔,這種文檔可以被網(wǎng)頁瀏覽器識別并解析,然后把網(wǎng)頁效果呈現(xiàn)出來。如果沒有瀏覽器的解析,我們所看到的網(wǎng)頁文檔由大量的HTML標(biāo)簽和文本信息組成,

          學(xué)習(xí)DIV結(jié)構(gòu)

          DIV是<div>標(biāo)簽的習(xí)慣性稱呼,因為設(shè)計師主要使用<div>標(biāo)簽構(gòu)建網(wǎng)頁的結(jié)構(gòu),使用CSS設(shè)計網(wǎng)頁樣式,故把網(wǎng)頁設(shè)計簡稱為DIV+CSS布局。

          在HTML文檔中,頁面會被劃分為很多區(qū)域,不同區(qū)域顯示不同的內(nèi)容,如標(biāo)題欄、廣告位、導(dǎo)航條、新聞列表、正文顯示區(qū)域、版權(quán)信息區(qū)域等。

          學(xué)習(xí)CSS

          有了網(wǎng)頁結(jié)構(gòu)和內(nèi)容,還需要CSS來美化。CSS是一種語言,與HTML一樣,是一種描述性語言,全稱Cascading Style Sheet,可譯為層疊樣式表或級聯(lián)樣式表,它定義如何顯示HTML標(biāo)簽,用于控制網(wǎng)頁外觀布局和樣式設(shè)計。當(dāng)網(wǎng)頁缺少CSS時,是非常丑陋的,也不適合閱讀和欣賞,

          學(xué)習(xí)JavaScript

          網(wǎng)頁設(shè)計的動態(tài)化和智能化是一種大趨勢,而如果要趕上這個趨勢,JavaScript是一種腳本語言,但是它包含編程語言的大部分特性和功能,掌握J(rèn)avaScript編程,你就能夠駕馭網(wǎng)頁動態(tài)特效的設(shè)計,就能夠把網(wǎng)頁設(shè)計得更聰明、更富有人性化。

          JavaScript在頁面特效中的應(yīng)用

          與HTML、CSS學(xué)習(xí)相比,JavaScript學(xué)習(xí)難度要大很多,當(dāng)然一旦當(dāng)你掌握了JavaScript,網(wǎng)頁設(shè)計水平會達(dá)到一個新的高度,此時自己就不是一個簡單的網(wǎng)頁設(shè)計師,而應(yīng)該是一個前端開發(fā)工程師的高級技術(shù)師。

          網(wǎng)頁設(shè)計任務(wù)

          成功的設(shè)計作品一般都很藝術(shù)化。但藝術(shù)只是設(shè)計的手段,而并非設(shè)計的任務(wù)。設(shè)計的任務(wù)是要實現(xiàn)設(shè)計者的意圖,而并非創(chuàng)造美。

          網(wǎng)頁設(shè)計的任務(wù),是指設(shè)計者要表現(xiàn)的主題和實現(xiàn)的功能。站點的性質(zhì)不同,設(shè)計的任務(wù)也不同。根據(jù)網(wǎng)站性質(zhì),可以把網(wǎng)頁設(shè)計任務(wù)分為3類:

           資訊類網(wǎng)站,這類網(wǎng)站以內(nèi)容為主,提供大量的信息,因此網(wǎng)頁設(shè)計就需要注意頁面的分割、結(jié)構(gòu)的合理、頁面的優(yōu)化、網(wǎng)頁的親和力等問題。

           形象類網(wǎng)站,這類網(wǎng)站以宣傳為主,網(wǎng)站規(guī)模較小,頁面少,信息少,功能也較為簡單,網(wǎng)頁設(shè)計的主要任務(wù)是突出企業(yè)形象。因此對設(shè)計者的美工水平要求較高。

           應(yīng)用類網(wǎng)站,這類網(wǎng)站在設(shè)計上要求較高,網(wǎng)頁信息不求大而全,但是頁面設(shè)計追求簡潔、精致、大方,既要保證網(wǎng)站的可操作性,同時還要保證應(yīng)用的靈活性,突出鮮明的應(yīng)用特性。

          網(wǎng)頁設(shè)計原則

          網(wǎng)頁設(shè)計是有原則的,無論使用什么方法對網(wǎng)頁元素進(jìn)行組合,都必須要遵循基本原則,

           統(tǒng)一原則:就是指設(shè)計作品的整體性、一致性。設(shè)計作品的整體效果是至關(guān)重要的,在設(shè)計中切勿將各組成部分孤立分散,那樣會使畫面呈現(xiàn)出一種枝蔓紛雜的凌亂效果。

           連貫原則:就是指要注意頁面的相互關(guān)系。設(shè)計中應(yīng)利用各組成部分在內(nèi)容上的內(nèi)在聯(lián)系和表現(xiàn)形式上的相互呼應(yīng),并注意整個頁面設(shè)計風(fēng)格的一致性,實現(xiàn)視覺上和心理上的連貫,使整個頁面設(shè)計的各個部分極為融洽,猶如一氣呵成。

           分割原則:就是指將頁面分成若干小塊,小塊之間有視覺上的不同,這樣可以使觀者一目了然。在信息量很多時為使觀者能夠看清楚,就要注意到將畫面進(jìn)行有效的分割。分割不僅是表現(xiàn)形式的需要。換個角度來講,分割也可以被視為對于頁面內(nèi)容的一種分類歸納。

           對比原則:就是通過矛盾和沖突,使設(shè)計更加富有生氣。對比手法很多,例如,多與少、曲與直、強與弱、長與短、粗與細(xì)、疏與密、虛與實、主與次、黑與白、動與靜、美與丑、聚與散等。在使用對比的時候應(yīng)慎重,對比過強容易破壞美感,影響統(tǒng)一。

           和諧原則:就是指整個頁面符合美的法則,渾然一體。如果一件設(shè)計作品僅僅是色彩、形狀、線條等的隨意混合,那么作品將不但沒有“生命感”,而且也根本無法實現(xiàn)視覺設(shè)計的傳達(dá)功能。和諧不僅要看結(jié)構(gòu)形式,而且要看作品所形成的視覺效果能否與人的視覺感受形成一種溝通,產(chǎn)生心靈的共鳴。這是設(shè)計能否成功的關(guān)鍵。

          【W(wǎng)eb前端開發(fā) 】html+css前端零基礎(chǔ)入門教程 2022新 最全前端學(xué)習(xí)路線規(guī)劃含前端框架項目(資料含源碼+課件)_前端_編程入門_嗶哩嗶哩_bilibili

          TML+CSS學(xué)完好久了,一直沒啥時間總結(jié),現(xiàn)在總結(jié)了下學(xué)的過程:

          之所以放在一起總結(jié),是因為HTML和CSS沒有啥很多的編程邏輯,都是需要去記住并且熟練使用的,熟練使用是得去一個個敲過一遍。所謂的代碼量積累好像就是這么回事,只有多敲才能會。

          小白用的嗶哩嗶哩上的教程視頻,因為個人學(xué)習(xí)方法的原因,都是跟著那教程去敲的,當(dāng)然課后練習(xí)的話,都是自己先摸索敲了一遍在去看的講解,小白覺得這樣可以加深印象。

          還有就是沒有熟練之前要天天的去練,哪怕一天半小時也好。因為一旦一天沒有練就會忘掉,還得回去找之前的筆記來看。(因為有事耽擱了兩三天沒去學(xué),結(jié)果又重頭的看了一遍,血淋淋的學(xué)習(xí)效率教訓(xùn)。不管怎樣,貴在堅持。)

          當(dāng)然,因為小白基礎(chǔ)是真的差,沒有什么教程是可以完完全全都講完的,使用小白看完了嗶哩嗶哩的教程又跑去了網(wǎng)易云課堂找了一份HTML+CSS的教程來看,為的是查漏補缺。

          有一種播放叫做1.5倍播放。看的過程,別跟播放器里一倍的速度看,調(diào)成1.5倍或是2.0倍播放速度,因為那些東西,多數(shù)都是理解使用的。哪怕忘了,百度一下就可以直接搞定了。打基礎(chǔ)階段所以還是記住熟練使用才好。

          HTML小白也就看了兩天吧,用了半天做了下練習(xí);CSS對于零基礎(chǔ)的人來說建議12-15天,當(dāng)然小白之前有過這些概念,所以用了五天多點的時間。JS才剛剛開始學(xué),所以不知道時間怎么算才好。因為前端三大基石:HTML+CSS+JS,HTML+CSS學(xué)習(xí)所使用的時間占比才百分之五,剩下的百分之九十五都是JS的學(xué)習(xí)時間。

          找課程時記住,找一兩個課程,一個全心去學(xué),一個查漏補缺就好,別一會兒這個課程看一下,那個課程看一下的。這樣子反而會使自己心浮氣躁沒法靜下心來去學(xué)。打基礎(chǔ)的視頻教程,其實都一樣的,沒啥有特別好的特別壞的。

          享 | 劉博(又拍云多媒體開發(fā)工程師)

          又小拍:

          如何實現(xiàn)HTML5直播技術(shù)是直播創(chuàng)業(yè)團隊一直想要攻克的難題。12月1日20:00,深度參與“又拍直播云”開發(fā)的工程師劉博就如何利用WebSocket+MSE實現(xiàn)HTML5直播在微信群里進(jìn)行了分享。小拍馬不停蹄將劉博的分享內(nèi)容整理成了文字,并插入一些PPT便于大家了解。全文整理如下:

          下面就是分享內(nèi)容啦~

          當(dāng)前為了滿足比較火熱的移動Web端直播需求,一系列的HTML5直播技術(shù)迅速的發(fā)展起來。

          常見的可用于HTML5的直播技術(shù)有HLS、WebSocket與WebRTC。今天我向大家介紹WebSocket與MSE相關(guān)的技術(shù)要點,并在最后通過一個實例來展示具體用法。

          分享大綱

          ⊙WebSocket協(xié)議介紹

          ⊙WebSocket Client/Server API介紹

          ⊙MSE介紹

          ⊙fMP4介紹

          ⊙Demo展示

          WebSocket

          通常的Web應(yīng)用都是圍繞著HTTP的請求/響應(yīng)模型構(gòu)建的。所有的HTTP通信都通過客戶端來控制,由客戶端向服務(wù)器發(fā)出一個請求,服務(wù)器接收和處理完畢后再返回結(jié)果給客戶端,客戶端將數(shù)據(jù)展現(xiàn)出來。由于這種模式不能滿足實時應(yīng)用需求,于是出現(xiàn)了SSE、Comet等 "服務(wù)器推" 的長連接技術(shù)。

          WebSocket是基于TCP連接之上的通信協(xié)議,可以在單個TCP連接上進(jìn)行全雙工的通信。WebSocket在2011年被IETF定為標(biāo)準(zhǔn)RFC 6455,并被RFC 7936補充規(guī)范,WebSocket API被W3C定為標(biāo)準(zhǔn)。

          WebSocket是獨立地創(chuàng)建在TCP上的協(xié)議,HTTP協(xié)議中的那些概念都和WebSocket沒有關(guān)聯(lián),唯一關(guān)聯(lián)的是使用HTTP協(xié)議的101狀態(tài)碼進(jìn)行協(xié)議切換時,使用的TCP端口是80,可以繞過大多數(shù)防火墻的限制。

          WebSocket握手

          為了更方便地部署新協(xié)議,HTTP/1.1引入了Upgrade機制,使得客戶端和服務(wù)端之間可以借助已有的HTTP語法升級到其它協(xié)議。這個機制在RFC7230的6.7 Upgrade一節(jié)中有詳細(xì)描述。

          要發(fā)起HTTP/1.1協(xié)議升級,客戶端必須在請求頭部中指定這兩個字段 ▽

          Connection: Upgrade

          Upgrade: protocol-name[/protocol-version]

          如果服務(wù)端同意升級,那么需要這樣響應(yīng) ▽

          HTTP/1.1 101 Switching Protocols

          Connection: upgrade

          Upgrade: protocol-name[/protocol-version]

          [... data defined by new protocol ...]

          可以看到,HTTP Upgrade響應(yīng)的狀態(tài)碼是101,并且響應(yīng)正文可以使用新協(xié)議定義的數(shù)據(jù)格式。

          WebSocket握手就利用了這種HTTP Upgrade機制。一旦握手完成,后續(xù)數(shù)據(jù)傳輸直接在TCP上完成。

          WebSocket JavaScript API

          目前主流的瀏覽器提供了WebSocket的API接口,可以發(fā)送消息(文本或者二進(jìn)制)給服務(wù)器,并且接收事件驅(qū)動的響應(yīng)數(shù)據(jù)。

          Step1. 檢查瀏覽器是否支持WebSocket

          if(window.WebSocket) {

          // WebSocket代碼

          }

          Step2. 建立連接

          var ws = new WebSocket('ws://localhost:8327');

          Step3. 注冊回調(diào)函數(shù)以及收發(fā)數(shù)據(jù)

          分別注冊WebSocket對象的onopen、onclose、onerror以及onmessage回調(diào)函數(shù)。

          通過ws.send()來進(jìn)行發(fā)送數(shù)據(jù),這里不僅可以發(fā)送字符串,也可以發(fā)送Blob或ArrayBuffer類型的數(shù)據(jù)。

          如果接收的是二進(jìn)制數(shù)據(jù),需要將連接對象的格式設(shè)為blob或arraybuffer。

          ws.binaryType = 'arraybuffer';

          WebSocket Golang API

          服務(wù)器端WebSocket庫我推薦使用Google自己的golang.org/x/net/websocket,可以非常方便的與net/http一起使用。也可以將WebSocket的handler function通過websocket.Handler轉(zhuǎn)換成http.Handler,這樣就可以跟net/http庫一起使用了。

          然后通過websocket.Message.Receive來接收數(shù)據(jù),通過websocket.Message.Send來發(fā)送數(shù)據(jù)。

          具體代碼可以看下面的Demo部分。

          MSE

          在介紹MSE之前,我們先看看HTML5<audio>和<video>有哪些限制。

          HTML5<audio>和<video>標(biāo)簽的限制

          • 不支持流

          • 不支持DRM和加密

          • 很難自定義控制, 以及保持跨瀏覽器的一致性

          • 編解碼和封裝在不同瀏覽器支持不同

          MSE是解決HTML5的流問題。

          Media Source Extensions(MSE)是Chrome、Safari、Edge等主流瀏覽器支持的一個新的Web API。MSE是一個W3C標(biāo)準(zhǔn),允許JavaScript動態(tài)構(gòu)建<video>和<audio>的媒體流。它定義了對象,允許JavaScript傳輸媒體流片段到一個 HTMLMediaElement。

          通過使用MSE,你可以動態(tài)地修改媒體流而不需要任何插件。這讓前端JavaScript可以做更多的事情—— 在JavaScript進(jìn)行轉(zhuǎn)封裝、處理,甚至轉(zhuǎn)碼。

          雖然MSE不能讓流直接傳輸?shù)絤edia tags上,但是MSE提供了構(gòu)建跨瀏覽器播放器的核心技術(shù),讓瀏覽器通過JavaScript API來推音視頻到media tags上。

          Browser Support

          通過caniuse來檢查是否瀏覽器支持情況。

          通過MediaSource.isTypeSupported()可以進(jìn)一步地檢查codec MIME類型是否支持。

          fMP4

          比較常用的視頻封裝格式有WebM和fMP4。

          WebM和WebP是兩個姊妹項目,都是由Google贊助的。由于WebM是基于Matroska的容器格式,天生是流式的,很適合用在流媒體領(lǐng)域里。

          下面著重介紹一下fMP4格式。

          我們都知道MP4是由一系列的Boxes組成的。普通的MP4的是嵌套結(jié)構(gòu)的,客戶端必須要從頭加載一個MP4文件,才能夠完整播放,不能從中間一段開始播放。

          而fMP4由一系列的片段組成,如果服務(wù)器支持byte-range請求,那么,這些片段可以獨立的進(jìn)行請求到客戶端進(jìn)行播放,而不需要加載整個文件。

          為了更加形象的說明這一點,下面我介紹幾個常用的分析MP4文件的工具。

          • gpac,原名mp4box,是一個媒體開發(fā)框架,在其源碼下有大量的媒體分析工具,可以使用testapps;

          • mp4box.js,是mp4box的Javascript版本;

          • bento4,一個專門用于MP4的分析工具;

          • mp4parser,在線MP4文件分析工具。

          fragment mp4 VS non-fragment mp4

          下面是一個fragment mp4文件通過mp4parser(http://mp4parser.com)分析后的截圖 ▽

          下面是一個non-fragment mp4文件通過mp4parser分析后的截圖 ▽

          我們可以看到non-fragment mp4的最頂層box類型非常少,而fragment mp4是由一段一段的moof+mdat組成的,它們已經(jīng)包含了足夠的metadata信息與數(shù)據(jù), 可以直接seek到這個位置開始播放。也就是說fMP4是一個流式的封裝格式,這樣更適合在網(wǎng)絡(luò)中進(jìn)行流式傳輸,而不需要依賴文件頭的metadata。

          Apple在WWDC 2016大會上宣布會在iOS 10、tvOS、macOS的HLS中支持fMP4,可見fMP4的前景非常的好。

          值得一提的是,fMP4、CMAF、ISOBMFF其實都是類似的東西。

          MSE JavaScript API

          從高層次上看,MSE提供了

          • 一套 JavaScript API 來構(gòu)建 media streams

          • 一個拼接和緩存模型

          • 識別一些 byte 流類型:

          • WebM

          • ISO Base Media File Format

          • MPEG-2 Transport Streams

          MSE內(nèi)部結(jié)構(gòu)

          MSE本身的設(shè)計是不依賴任務(wù)特定的編解碼和容器格式的,但是不同的瀏覽器支持程度是不一樣的。

          可以通過傳遞一個MIME類型的字符串到靜態(tài)方法:MediaSource.isTypeSupported來檢查。比如 ▽

          MediaSource.isTypeSupported('audio/mp3'); // false

          MediaSource.isTypeSupported('video/mp4'); // true

          MediaSource.isTypeSupported('video/mp4; codecs="avc1.4D4028, mp4a.40.2"'); // true

          獲取Codec MIME string的方法可以通過在線的mp4info(http://nickdesaulniers.github.io/mp4info),或者使用命令行mp4info test.mp4 | grep Codecs,可以得到類似如下結(jié)果 ▽

          mp4info fmp4.mp4| grep Codec

          Codecs String: mp4a.40.2

          Codecs String: avc1.42E01E

          當(dāng)前,H.264 + AAC的MP4容器在所有的瀏覽器都支持。

          普通的MP4文件是不能和MSE一起使用的, 需要將MP4進(jìn)行fragment化。

          檢查一個MP4是否已經(jīng)fragment的方法 ▽

          mp4dump test.mp4 | grep "\[m"

          如果是non-fragment會顯示如下信息 ▽

          mp4dump nfmp4.mp4 | grep "\[m"

          [mdat] size=8+50873

          [moov] size=8+7804

          [mvhd] size=12+96

          [mdia] size=8+3335

          [mdhd] size=12+20

          [minf] size=8+3250

          [mdia] size=8+3975

          [mdhd] size=12+20

          [minf] size=8+3890

          [mp4a] size=8+82

          [meta] size=12+78

          如果已經(jīng)fragment,會顯示如下的類似信息 ▽

          mp4dump fmp4.mp4 | grep "\[m" | head -n 30

          [moov] size=8+1871

          [mvhd] size=12+96

          [mdia] size=8+312

          [mdhd] size=12+20

          [minf] size=8+219

          [mp4a] size=8+67

          [mdia] size=8+371

          [mdhd] size=12+20

          [minf] size=8+278

          [mdia] size=8+248

          [mdhd] size=12+20

          [minf] size=8+156

          [mdia] size=8+248

          [mdhd] size=12+20

          [minf] size=8+156

          [mvex] size=8+144

          [mehd] size=12+4

          [moof] size=8+600

          [mfhd] size=12+4

          [mdat] size=8+138679

          [moof] size=8+536

          [mfhd] size=12+4

          [mdat] size=8+24490

          [moof] size=8+592

          [mfhd] size=12+4

          [mdat] size=8+14444

          [moof] size=8+312

          [mfhd] size=12+4

          [mdat] size=8+1840

          [moof] size=8+600

          把一個non-fragment MP4轉(zhuǎn)換成fragment MP4。

          可以使用FFmpeg的 -movflags來轉(zhuǎn)換。

          對于原始文件為非MP4文件 ▽

          ffmpeg -i trailer_1080p.mov -c:v copy -c:a copy -movflags frag_keyframe+empty_moov bunny_fragmented.mp4

          對于原始文件已經(jīng)是MP4文件 ▽

          ffmpeg -i non_fragmented.mp4 -movflags frag_keyframe+empty_moov fragmented.mp4

          或者使用mp4fragment ▽

          mp4fragment input.mp4 output.mp4

          DEMO TIME

          劉博在分享的最后階段,展示了兩個demo,分別是MSE Vod Demo、MSE Live Demo

          MSE Vod Demo

          • 展示利用MSE和WebSocket實現(xiàn)一個點播服務(wù)

          • 后端讀取一個fMP4文件,通過WebSocket發(fā)送給MSE,進(jìn)行播放

          MSE Live Demo

          • 展示利用MSE和WebSocket實現(xiàn)一個直播服務(wù)

          • 后端代理一條HTTP-FLV直播流,通過WebSocket發(fā)送給MSE,進(jìn)行播放

          • 前端MSE部分做了很多工作, 包括將flv實時轉(zhuǎn)封裝成了fMP4,這里引用了videojs-flow的實現(xiàn)

          Q & A

          Q1:對于沒有公網(wǎng)iIP的客戶如何通過RTMP協(xié)議推流?

          A1:用戶客戶端進(jìn)行RTMP推流,不需要公網(wǎng)IP,推到直播系統(tǒng)分配給你的地址就可以了。

          Q2:MSE客戶端做很多東西,可以轉(zhuǎn)碼、解碼, 這個會有性能問題嗎? 還有這個技術(shù),目前有公司在大批量用嗎?

          A2:目前該技術(shù)在實驗階段,轉(zhuǎn)封裝的話,對性能要求不高,我們在各自型號的手機上測試都沒有問題。目前除了微信內(nèi)置瀏覽器對MSE支持不好,大部分瀏覽器對MSE支持都比較好。

          Q3:沒做過相關(guān)內(nèi)容,能簡單介紹一下HTTP-FLV么?

          A3:HTTP-FLV就是將FLV流以HTTP長連接的形式分發(fā)出去,目前在各大直播平臺都用的比較多。大家可以關(guān)注下又拍云微信公眾賬號,之前專門有一篇文章介紹HTTP-FLV。

          Q4:不大了解HTTP-FLV,既然是長時間的狀態(tài)性連接,為什么不用tcp/socket呢?

          A5: FLV不能在<video>標(biāo)簽直接播放,所以需要通過MSE轉(zhuǎn)封裝成MP4,再吐到<video>標(biāo)簽進(jìn)行播放。

          Q5:嗶哩嗶哩H5播放器是基于WebSocket與MSE技術(shù)實現(xiàn)的嘛?

          A5:B站開源的flv.js是一個非常好的項目,是基于 MSE 實現(xiàn)的,實時性做的也比較好,B 站自己已經(jīng)在網(wǎng)站播放器上使用了。

          Q6:VLC器播放和網(wǎng)頁播放,哪個快啊?

          A6:播放器端延時,一個重要指標(biāo)是播放器的緩存區(qū)大小。VLC的默認(rèn)緩存區(qū)比較大,所以,VLC通常延時會大一些。

          Q7:可以介紹下秒開技術(shù)么,以及秒開的原理?

          A7:秒開可以在服務(wù)器端多緩存一個GoP來實現(xiàn),這樣播放器請求的第一幀能保證是I幀,可以立即播放,以此達(dá)到秒開的效果.

          Refs

          WebSocket

          • rfc6455

          • HTTP Upgrade

          • WebSocket API

          • MDN WebSocket

          • videojs-flow

          MSE

          • W3C

          • MDN MSE

          • HTML5 Codec MIME


          主站蜘蛛池模板: 国产成人一区二区三区免费视频| 国产精品乱码一区二区三| 天美传媒一区二区三区| 福利一区二区三区视频在线观看| 国产精品福利一区| 国产欧美色一区二区三区 | 亚洲午夜一区二区电影院| 精品国产一区二区三区2021| 日韩一区二区三区免费体验| 无码一区18禁3D| 伊人无码精品久久一区二区| 亚洲影视一区二区| 色噜噜狠狠一区二区| 日本高清不卡一区| 国产AV一区二区三区无码野战| 少妇人妻偷人精品一区二区| 中文字幕一区二区三区有限公司| 一区二区三区四区在线视频| 国产麻豆媒一区一区二区三区| 国产一区中文字幕在线观看 | 国内精品一区二区三区最新 | 中文字幕一区日韩在线视频| 韩国福利一区二区三区高清视频| 国产日韩视频一区| 无码毛片一区二区三区视频免费播放| 日韩AV片无码一区二区不卡| 色国产在线视频一区| 国产成人久久一区二区三区| 精品乱码一区二区三区在线| 区三区激情福利综合中文字幕在线一区| 欧洲精品码一区二区三区免费看| 一区二区三区免费高清视频| 丝袜人妻一区二区三区网站| 国产精品熟女一区二区| 91午夜精品亚洲一区二区三区| 亚州AV综合色区无码一区 | 亚洲美女视频一区二区三区| 伊人无码精品久久一区二区 | 亚洲福利一区二区三区| 无码中文字幕人妻在线一区二区三区 | 国产AV午夜精品一区二区三|