關(guān)于成都做網(wǎng)站HTML中video標簽講解

2024-02-13    分類: 網(wǎng)站建設(shè)

只要在HTML5中使用過視頻播放的同學對video標簽一定不會陌生,不過很多同學只使用了video的基礎(chǔ)功能,實際上video擁有強大潛能的,只要姿勢正確就能讓其擁有超能力。不妨從下面幾個場景來逐漸了解下video未曾被發(fā)掘的神秘空間,下面我們就和成都做網(wǎng)站的創(chuàng)新互聯(lián)一起來詳細的了解一下吧。

節(jié)省視頻流量

使用video的同學基本上都是這樣用的,如下:

利用src屬性

成都做網(wǎng)站,網(wǎng)站前端設(shè)計,H5標簽

利用source標簽

成都做網(wǎng)站,網(wǎng)站前端設(shè)計,H5標簽

這樣就可以播放視頻了,不過前面我們講過這樣使用video,視頻的加載是受瀏覽器控制的,可以看下瀏覽器在視頻剛開始播放的時候下載了多少數(shù)據(jù):我隨便找了個視頻,視頻總長度是02:08,在播放到00:05的時候,瀏覽器已經(jīng)下載到01:30了,如果用戶終止觀看,下載的視頻就這樣被浪費掉了。當然,如果不斷的seek也會造成較多的流量浪費。按照我們之前的統(tǒng)計在短視頻領(lǐng)域,用戶seek的頻率在80%,所以這部分流量是可以節(jié)省掉的。具體原理如下:

成都做網(wǎng)站,網(wǎng)站前端設(shè)計,H5標簽

1.設(shè)置每次加載的數(shù)據(jù)包大小

2.設(shè)置預加載時長

3.開啟加載隊列,完成第一次數(shù)據(jù)包下載,判斷緩沖時間和預加載時長是否滿足,不滿足請求下一個數(shù)據(jù)包

具體實現(xiàn)代碼如下:

成都做網(wǎng)站,網(wǎng)站前端設(shè)計,H5標簽

這樣就實現(xiàn)了視頻在播放過程中永遠只預加載10秒的數(shù)據(jù),進而保證節(jié)省流量。

以上就是成都創(chuàng)新互聯(lián)的網(wǎng)站前端工程師為大家?guī)淼年P(guān)于成都做網(wǎng)站中關(guān)于H5視頻標簽的相關(guān)介紹,希望大家能夠喜歡。

文章題目:關(guān)于成都做網(wǎng)站HTML中video標簽講解
標題網(wǎng)址:http://www.muchs.cn/news40/317290.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)網(wǎng)站制作、網(wǎng)站制作、品牌網(wǎng)站建設(shè)網(wǎng)站營銷、靜態(tài)網(wǎng)站商城網(wǎng)站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

成都seo排名網(wǎng)站優(yōu)化