html5的新特性有：1、語意化標(biāo)籤（hrader、footer等），使得頁面的內(nèi)容結(jié)構(gòu)化，見名知義；2、增強型表單，擁有多個新的表單Input輸入類型，可提供更好的輸入控制和驗證；3、video和audio元素，提供了播放視訊和音訊檔案的標(biāo)準(zhǔn)方法；4、Canvas繪圖；5、SVG繪圖；6、地理定位；7、拖放API ；8、Web Worker；9、Web Storage等等。
本教學(xué)操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。
HTML5的十大新功能?
為了更好地處理今天的網(wǎng)路應(yīng)用，HTML5增加了許多新元素及功能，例如: 圖形的繪製，多媒體內(nèi)容，更好的頁面結(jié)構(gòu)，更好的形式處理，和幾個api拖放元素，定位，包括網(wǎng)頁應(yīng)用程序緩存，存儲，網(wǎng)絡(luò)工作者，等
( 1)語意標(biāo)籤
語意化標(biāo)籤使得頁面的內(nèi)容結(jié)構(gòu)化，見名知義
| ?標(biāo)籤 | ?描述 |
| ? |
?定義了文件的頭部區(qū)域 |
| ? | #?定義了文件的尾部區(qū)域 |
| 定義文件的導(dǎo)覽 | |
| #?定義文件中的節(jié)（section、區(qū)段） | |
| ##?定義頁面獨立的內(nèi)容區(qū)域 | |
| #定義頁面的側(cè)邊欄內(nèi)容 | 用來描述文件或文件某部分的細(xì)節(jié) |
| 標(biāo)籤包含details 元素的標(biāo)題 | |
| 定義對話框，例如提示框 |
輸入類型 |
#描述 |
color |
主要用於選取顏色 |
date |
從一個日期選擇器選擇一個日期 |
datetime |
選擇日期（UTC 時間） |
datetime-local |
#選擇一個日期和時間(無時區(qū)) |
| #包含e-mail 位址的輸入域 | |
month |
選擇一個月份 |
number |
數(shù)值的輸入域 |
range |
一定範(fàn)圍內(nèi)數(shù)字值的輸入域 |
| ##search | 用於搜尋網(wǎng)域|
| tel | 定義輸入電話號碼欄位|
| time | 選擇一個時間 |
| #url | ?URL位址的輸入域 |
| week | #選擇週和年 |
| 表單元素 | 描述 |
## |
?元素規(guī)定輸入域的選項清單 使用 元素的list 屬性與 |
# |
提供一種驗證使用者的可靠方法 標(biāo)籤規(guī)定用於表單的金鑰對生成器字段。 |
|
#用於不同類型的輸出 #例如計算或腳本輸出 |
HTML5 新增的表單屬性
- placehoder 屬性，簡短的提示在使用者輸入值前會顯示在輸入域上。即我們常見的輸入框預(yù)設(shè)提示，在使用者輸入後消失。
- required ?屬性，是一個 boolean 屬性。要求填寫的輸入域不能為空
- pattern 屬性，描述了一個正規(guī)表示式用來驗證 元素的值。
- min 和 max 屬性，設(shè)定元素最小值與最大值。
- step 屬性，為輸入域規(guī)定合法的數(shù)字間隔。
- height 和 width 屬性，用於 image 類型的 標(biāo)籤的圖像高度和寬度。
- autofocus 屬性，是一個 boolean 屬性。規(guī)定在頁面載入時，網(wǎng)域自動地獲得焦點。
- multiple 屬性 ，是一個 boolean 屬性。規(guī)定 元素中可選擇多個值。
(3)視訊與音訊
- #HTML5 提供了播放音訊檔案的標(biāo)準(zhǔn)，即使用
# control 屬性供新增播放、暫停和音量控制。
在 之間你需要插入瀏覽器不支援的
目前,
- #HTML5 規(guī)定了一種透過video 元素來包含視訊的標(biāo)準(zhǔn)方法。
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的瀏覽器不支持Video標(biāo)簽。 </video>
control 提供了 播放、暫停和音量控制來控制影片。也可以使用dom操作來控制影片的播放暫停，如?play() 和 pause() 方法。
同時 video 元素也提供了 width 和 height 屬性控制影片的尺寸。如果設(shè)定的高度和寬度，所需的影片空間會在頁面載入時保留。如果沒有設(shè)定這些屬性，瀏覽器不知道大小的視頻，瀏覽器就不能再加載時保留特定的空間，頁面就會根據(jù)原始視頻的大小而改變。
與 標(biāo)籤之間插入的內(nèi)容是提供給不支援 video 元素的瀏覽器顯示的。
video 元素支援多個source 元素. 元素可以連結(jié)不同的影片檔案。瀏覽器將使用第一個可識別的格式（?MP4, WebM, 和Ogg）
#(4)Canvas繪圖
# 標(biāo)籤只是圖形容器，必須使用腳本來繪製圖形。
Canvas - 圖形
1、建立一個畫布，一個畫佈在網(wǎng)頁中是一個矩形框，透過
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
標(biāo)籤通常需要指定一個id屬性 (腳本中經(jīng)常引用), width 和 height 屬性定義的畫布的大小，使用 style 屬性來新增邊框。你可以在HTML頁面中使用多個
2、使用Javascript來繪製圖像，canvas 元素本身是沒有繪圖能力的。所有的繪製工作必須在JavaScript 內(nèi)部完成
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>getContext("2d") 物件是內(nèi)建的HTML5 對象，擁有多種繪製路徑、矩形、圓形、字元以及添加圖像的方法。
設(shè)定 fillStyle 屬性可以是CSS顏色，漸變，或圖案。 fillStyle預(yù)設(shè)值是#000000（黑色）。 fillRect(x,y,width,height) 方法定義了矩形目前的填滿方式。意思是：在畫布上繪製 150x75 的矩形，從左上角開始 (0,0)。
Canvas - 路徑
##在Canvas上畫線，我們將使用以下兩種方法：moveTo(x,y) 定義線條開始座標(biāo)
lineTo(x,y) 定義線條結(jié)束座標(biāo)
繪製線條我們必須使用到"ink" 的方法，就像stroke ()。<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>定義開始坐標(biāo)(0,0), 和結(jié)束坐標(biāo) (200,100). 然后使用 stroke() 方法來繪制線條
Canvas - 文本
使用 canvas 繪制文本，重要的屬性和方法如下：
font - 定義字體
fillText(text,x,y) - 在 canvas 上繪制實心的文本
strokeText(text,x,y) - 在 canvas 上繪制空心的文本
使用 fillText():
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);使用 "Arial" 字體在畫布上繪制一個高 30px 的文字（實心）
Canvas - 漸變
漸變可以填充在矩形, 圓形, 線條, 文本等等, 各種形狀可以自己定義不同的顏色。
以下有兩種不同的方式來設(shè)置Canvas漸變：
createLinearGradient(x,y,x1,y1) - 創(chuàng)建線條漸變
createRadialGradient(x,y,r,x1,y1,r1) - 創(chuàng)建一個徑向/圓漸變
當(dāng)我們使用漸變對象，必須使用兩種或兩種以上的停止顏色。
addColorStop()方法指定顏色停止，參數(shù)使用坐標(biāo)來描述，可以是0至1.
使用漸變，設(shè)置fillStyle或strokeStyle的值為漸變，然后繪制形狀，如矩形，文本，或一條線。
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);創(chuàng)建了一個線性漸變，使用漸變填充矩形
Canvas - 圖像
把一幅圖像放置到畫布上, 使用 drawImage(image,x,y) 方法
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);把一幅圖像放置到了畫布上
(5)SVG繪圖
SVG是指可伸縮的矢量圖形
SVG 與 Canvas兩者間的區(qū)別
SVG 是一種使用 XML 描述 2D 圖形的語言。
Canvas 通過 JavaScript 來繪制 2D 圖形。
SVG 基于 XML，這意味著 SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器。
在 SVG 中，每個被繪制的圖形均被視為對象。如果 SVG 對象的屬性發(fā)生變化，那么瀏覽器能夠自動重現(xiàn)圖形。
Canvas 是逐像素進(jìn)行渲染的。在 canvas 中，一旦圖形被繪制完成，它就不會繼續(xù)得到瀏覽器的關(guān)注。如果其位置發(fā)生變化，那么整個場景也需要重新繪制，包括任何或許已被圖形覆蓋的對象。
(6)地理定位
HTML5 Geolocation（地理定位）用于定位用戶的位置。
window.navigator.geolocation {
getCurrentPosition: fn 用于獲取當(dāng)前的位置數(shù)據(jù)
watchPosition: fn 監(jiān)視用戶位置的改變
clearWatch: fn 清除定位監(jiān)視
} 獲取用戶定位信息：
navigator.geolocation.getCurrentPosition( function(pos){ console.log('用戶定位數(shù)據(jù)獲取成功')
//console.log(arguments);
console.log('定位時間：',pos.timestamp)
console.log('經(jīng)度：',pos.coords.longitude)
console.log('緯度：',pos.coords.latitude)
console.log('海拔：',pos.coords.altitude)
console.log('速度：',pos.coords.speed)
}, //定位成功的回調(diào)function(err){ console.log('用戶定位數(shù)據(jù)獲取失敗')
//console.log(arguments);
} //定位失敗的回調(diào))
(7)拖放API
拖放是一種常見的特性，即抓取對象以后拖到另一個位置。在 HTML5 中，拖放是標(biāo)準(zhǔn)的一部分，任何元素都能夠拖放。
拖放的過程分為源對象和目標(biāo)對象。源對象是指你即將拖動元素，而目標(biāo)對象則是指拖動之后要放置的目標(biāo)位置。
拖放的源對象(可能發(fā)生移動的)可以觸發(fā)的事件——3個：
dragstart：拖動開始
drag：拖動中
dragend：拖動結(jié)束
整個拖動過程的組成： dragstart*1 + drag*n + dragend*1
拖放的目標(biāo)對象(不會發(fā)生移動)可以觸發(fā)的事件——4個：
dragenter：拖動著進(jìn)入
dragover：拖動著懸停
dragleave：拖動著離開
drop：釋放
整個拖動過程的組成1： dragenter*1 + dragover*n + dragleave*1
整個拖動過程的組成2： dragenter*1 + dragover*n + drop*1
dataTransfer：用于數(shù)據(jù)傳遞的“拖拉機”對象；
在拖動源對象事件中使用e.dataTransfer屬性保存數(shù)據(jù)：
e.dataTransfer.setData( k, v )
在拖動目標(biāo)對象事件中使用e.dataTransfer屬性讀取數(shù)據(jù)：
var value = e.dataTransfer.getData( k )
(8)Web Worker
當(dāng)在 HTML 頁面中執(zhí)行腳本時，頁面的狀態(tài)是不可響應(yīng)的，直到腳本已完成。
web worker 是運行在后臺的 JavaScript，獨立于其他腳本，不會影響頁面的性能。您可以繼續(xù)做任何愿意做的事情：點擊、選取內(nèi)容等等，而此時 web worker 在后臺運行。
首先檢測瀏覽器是否支持 Web Worker
if(typeof(Worker)!=="undefined"){
// 是的! Web worker 支持!
// 一些代碼.....
}else{
// //抱歉! Web Worker 不支持
}下面的代碼檢測是否存在 worker，如果不存在，- 它會創(chuàng)建一個新的 web worker 對象，然后運行 "demo_workers.js" 中的代碼
if(typeof(w)=="undefined")
{
w=new Worker("demo_workers.js");
}然后我們就可以從 web worker 發(fā)送和接收消息了。向 web worker 添加一個 "onmessage" 事件監(jiān)聽器：
w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;
};當(dāng) web worker 傳遞消息時，會執(zhí)行事件監(jiān)聽器中的代碼。event.data 中存有來自 event.data 的數(shù)據(jù)。當(dāng)我們創(chuàng)建 web worker 對象后，它會繼續(xù)監(jiān)聽消息（即使在外部腳本完成之后）直到其被終止為止。
如需終止 web worker，并釋放瀏覽器/計算機資源，使用 terminate() 方法。
完整的 Web Worker 實例代碼
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br><br>
<script>var w;function startWorker()
{if(typeof(Worker)!=="undefined")
{ if(typeof(w)=="undefined")
{
w=new Worker("demo_workers.js");
}
w.onmessage = function (event) {
document.getElementById("result").innerHTML=event.data;
};
}else{
document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
}
}function stopWorker()
{
w.terminate();
}</script>
</body>
</html>創(chuàng)建的計數(shù)腳本，該腳本存儲于 "demo_workers.js" 文件中
var i=0; function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();(9)Web Storage
使用HTML5可以在本地存儲用戶的瀏覽數(shù)據(jù)。早些時候,本地存儲使用的是cookies。但是Web 存儲需要更加的安全與快速. 這些數(shù)據(jù)不會被保存在服務(wù)器上，但是這些數(shù)據(jù)只用于用戶請求網(wǎng)站數(shù)據(jù)上.它也可以存儲大量的數(shù)據(jù)，而不影響網(wǎng)站的性能。數(shù)據(jù)以 鍵/值 對存在, web網(wǎng)頁的數(shù)據(jù)只允許該網(wǎng)頁訪問使用。
客戶端存儲數(shù)據(jù)的兩個對象為：
- localStorage - 沒有時間限制的數(shù)據(jù)存儲
- sessionStorage - 針對一個 session 的數(shù)據(jù)存儲, 當(dāng)用戶關(guān)閉瀏覽器窗口后，數(shù)據(jù)會被刪除。
在使用 web 存儲前,應(yīng)檢查瀏覽器是否支持 localStorage 和sessionStorage
if(typeof(Storage)!=="undefined")
{ // 是的! 支持 localStorage sessionStorage 對象!
// 一些代碼..... } else
{ // 抱歉! 不支持 web 存儲。
}不管是 localStorage，還是 sessionStorage，可使用的API都相同，常用的有如下幾個（以localStorage為例）：
- 保存數(shù)據(jù)：localStorage.setItem(key,value);
- 讀取數(shù)據(jù)：localStorage.getItem(key);
- 刪除單個數(shù)據(jù)：localStorage.removeItem(key);
- 刪除所有數(shù)據(jù)：localStorage.clear();
- 得到某個索引的key：localStorage.key(index);
(10)WebSocket
WebSocket是HTML5開始提供的一種在單個 TCP 連接上進(jìn)行全雙工通訊的協(xié)議。在WebSocket API中，瀏覽器和服務(wù)器只需要做一個握手的動作，然后，瀏覽器和服務(wù)器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送。瀏覽器通過 JavaScript 向服務(wù)器發(fā)出建立 WebSocket 連接的請求，連接建立以后，客戶端和服務(wù)器端就可以通過 TCP 連接直接交換數(shù)據(jù)。當(dāng)你獲取 Web Socket 連接后，你可以通過 send() 方法來向服務(wù)器發(fā)送數(shù)據(jù)，并通過 onmessage 事件來接收服務(wù)器返回的數(shù)據(jù)。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<script type="text/javascript"> function WebSocketTest()
{ if ("WebSocket" in window)
{
alert("您的瀏覽器支持 WebSocket!");
// 打開一個 web socket
var ws = new WebSocket("ws://localhost:9998/echo");
ws.onopen = function()
{ // Web Socket 已連接上，使用 send() 方法發(fā)送數(shù)據(jù)
ws.send("發(fā)送數(shù)據(jù)");
alert("數(shù)據(jù)發(fā)送中...");
};
ws.onmessage = function (evt)
{
var received_msg = evt.data;
alert("數(shù)據(jù)已接收...");
};
ws.onclose = function()
{
// 關(guān)閉 websocket
alert("連接已關(guān)閉...");
};
}
else
{ // 瀏覽器不支持 WebSocket
alert("您的瀏覽器不支持 WebSocket!");
}
} </script>
</head>
<body>
<div id="sse">
<a href="javascript:WebSocketTest()">運行 WebSocket</a>
</div>
</body>
</html>更多編程相關(guān)知識，請訪問：編程學(xué)習(xí)??！
以上是html5有哪些新特性的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
使用HTML5服務(wù)器序列事件處理重新連接和錯誤。
Jul 03, 2025 am 02:28 AM
使用HTML5SSE時，處理重連和錯誤的方法包括：1.了解默認(rèn)重連機制，EventSource默認(rèn)在連接中斷後3秒重試，可通過retry字段自定義間隔；2.監(jiān)聽error事件以應(yīng)對連接失敗或解析錯誤，區(qū)分錯誤類型並執(zhí)行相應(yīng)邏輯，如網(wǎng)絡(luò)問題依賴自動重連、服務(wù)器錯誤手動延遲重連、認(rèn)證失效刷新token；3.主動控制重連邏輯，如手動關(guān)閉並重建連接、設(shè)置最大重試次數(shù)、結(jié)合navigator.onLine判斷網(wǎng)絡(luò)狀態(tài)以優(yōu)化重試策略。這些措施可提升應(yīng)用穩(wěn)定性與用戶體驗。
將CSS和JavaScript與HTML5結(jié)構(gòu)有效整合。
Jul 12, 2025 am 03:01 AM
HTML5、CSS和JavaScript應(yīng)通過語義化標(biāo)籤、合理加載順序與解耦設(shè)計高效結(jié)合。 1.使用HTML5語義化標(biāo)籤如、提升結(jié)構(gòu)清晰度與可維護(hù)性，利於SEO和無障礙訪問；2.CSS應(yīng)置於中，使用外部文件並按模塊拆分，避免內(nèi)聯(lián)樣式與延遲加載問題；3.JavaScript推薦放在前引入，使用defer或async異步加載以避免阻塞渲染；4.減少三者間強依賴，通過data-*屬性驅(qū)動行為、類名控制狀態(tài)，統(tǒng)一命名規(guī)範(fàn)提升協(xié)作效率。這些方法能有效優(yōu)化頁面性能與團(tuán)隊協(xié)作。
使用HTML5服務(wù)器量事件（SSE）接收實時數(shù)據(jù)。
Jul 02, 2025 pm 04:46 PM
Server-SentEvents（SSE）是HTML5提供的服務(wù)器向瀏覽器推送實時更新的輕量級方案。它通過HTTP長連接實現(xiàn)單向通信，適合股票行情、通知等場景。使用時創(chuàng)建EventSource實例並監(jiān)聽消息：consteventSource=newEventSource('/stream');eventSource.onmessage=function(event){console.log('收到消息:',event.data);};服務(wù)器端需設(shè)置Content-Type為text/event
為現(xiàn)代頁面宣布正確的HTML5 Doctype。
Jul 03, 2025 am 02:35 AM
Doctype是告訴瀏覽器用哪種HTML標(biāo)準(zhǔn)解析頁面的聲明，現(xiàn)代網(wǎng)頁只需在HTML文件最開頭寫。其作用是確保瀏覽器以標(biāo)準(zhǔn)模式而非怪異模式渲染頁面，且必須位於第一行，前面不能有空格或註釋；正確寫法僅有一種，不推薦使用舊版本或其他變體；其他如charset、viewport等應(yīng)放在部分。
用HTML5語義標(biāo)記和微數(shù)據(jù)改善SEO。
Jul 03, 2025 am 01:16 AM
使用HTML5語義標(biāo)籤和Microdata可提升SEO，因為它幫助搜索引擎更好理解頁面結(jié)構(gòu)與內(nèi)容含義。 1.使用HTML5語義標(biāo)籤如、、、、和來明確頁面區(qū)塊功能，有助於搜索引擎建立更準(zhǔn)確的頁面模型；2.添加Microdata結(jié)構(gòu)化數(shù)據(jù)標(biāo)註具體內(nèi)容，例如文章作者、發(fā)布日期、商品價格等，使搜索引擎能識別信息類型並用於富媒體摘要展示；3.注意正確使用標(biāo)籤避免混淆、避免重複標(biāo)記、測試結(jié)構(gòu)化數(shù)據(jù)有效性、定期更新以適應(yīng)schema.org的變化，並結(jié)合其他SEO手段長期優(yōu)化。
解釋html5` vs` '元素。
Jul 12, 2025 am 03:09 AM
是塊級元素，適合佈局；是內(nèi)聯(lián)元素，適合包裹文字內(nèi)容。 1.獨占一行，可設(shè)置寬高和邊距，常用於結(jié)構(gòu)佈局；2.不換行，大小由內(nèi)容決定，適用於局部文本樣式或動態(tài)操作；3.選擇時應(yīng)根據(jù)內(nèi)容是否需獨立空間判斷；4.不可嵌套在內(nèi)，不適合做佈局；5.優(yōu)先使用語義化標(biāo)籤以提升結(jié)構(gòu)清晰度與可訪問性。
使用HTML5地理位置API獲取用戶當(dāng)前位置。
Jul 02, 2025 pm 05:03 PM
使用HTML5GeolocationAPI獲取用戶位置時，必須先獲得用戶授權(quán)，且需在合適時機請求並說明用途；基本方法為navigator.geolocation.getCurrentPosition()，包含成功回調(diào)、錯誤回調(diào)和配置參數(shù)；常見失敗原因包括權(quán)限被拒、瀏覽器不支持、網(wǎng)絡(luò)問題等，應(yīng)提供替代方案和明確提示。具體建議如下：1.在用戶操作觸發(fā)時請求權(quán)限，如點擊按鈕；2.使用enableHighAccuracy、timeout、maximumAge等參數(shù)優(yōu)化定位效果；3.錯誤處理應(yīng)區(qū)分不同錯誤
了解HTML5媒體源擴展（MSE）
Jul 08, 2025 am 02:31 AM
MSE（MediaSourceExtensions）是W3C標(biāo)準(zhǔn)的一部分，允許JavaScript動態(tài)構(gòu)建媒體流，從而實現(xiàn)高級視頻播放功能。它通過MediaSource管理媒體源、SourceBuffer存放數(shù)據(jù)、TimeRanges表示緩衝時間範(fàn)圍，使瀏覽器能動態(tài)加載並解碼視頻片段。使用MSE的流程包括：①創(chuàng)建MediaSource實例；②將其綁定到元素；③添加SourceBuffer接收特定格式數(shù)據(jù)；④通過fetch()獲取分段數(shù)據(jù)並追加至緩衝區(qū)。常見註意事項有：①格式兼容性問題；②時間戳對
