音頻與視頻

HTML5提供了相關標簽支持在網頁中實現音頻與視頻的播放。

音頻標簽

音頻標簽支持的文件格式有：WAV、MP3、ogg。

音頻標簽的簡單使用方法：

<audio src="../assets/xxxx.mp3" controls></audio>

音頻標簽的標準使用方法：

<audio controls><source src="xxx.mp3" type="audio/mpeg"/><source src="xxx.wav" type="audio/wav"/><source src="xxx.ogg" type="audio/ogg"/>什么破瀏覽器，換一個吧~ </audio>

audio的常用屬性

<audio controls 是否顯示播放器控制面板src=""autoplay 是否在加載完畢后自動播放muted 是否靜音loop 是否單曲循環preload="預加載模式"></audio>

preload:

none 不預加載

metadata 只預加載元數據

auto 盡可能的加載音頻數據

視頻標簽

簡寫方式：

<video src="" 視頻文件的鏈接路徑controlsautoplaymutedloopwidth="" 視頻播放器的寬度height="" 視頻播放器的高度poster="" 海報幀圖片路徑 ></video>

音視頻相關的DOM操作

我們可以通過Javascript獲取音視頻的DOM對象。

可以通過訪問對象的屬性，調用對象的方法來訪問音視頻播放狀態，控制音視頻的播放。

<audio id="audio" src="./let.mp3"></audio> <script>let audio = document.getElementById('audio')audio.duration 屬性 返回時長audio.play() 方法 播放視頻 </script>

查看DOM相關文檔：

https://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

音視頻相關的DOM操作

我們可以通過Javascript獲取音視頻的DOM對象。

可以通過訪問對象的屬性，調用對象的方法來訪問音視頻播放狀態，控制音視頻的播放。

<audio id="audio" src="./let.mp3"></audio> <script>let audio = document.getElementById('audio')audio.duration 屬性 返回時長audio.play() 方法 播放視頻 </script>

查看DOM相關文檔：

https://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

HTML5 Audio/Video 屬性

let audio = document.getElementById('audio') audio.currentTime audio.duration 屬性描述

audioTracks	返回表示可用音軌的 AudioTrackList 對象
autoplay	設置或返回是否在加載完成后隨即播放音頻/視頻
buffered	返回表示音頻/視頻已緩沖部分的 TimeRanges 對象
controller	返回表示音頻/視頻當前媒體控制器的 MediaController 對象
controls	設置或返回音頻/視頻是否顯示控件（比如播放/暫停等）
crossOrigin	設置或返回音頻/視頻的 CORS 設置
currentSrc	返回當前音頻/視頻的 URL
currentTime	設置或返回音頻/視頻中的當前播放位置（以秒計）
defaultMuted	設置或返回音頻/視頻默認是否靜音
defaultPlaybackRate	設置或返回音頻/視頻的默認播放速度
duration	返回當前音頻/視頻的長度（以秒計）
ended	返回音頻/視頻的播放是否已結束
error	返回表示音頻/視頻錯誤狀態的 MediaError 對象
loop	設置或返回音頻/視頻是否應在結束時重新播放
mediaGroup	設置或返回音頻/視頻所屬的組合（用于連接多個音頻/視頻元素）
muted	設置或返回音頻/視頻是否靜音
networkState	返回音頻/視頻的當前網絡狀態
paused	設置或返回音頻/視頻是否暫停
playbackRate	設置或返回音頻/視頻播放的速度
played	返回表示音頻/視頻已播放部分的 TimeRanges 對象
preload	設置或返回音頻/視頻是否應該在頁面加載后進行加載
readyState	返回音頻/視頻當前的就緒狀態
seekable	返回表示音頻/視頻可尋址部分的 TimeRanges 對象
seeking	返回用戶是否正在音頻/視頻中進行查找
src	設置或返回音頻/視頻元素的當前來源
startDate	返回表示當前時間偏移的 Date 對象
textTracks	返回表示可用文本軌道的 TextTrackList 對象
videoTracks	返回表示可用視頻軌道的 VideoTrackList 對象
volume	設置或返回音頻/視頻的音量

HTML5 Audio/Video 方法

方法描述

play()	開始播放音頻/視頻
pause()	暫停當前播放的音頻/視頻

HTML5 Audio/Video 事件

audio.addEventListener('abort', function (){當音頻/視頻的加載已放棄時執行 }) audio.addEventListener('play', function(){}) audio.addEventListener('pause', function(){}) 事件描述

abort	當音頻/視頻的加載已放棄時
canplay	當瀏覽器可以播放音頻/視頻時
canplaythrough	當瀏覽器可在不因緩沖而停頓的情況下進行播放時
durationchange	當音頻/視頻的時長已更改時
emptied	當目前的播放列表為空時
ended	當目前的播放列表已結束時
error	當在音頻/視頻加載期間發生錯誤時
loadeddata	當瀏覽器已加載音頻/視頻的當前幀時
loadedmetadata	當瀏覽器已加載音頻/視頻的元數據時
loadstart	當瀏覽器開始查找音頻/視頻時
pause	當音頻/視頻已暫停時
play	當音頻/視頻已開始或不再暫停時
playing	當音頻/視頻在已因緩沖而暫停或停止后已就緒時
progress	當瀏覽器正在下載音頻/視頻時
ratechange	當音頻/視頻的播放速度已更改時
seeked	當用戶已移動/跳躍到音頻/視頻中的新位置時
seeking	當用戶開始移動/跳躍到音頻/視頻中的新位置時
stalled	當瀏覽器嘗試獲取媒體數據，但數據不可用時
suspend	當瀏覽器刻意不獲取媒體數據時
timeupdate	當目前的播放位置已更改時
volumechange	當音量已更改時
waiting	當視頻由于需要緩沖下一幀而停止

實現簡易音樂播放器

https://neteasecloudmusicapi.vercel.app/#/?id=license

Canvas

canvas意為“畫布”。我們可以使用javascript操作畫布上的任何一個像素，從而實現在網頁中繪制圖像。常用于：

網頁特效。

網頁游戲。

圖形圖表。

canvas的基本使用

<canvas id="cvs" width="640" height="360"></canvas>

繪制API：

let cvs = document.getElementById('cvs') let ctx = cvs.getContext('2d') // 獲取繪制Canvas所需要的Context對象 ctx.fillStyle = 'red' // 設置填充顏色 ctx.fillRect() // 填充矩形

繪制填充

ctx.fillStyle = 'red' // 設置填充顏色 ctx.fillRect(x, y, width, height) // 填充矩形

繪制描邊

ctx.strokeStyle = 'blue' // 設置描邊顏色 ctx.strokeRect(x, y, width, height) // 針對矩形描邊

繪制文本

ctx.font = '24px 微軟雅黑' // 設置字體 ctx.fillText('文本內容', x, y) // 填充文字 ctx.strokeText('文本內容', x, y) // 針對文字描邊

Canvas路徑

什么是路徑？

將一些連續的點按照順序連接起來所形成的圖形稱為路徑。 路徑沒有顏色，可以通過API對路徑進行描邊。若想要填充路徑，需要先閉合路徑。

繪制路徑的基本寫法

調用ctx.beginPath()開啟一條新路徑。

調用ctx.moveTo(x, y)將畫筆移動到某一個坐標點。

調用ctx的相關方法（例如ctx.lineTo(x, y) ）繪制路徑。

路徑繪制完畢后，調用stroke()或fill()來進行描邊或填充。

Canvas路徑

什么是路徑？

將一些連續的點按照順序連接起來所形成的圖形稱為路徑。 路徑沒有顏色，可以通過API對路徑進行描邊。若想要填充路徑，需要先閉合路徑。

繪制路徑的基本寫法

調用ctx.beginPath()開啟一條新路徑。

調用ctx.moveTo(x, y)將畫筆移動到某一個坐標點。

調用ctx的相關方法（例如ctx.lineTo(x, y) ）繪制路徑。

路徑繪制完畢后，調用stroke()或fill()來進行描邊或填充。

案例：實現一個畫板。

移動端針對網頁會觸發touch相關事件：

touchstart 當開始觸摸目標元素時觸發

touchmove 當觸摸目標元素并移動時觸發

touchcancel 當觸摸目標元素被打斷時觸發

touchend 當觸摸結束時觸發

如何實現一個畫板？

監聽touchstart， 開始觸摸canvas時，開啟一條新路徑。

監聽touchmove，當觸摸移動時，獲取移動到的坐標位置，繪制路徑，描邊即可。

繪制路徑的其他常用API：

繪制矩形路徑

ctx.rect(x, y, width, height) // 僅僅用于繪制透明路徑 ctx.stroke() ctx.fill()

繪制圓弧路徑

ctx.beginPath() // 繪制圓弧 (圓心x, 圓心y, 半徑, 起始弧度值, 結束弧度值) ctx.arc(102, 98, 93, Math.PI*4/3, Math.PI*2) ctx.lineTo(102, 98) ctx.fillStyle = 'blue' ctx.fill()

Canvas動畫

動畫的本質：每隔很短的一段時間（ 30幀/秒 60幀/秒 ），重新繪制界面從而形成動畫。

window.setInterval(function(){微調UI的屬性信息重新繪制UI界面 }, 1000/60)

案例：實現視頻播放器的彈幕效果。

修改視頻播放器案例，添加發送彈幕、文本框等標簽。

在Video標簽之上蓋一層canvas。

當點擊發送彈幕時，將彈幕內容寫在canvas的右側。

實現動畫。

動畫卡頓的原因：掉幀導致卡頓（不能保證每秒60幀的刷新率）

window.setInterval()天生的缺陷保證不了每秒60幀的刷新率，所以會出現頓頓感。

如果希望實現絲滑的動畫，推薦使用window.requestAnimationFrame(callback)方法。

該方法的作用是：請求顯示器在刷新下一幀時執行callback。可以借助于這個方法來完成絲滑的動畫，基本調用模式如下：

function draw(){微調修改ui的屬性執行耗時操作...window.requestAnimationFrame(draw) } draw()

地理定位

HTML5提供的地理定位相關API可以使得網頁獲取客戶端設備所在的地理位置（經緯度），從而給與用戶更好的應用體驗。

定位的基礎原理

IP定位

運營商基站定位

GPS衛星定位

HTML5提供了簡單的API用于獲取當前設備的地理位置：

let geoloc = window.navigator.geolocation geoloc.getCurrentPosition((msg)=>{}, (err)=>{}, {timeout:5000})

如果定位成功，則會執行第一個方法，并且返回定位結果：

coords: GeolocationCoordinatesaccuracy: 42890 精準度altitude: null 海拔高度altitudeAccuracy: null 海拔精準度heading: null latitude: 39.5377 緯度longitude: 116.6837 經度speed: null timestamp: 1647507799721

第三方的位置服務-高德地圖-百度地圖-騰訊地圖

高德地圖

https://lbs.amap.com

使用vant組件庫，呈現輪播圖。

新建腳手架項目。

安裝vant，配置vant組件庫。

訪問地址：http://localhost:8080/swipe，看到vant的輪播圖效果。

https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart

第三方的位置服務-高德地圖-百度地圖-騰訊地圖

高德地圖

https://lbs.amap.com

引入高德地圖，初始化地圖

基于高德地圖插件完成定位

在地圖中顯示標記點

為標記點添加事件，彈窗

為地圖添加控件

調用高德開發的web服務

地點檢索

逆地理編碼

天氣

在vue腳手架中使用高德地圖

文件的上傳與下載

文件上傳流程與協議規范

文件上傳流程

客戶端通過html給出一些操作方式（點擊按鈕、拖拽），選擇本地圖片。點擊提交，準備上傳。

客戶端需要與服務端建立http連接，客戶端遵守http協議提交請求數據（請求數據包中可能包含基本表單數據，還可能包含需要上傳的二進制文件）。

服務端接收請求，遵守http協議，接收客戶端傳過來的所有數據，基本表單數據直接讀取，文件則以數據流的方式 邊讀取邊存儲到服務端某個目錄下。

文件存儲完成后，服務端應該提供一個用于訪問剛上傳的圖片的一個鏈接地址，返回給客戶端，這樣客戶端可以使用該地址完成后續業務。

文件上傳的協議規范

文件上傳請求必須是post請求。

發請求時，需要在請求數據包中添加header： Content-Type:multipart/form-data

客戶端在請求數據包中綁定文件數據：key:value (字段名:文件對象)，發送請求。

服務端接收請求，讀取請求中的請求參數，通過key，獲取上傳的文件數據流，邊讀取邊保存到服務端磁盤中。

實驗：下載uploadserver.zip，解壓，啟動web服務。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-5QTTwIsT-1657544301878)(C:\Users\xuming\AppData\Roaming\Typora\typora-user-images\1647594286987.png)]

實現基于elementui組件庫中的el-upload組件，實現文件上傳。

新建腳手架項目。

安裝配置elementui。

# 執行安裝命令 npm i element-ui -S

main.js中引入：

// 引入ElementUI import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' // 全量引入所有組件 Vue.use(ElementUI)

在組件頁面中，使用el-upload組件，實現上傳文件操作。

文件的上傳與下載

文件上傳流程與協議規范

文件上傳流程

客戶端通過html給出一些操作方式（點擊按鈕、拖拽），選擇本地圖片。點擊提交，準備上傳。

客戶端需要與服務端建立http連接，客戶端遵守http協議提交請求數據（請求數據包中可能包含基本表單數據，還可能包含需要上傳的二進制文件）。

服務端接收請求，遵守http協議，接收客戶端傳過來的所有數據，基本表單數據直接讀取，文件則以數據流的方式 邊讀取邊存儲到服務端某個目錄下。

文件存儲完成后，服務端應該提供一個用于訪問剛上傳的圖片的一個鏈接地址，返回給客戶端，這樣客戶端可以使用該地址完成后續業務。

文件上傳的協議規范

文件上傳請求必須是post請求。

發請求時，需要在請求數據包中添加header： Content-Type:multipart/form-data

客戶端在請求數據包中綁定文件數據：key:value (字段名:文件對象)，發送請求。

服務端接收請求，讀取請求中的請求參數，通過key，獲取上傳的文件數據流，邊讀取邊保存到服務端磁盤中。

實現基于elementui組件庫中的el-upload組件，實現文件上傳。

新建腳手架項目。

安裝配置elementui。

# 執行安裝命令 npm i element-ui -S

main.js中引入：

// 引入ElementUI import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' // 全量引入所有組件 Vue.use(ElementUI)

在組件頁面中，使用el-upload組件，實現上傳文件操作。

<el-uploadclass="upload-demo"dragaction="http://localhost:5000/upload"name="uploadFile":on-success="handleUploadSuccess"multiple><i class="el-icon-upload"></i><div class="el-upload__text">將文件拖到此處，或<em>點擊上傳</em></div><div class="el-upload__tip" slot="tip">只能上傳jpg/png文件，且不超過500kb</div> </el-upload>

el-upload組件提供的功能很多，詳情查閱官方文檔。

上傳頭像流程

準備用戶表存儲用戶數據（包括用戶頭像字段）。加載個人信息時，讀取用戶表顯示用戶原始頭像。

點擊頭像，選擇本地圖片上傳，服務端保存成功后將會返回一個訪問新頭像的路徑。

獲取到路徑后，需要再次發送請求，更新用戶表中的頭像數據，從而持久化保存頭像路徑。

下次再登錄，再次讀取用戶表，獲取最新的用戶數據（包含最新的頭像）。

WebSocket

WebSocket可以實現客戶端與服務端之間的實時通訊。它是基于web的長連接通訊協議。

網絡通訊過程中的長連接與短連接

短連接通訊模式：客戶端向服務端發請求建立連接，連接成功后，客戶端向服務端發送請求數據包，服務端接收請求處理請求，返回響應數據包后連接斷開。客戶端接收后處理后續業務。

優點：大量節省服務端連接資源。使得服務端可以為更多的客戶端處理業務。

長連接通訊模式：客戶端向服務端發請求建立連接，連接成功后，客戶端向服務端發送請求數據包，服務端接收請求處理請求，返回響應數據包后連接不斷開。客戶端接收后處理后續業務。連接將持續保持，這樣可以實現隨時隨地客戶端與服務端之間的數據交互。

優點：實現客戶端與服務端的即時通訊。用于實現某些必要的業務場景：網頁聊天、網頁游戲等。

如何使用javascript代碼來建立客戶端與服務端之間的websocket長連接？

Socket.io

socket.io可以完成 網頁中的js（客戶端） 與 后臺nodejs（服務端）的websocket長連接的建立與數據通訊。

建立websocket連接

服務端

新建一個后端項目。（創建一個文件夾socketserver）

下載安裝包，安裝nodejs。 https://nodejs.org/dist/v16.14.2/node-v16.14.2-x64.msi 換npm源 npm config set registry https://registry.npm.taobao.org

通過命令行，進入項目目錄，初始化npm項目。

cd socketserver npm init -y (將會生一個package.json描述當前項目的基本信息) # 安裝socket.io npm install --save socket.io

編寫服務端的核心index.js文件，監聽端口，用接收客戶端發過來的websocket連接請求。

// index.js const http = require('http').createServer() const socketio = require('socket.io')(http)// socketio提供了on方法用于監聽客戶端建立websocket連接事件， // 一旦websocket連接建立成功，將會觸發connection事件，執行回調方法 socketio.on('connection', function(socket){// socket對象用于與鏈接成功的客戶端進行數據交互 可以通過socket完成數據的發送與接收console.log('連接成功，有客戶端進來了！'+socket.id) })http.listen(5050, ()=>{console.log('服務已經啟動...') })

客戶端

新建html頁面。 通過script標簽引入socket.io.js（在node_modules下有該js文件）。

node_modules/socket.io/client-dist/socket.io.min.js

通過socket.io.js提供的方法，向服務端發請求，請求建立websocket連接。

// 向目標地址請求建立websocket連接 let socket = io('http://localhost:5050/')

客戶端與服務端之間的通信

客戶端向服務端發消息

客戶端發消息

let socket = io('http://localhost:5050/') // 發消息(自定義消息類型，消息內容) socket.emit('textmsg', '你瞅啥？！')

服務端接收消息

socketio.on('connection', function(socket){// 監聽客戶端發過來的消息(消息類型， 回調方法)socket.on('textmsg', function(data){console.log(data)}) })

服務端向客戶端發消息

服務端發消息

socket.on('textmsg', function(data){socket.emit('textmsg', '消息內容') })

客戶端接收消息

let socket = io('http://localhost:5050/') socket.on('textmsg', function(data){...})

服務端向所有客戶端廣播消息

socketio.emit('textmsg', '兄弟們，抄家伙，干他！')

WebWorker

網頁端javascript屬于單線程業務模型（.即所有編寫的代碼都在主線程運行）。 html5的WebWorker使得前端javascript擁有多線程異步處理業務的能力。

若在網頁的javascript中編寫了一些耗時代碼，則主線程在執行這些耗時代碼時將會出現頁面假死現象。（實際上是因為主線程在執行耗時代碼的時候無法及時更新頁面的繪制相關屬性，導致無論對頁面做任何操作都無效）

案例：斐波那契數列。

1 1 2 3 5 8 13 21 34 55 89 ....

遞歸實現：

function fb(n){return n<3 ? 1 : fb(n-1) + fb(n-2) }

所以javascript中的耗時操作將會阻塞主線程，影響ui繪制。，導致界面假死。

可以使用webworker來做這些耗時操作，相當于啟動了一個子線程，與主線程并發執行，這樣，子線程中執行耗時代碼，主線程中繪制ui，兩不耽誤。

WebWorker的使用

將需要在子線程中執行的代碼寫入到一個單獨的js文件中：

// worker.js function fb(n){return n<3 ? 1 : fb(n-1)+fb(n-2) } let r = fb(45) console.log(`n=45的斐波那契數列值：${r}`)

在主線程中，創建WebWorker對象（指定該文件路徑），就會自動執行該文件的方法：

let worker = new Worker('worker.js')

上述代碼將會創建一個Worker對象，由該對象來異步執行一些耗時操作。但是創建Worker也將會消耗系統資源。所以何時創建Worker對象要慎重考慮。避免創建過多的Worker對客戶端系統造成壓力。

通常情況下，啟動一個worker去做耗時操作即可。必要的時候，主線程向Worker線程發消息，安排新任務。同理，Worker線程也可以向主線程發消息，返回結果。

主線程與Worker線程之間的通信

主線程向worker線程發消息

主線程發消息：

let worker = new Worker(...) worker.postMessage(45) worker.postMessage(40) worker.postMessage(43)

worker線程接收消息：

//worker.js onmessage = function(e){console.log(e) }

worker線程向主線程發消息

worker線程發消息：

//worker2.js this.postMessage(消息內容)

主線程接收消息：

let worker = new Worker(); worker.onmessage= function(data){更新UI }

SVG

SVG是一種圖片格式。svg這種圖片的本質是一篇符合xml格式的標簽文本，由瀏覽器進行解析并顯示。SVG格式圖片具備矢量圖的特性（放大不失真）。

繪制第一個svg圖片

新建文件：circle.svg，依據svg標準，編寫svg源代碼。

在網頁中引用該svg圖片。

SVG的使用方式

<img src="vue.svg"> <div style="background-image:url('vue.svg')"></div> <body><svg><circle .....></circle></svg> </body>

Canvas 與 SVG 的比較

下表列出了 canvas 與 SVG 之間的一些不同之處。

Canvas

• 依賴分辨率
• 不支持事件處理器
• 弱的文本渲染能力
• 能夠以 .png 或 .jpg 格式保存結果圖像
• 最適合圖像密集型的游戲，其中的許多對象會被頻繁重繪

SVG

• 不依賴分辨率
• 支持事件處理器
• 最適合帶有大型渲染區域的應用程序（比如谷歌地圖）
• 復雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）
• 不適合游戲應用

ECharts

一個基于 JavaScript 的開源可視化圖表庫，用于實現網頁端的數據可視化需求。

總結

以上是生活随笔為你收集整理的总结HTMLT5高级的新特性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。