新書速覽-HTML5+CSS3 Web前端開發(fā)與實例教程：微課視頻版

HTML5+CSS3 Web前端開發(fā)與實例教程：微課視頻版》

本書內(nèi)容

《HTML5+CSS3 Web前端開發(fā)與實例教程：微課視頻版》秉承“思政引領(lǐng)，立德樹人”的教育理念，自然融入多維度、深層次的思政元素，全面對標(biāo)企業(yè)和行業(yè)需求；引入現(xiàn)代Web前端開發(fā)的核心技術(shù)，如Flex布局、Grid布局，以及人工智能編程插件，同時融入企業(yè)開發(fā)實踐，確保學(xué)習(xí)內(nèi)容與實際工作緊密相關(guān)。全書以一個完整案例為主線，結(jié)合綜合項目實戰(zhàn)操作，體現(xiàn)育人、應(yīng)用和創(chuàng)新三項能力。《HTML5+CSS3 Web前端開發(fā)與實例教程：微課視頻版》配套提供課程思政元素、案例源代碼、PPT課件、課后習(xí)題與答案、微課視頻、教案、教學(xué)大綱、章節(jié)測試、云題庫、實驗報告、學(xué)習(xí)通在線課程、企業(yè)高頻面試題、學(xué)科競賽真題等豐富的教學(xué)資源，并設(shè)有QQ群提供線上學(xué)習(xí)跟蹤和指導(dǎo)服務(wù)。

《HTML5+CSS3 Web前端開發(fā)與實例教程：微課視頻版》共分14章，系統(tǒng)地講解Web前端開發(fā)的核心技術(shù)，主要內(nèi)容包括Web前端開發(fā)概述、HTML5基礎(chǔ)、HTML5頁面元素和屬性、表單、CSS3基礎(chǔ)、CSS3修飾頁面元素、CSS3高級選擇器、CSS3盒子模型、浮動與定位、CSS3高級應(yīng)用、網(wǎng)頁布局、Flex布局、Grid布局等，并提供“大學(xué)生參軍入伍專題網(wǎng)站”和“文創(chuàng)商城”兩個實戰(zhàn)案例。

本書作者

盧欣欣，副教授。長期從事高校教學(xué)工作，專注Web應(yīng)用開發(fā)，項目開發(fā)經(jīng)驗豐富。主講《Web程序設(shè)計》《高級程序設(shè)計》《軟件開發(fā)綜合實踐》等課程，先后主編教材2部，參編教材3部。在慕課網(wǎng)上線的《企業(yè)網(wǎng)站綜合布局實戰(zhàn)》課程學(xué)習(xí)人數(shù)超15萬人。

崔仲遠(yuǎn)，副教授，畢業(yè)于北京交通大學(xué)。長期從事高校教學(xué)工作和軟件項目開發(fā)工作，實戰(zhàn)開發(fā)經(jīng)驗豐富。先后承擔(dān)《網(wǎng)頁特效設(shè)計》《Web前端基礎(chǔ)》《跨平臺腳本開發(fā)技術(shù)》等多門課程的教學(xué)任務(wù)，發(fā)表學(xué)術(shù)論文多篇，主編教材2部，參編教材3部、專著1部。主持省級教改項目1項、科研項目1項。

本書讀者

《HTML5+CSS3 Web前端開發(fā)與實例教程：微課視頻版》既可作為本專科院校計算機(jī)相關(guān)專業(yè)的Web程序設(shè)計、網(wǎng)頁設(shè)計與制作等課程的教材，也可作為Web應(yīng)用開發(fā)人員的自學(xué)手冊和技術(shù)參考書。

本書目錄

第1章 Web前端開發(fā)概述 1

1.1 Web前端開發(fā)職責(zé) 1

1.2 Web前端開發(fā)相關(guān)概念 2

1.3 Web前端開發(fā)相關(guān)技術(shù) 3

1.3.1 Web標(biāo)準(zhǔn) 3

1.3.2 HTML 4

1.3.3 CSS 4

1.3.4 JavaScript 5

1.4 Web前端開發(fā)工具 5

1.4.1 代碼編輯工具：VSCode 6

1.4.2 代碼運(yùn)行工具：瀏覽器 8

1.4.3 開發(fā)者工具 9

1.4.4 人工智能輔助編程工具 10

1.5 網(wǎng)站設(shè)計與開發(fā)流程 11

1.6 實戰(zhàn)案例：網(wǎng)頁顯示“社會主義核心價值觀” 12

1.7 本章小結(jié) 13

第2章 HTML5基礎(chǔ) 14

2.1 HTML5語法基礎(chǔ) 14

2.1.1 HTML文檔結(jié)構(gòu) 14

2.1.2 HTML標(biāo)簽語法 17

2.1.3 HTML注釋 18

2.2 文本控制標(biāo)簽 19

2.2.1 標(biāo)題標(biāo)簽 19

2.2.2 段落標(biāo)簽 20

2.2.3 換行標(biāo)簽 20

2.2.4 文本格式化標(biāo)簽 21

2.2.5 特殊字符 22

2.3 圖像標(biāo)簽 23

2.3.1 網(wǎng)頁常用圖像格式 23

2.3.2 圖像標(biāo)簽的使用 24

2.3.3 相對路徑與絕對路徑 26

2.4 超鏈接標(biāo)簽 27

2.4.1 文本鏈接 27

2.4.2 圖像鏈接 28

2.4.3 書簽（錨點(diǎn)）鏈接 28

2.4.4 其他鏈接 30

2.5 列表 30

2.5.1 有序列表 31

2.5.2 無序列表 32

2.5.3 定義列表 34

2.5.4 嵌套列表 35

2.6 表格 36

2.6.1 表格結(jié)構(gòu) 36

2.6.2 表格標(biāo)簽 37

2.7 視頻和音頻標(biāo)簽 41

2.7.1 視頻標(biāo)簽 41

2.7.2 音頻標(biāo)簽 42

2.8 其他標(biāo)簽 42

2.8.1 預(yù)格式化標(biāo)簽 42

2.8.2 水平線標(biāo)簽 43

2.8.3 行內(nèi)容器標(biāo)簽 43

2.9 實戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”兵役登記頁面 44

2.10 本章小結(jié) 46

第3章 HTML5頁面元素和屬性 47

3.1 文檔結(jié)構(gòu)標(biāo)簽 47

3.1.1標(biāo)簽 47

3.1.2標(biāo)簽 49

3.1.3標(biāo)簽 50

3.1.4標(biāo)簽 51

3.1.5標(biāo)簽 53

3.1.6標(biāo)簽 53

3.1.7和標(biāo)簽 54

3.1.8標(biāo)簽 55

3.2 交互元素 55

3.2.1 標(biāo)簽 55

3.2.2 標(biāo)簽 56

3.2.3標(biāo)簽 57

3.3 文本層次語義標(biāo)簽 58

3.3.1 標(biāo)簽 58

3.3.2 標(biāo)簽 59

3.3.3 標(biāo)簽 60

3.4 全局屬性 61

3.5 實戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”頁面結(jié)構(gòu) 62

3.6 本章小結(jié) 64

第4章表單 65

4.1 表單概述 65

4.2標(biāo)簽 67

4.3 標(biāo)簽 68

4.3.1 單行文本框 69

4.3.2 密碼框 69

4.3.3 文件域 70

4.3.4 單選按鈕和復(fù)選框 71

4.3.5 隱藏域 73

4.3.6 按鈕 73

4.3.7 HTML5新增輸入元素 76

4.4 標(biāo)簽 78

4.5 標(biāo)簽 79

4.6 選擇列表標(biāo)簽 80

4.7 多行文本框標(biāo)簽 83

4.8 表單常用屬性 84

4.9 實戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”網(wǎng)上咨詢表單 86

4.10 本章小結(jié) 88

第5章 CSS3基礎(chǔ) 89

5.1 CSS概述 89

5.2 CSS語法規(guī)則 90

5.3 CSS樣式的引入方法 91

5.3.1 行內(nèi)樣式表 91

5.3.2 內(nèi)部樣式表 92

5.3.3 外部樣式表 93

5.4 CSS基本選擇器 94

5.4.1 標(biāo)簽選擇器 94

5.4.2 ID選擇器 95

5.4.3 類選擇器 95

5.4.4 通用選擇器 97

5.5 實戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”公共樣式表制作 97

5.6 本章小結(jié) 98

第6章 CSS3修飾頁面元素 99

6.1 CSS字體樣式 99

6.1.1 字體粗細(xì)屬性 99

6.1.2 字體風(fēng)格屬性 100

6.1.3 字體大小屬性 101

6.1.4 字體族屬性 103

6.1.5 字體屬性 106

6.2 CSS文本樣式 107

6.2.1 行高屬性 107

6.2.2 顏色屬性 109

6.2.3 文本水平對齊屬性 110

6.2.4 首行縮進(jìn)屬性 111

6.2.5 文本修飾屬性 111

6.2.6 字符間距屬性 112

6.2.7 字間距屬性 113

6.2.8 字母大小寫屬性 114

6.2.9 文本陰影效果屬性 115

6.3 CSS表格樣式 116

6.4 CSS表單樣式 118

6.4.1 單行文本框美化 119

6.4.2 按鈕美化 120

6.4.3 下拉列表美化 120

6.5 CSS列表樣式 122

6.6 實戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”在線咨詢頁面 123

6.7 本章小結(jié) 126

第7章 CSS3高級選擇器 127

7.1 組合選擇器 127

7.1.1 交集選擇器 127

7.1.2 并集選擇器 128

7.1.3 后代選擇器 129

7.1.4 子元素選擇器 130

7.1.5 相鄰兄弟選擇器 131

7.1.6 通用兄弟選擇器 132

7.2 屬性選擇器 133

7.3 偽類選擇器 134

7.4 偽元素選擇器 136

7.5 CSS三大特性 138

7.6 本章小結(jié) 141

第8章 CSS3盒子模型 142

8.1 盒子模型概述 142

8.1.1 認(rèn)識盒子模型 142

8.1.2

標(biāo)簽 144

8.2 盒子模型的相關(guān)屬性 144

8.2.1 內(nèi)容區(qū)域的寬度和高度 144

8.2.2 邊框 145

8.2.3 內(nèi)邊距 152

8.2.4 外邊距 153

8.3 陰影 155

8.4 box-sizing 156

8.5 背景屬性 158

8.5.1 背景顏色 158

8.5.2 背景圖像 158

8.5.3 圖像平鋪方式 158

8.5.4 背景圖像位置 160

8.5.5 背景圖像固定 161

8.5.6 背景圖像大小 161

8.5.7 背景裁剪 163

8.5.8 背景復(fù)合屬性 164

8.5.9 CSS精靈圖 165

8.6 實戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”登錄頁面 166

8.7 本章小結(jié) 169

第9章浮動與定位 170

9.1 標(biāo)準(zhǔn)文檔流 170

9.2 元素的分類 171

9.2.1 塊級元素、行內(nèi)元素與行內(nèi)塊元素 171

9.2.2 元素的類型轉(zhuǎn)換 172

9.3 元素的浮動 173

9.3.1 設(shè)置浮動 174

9.3.2 清除浮動 176

9.4 元素的定位 180

9.4.1 定位的概念 180

9.4.2 定位屬性 181

9.4.3 靜態(tài)定位 181

9.4.4 相對定位 182

9.4.5 絕對定位 183

9.4.6 固定定位 186

9.4.7 粘性定位 187

9.4.8 層疊等級屬性 188

9.5 實戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”輪播圖效果 190

9.6 本章小結(jié) 192

第10章 CSS3高級應(yīng)用 193

10.1 變換 193

10.1.1 旋轉(zhuǎn) 194

10.1.2 傾斜 195

10.1.3 縮放 196

10.1.4 平移 197

10.1.5 變換原點(diǎn) 198

10.2 過渡 200

10.3 動畫 202

10.4 實戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”CSS3高級應(yīng)用 205

10.5 本章小結(jié) 208

第11章網(wǎng)頁布局 209

11.1 網(wǎng)頁布局概述 209

11.1.1 網(wǎng)頁布局的概念 209

11.1.2 網(wǎng)頁布局的流程 210

11.1.3 常見的網(wǎng)頁布局方法 211

11.2 網(wǎng)頁布局命名規(guī)范 211

11.3 常見布局的實現(xiàn) 212

11.3.1 單列布局 212

11.3.2 兩列常規(guī)布局 214

11.3.3 三列常規(guī)布局 216

11.3.4 兩列自適應(yīng)等高布局 217

11.3.5 三列自適應(yīng)布局 219

11.4 實戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”首頁主體部分 223

11.5 本章小結(jié) 225

第12章 Flex布局 226

12.1 Flex布局概述 226

12.2 Flex布局相關(guān)概念 227

12.3 容器屬性 227

12.3.1 display屬性 228

12.3.2 flex-direction屬性 228

12.3.3 flex-wrap屬性 230

12.3.4 justify-content屬性 232

12.3.5 align-items屬性 233

12.3.6 align-content屬性 235

12.4 項目屬性 236

12.4.1 order屬性 236

12.4.2 flex-grow屬性 237

12.4.3 flex-shrink屬性 239

12.4.4 flex-basis屬性 240

12.4.5 flex屬性 241

12.5 實戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”導(dǎo)航條 242

12.6 本章小結(jié) 244

第13章 Grid布局 245

13.1 Grid布局概述 245

13.2 Grid布局相關(guān)概念 246

13.3 容器屬性 246

13.3.1 display屬性 247

13.3.2 劃分網(wǎng)格 248

13.3.3 行間隔和列間隔 252

13.3.4 項目對齊方式 253

13.4 項目屬性 255

13.4.1 grid-column和grid-row屬性 255

13.4.2 grid-area屬性 257

13.5 實戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”視頻展播列表 258

13.6 本章小結(jié) 260

第14章 Web前端項目綜合實踐——文創(chuàng)商城 261

14.1 項目概述 261

14.2 需求分析 262

14.3 原型設(shè)計 262

14.4 公共部分的設(shè)計與實現(xiàn) 265

14.4.1 重置樣式 265

14.4.2 頁面頭部 265

14.4.3 頁面底部 268

14.4.4 懸浮側(cè)邊欄 270

14.5 首頁的設(shè)計與實現(xiàn) 271

14.5.1 甄選好物版塊 271

14.5.2 國博文房版塊 274

14.6 商品列表頁的設(shè)計與實現(xiàn) 277

14.6.1 商品類型篩選 277

14.6.2 分頁導(dǎo)航 278

14.7 商品詳情頁的設(shè)計與實現(xiàn) 279

14.8 本章小結(jié) 283

編輯推薦

1HTML5與CSS3是Web前端開發(fā)的兩大核心技術(shù)，它們不僅是Web前端開發(fā)工程師必須掌握的技能，也是高校一門重要的Web前端課程內(nèi)容

2《HTML5+CSS3 Web前端開發(fā)與實例教程：微課視頻版》以“從項目中來到項目中去”為主旨，從Web前端開發(fā)的基本概念入手，系統(tǒng)介紹HTML5、CSS3網(wǎng)頁編程技巧。

3《HTML5+CSS3 Web前端開發(fā)與實例教程：微課視頻版》采取“知識點(diǎn)講解+示例解析+案例詳講+高頻面試題+實踐操作+學(xué)科競賽真題”的遞進(jìn)式教學(xué)模式，引導(dǎo)讀者理解理論知識，掌握開發(fā)方法，學(xué)會復(fù)雜的網(wǎng)站設(shè)計技能，全面提升讀者的Web前端開發(fā)能力。

4《HTML5+CSS3 Web前端開發(fā)與實例教程：微課視頻版》配套資源非常豐富，包括思政元素、案例源代碼、PPT課件、微課視頻、習(xí)題與答案、教案、教學(xué)大綱、章節(jié)測試、云題庫、實驗報告、學(xué)習(xí)通在線課程，能幫助讀者快速掌握HTML5與CSS3前端技術(shù)。

本文摘自《HTML5+CSS3 Web前端開發(fā)與實例教程：微課視頻版》，獲出版社和作者授權(quán)發(fā)布。

在很多網(wǎng)站上都會使用到視頻和音頻，HTML5 中提供了展示視頻和音頻的標(biāo)簽。向網(wǎng)頁嵌入視頻可以使用 <video> 標(biāo)簽，而嵌入音頻可以使用 <audio> 標(biāo)簽。這兩個標(biāo)簽都是 HTML 5 中新增的標(biāo)簽，兩個標(biāo)簽中的屬性和方法也很類似，但也有些不同。其中 audio 元素用于定義聲音，比如音樂， video 元素用于定義視頻，如電影等。

向網(wǎng)頁中嵌入視頻

<video> 標(biāo)簽可以用于定義視頻，且提供了播放、暫停、音量控件來控制視頻。舉個例子，像我們俠課島網(wǎng)站上，課程視頻播放，就是通過 <video> 標(biāo)簽來實現(xiàn)的。下面我們來看一下如何向網(wǎng)頁中嵌入一個視頻。

示例：

首先我們準(zhǔn)備一個視頻，例如一個 test.mp4，然后使用 <video> 標(biāo)簽嵌入視頻，如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5學(xué)習(xí)(9xkd.com)</title>
    </head>
    <body>
        <video src="./test.mp4" controls="controls" width="700px" height="400px"></video>
    </body>
</html>

在瀏覽器中的預(yù)覽效果：

從上圖中可以看到，我們通過 <video> 標(biāo)簽成功向網(wǎng)頁中插入了一個視頻，其中 src 屬性用于引入要播放的視頻的 URL，注意視頻地址一定要正確，如果地址錯誤，視頻是不能顯示的。然后我們通過 width、height 屬性設(shè)置了視頻的寬度為 700px ，高度為 400px。

然后可以看到，視頻上還顯示了播放、調(diào)整音量等控件，當(dāng)我們點(diǎn)擊播放按鈕時，視頻就會開始播放。這是因為我們設(shè)置了 controls 屬性，如果我們沒有設(shè)置這個屬性，視頻將會顯示一個靜止的畫面，并且不管怎么點(diǎn)擊都是沒有反應(yīng)的。大家可以試一下，不設(shè)置 controls 屬性然后在瀏覽器中查看演示效果，這里就不演示給大家看了。

video 元素中的常用屬性如下所示：

有些比較老的瀏覽器可能不支持 <video> 標(biāo)簽，例如 IE8 及以下的瀏覽器就不支持，而 IE9+、Firefox、Opera、Chrome、Safari 等瀏覽器都支持 <video> 標(biāo)簽。

所以我們可以在 <video> 標(biāo)簽中放置文本內(nèi)容，這樣當(dāng)某個瀏覽器不支持此標(biāo)簽時，就可以顯示提示內(nèi)容：

<video src="./test.mp4" controls="controls" width="700px" height="400px">
    您的瀏覽器不支持 video 標(biāo)簽
</video>

這樣用戶就會知道，是因為瀏覽器不支持所以加載視頻不成功，可以換一個瀏覽器。

視頻的格式

像我們平時看到的視頻格式有很多種，例如常見的有 mp4、AVI、mov、rmvb、Ogg 等等，目前 video 元素支持的視頻格式有下面三種：

這三種視頻格式，在不同的瀏覽器中兼容性不同，例如 MP4 格式不支持 Firefox 和 Opera 瀏覽器，Ogg 格式不支持IE、Safari 瀏覽器，WebM 格式不支持IE、Safari 瀏覽器等。

所以我們可能需要在不同的瀏覽器中使用不同的視頻格式，這需要用到 <source> 標(biāo)簽。

source標(biāo)簽

<source> 標(biāo)簽可以為媒體元素定義媒介資源，例如 video 和 audio 元素。

例如 <video> 標(biāo)簽中可以包含多個 <source> 標(biāo)簽，<source> 標(biāo)簽可以鏈接不同的視頻文件，瀏覽器將使用第一個可識別的格式。

示例：

例如我們插入的視頻播放器，帶有兩個源文件，瀏覽器會根據(jù)需要來選擇源文件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5學(xué)習(xí)(9xkd.com)</title>
    </head>
    <body>
        <video controls="controls" width="700px" height="400px">
            <source src="./test.mp4" type="video/mp4">
            <source src="./test.ogg" type="video/ogg">
            您的瀏覽器不支持 video 標(biāo)簽
        </video>
    </body>
</html>

像上述代碼中，如果是 Safari 瀏覽器就會選擇第一個源文件，如果是 Firefox 瀏覽器則會選擇第二個源文件。

<source> 標(biāo)簽有三個屬性：

向網(wǎng)頁中嵌入音頻

向網(wǎng)頁中嵌入音頻可以使用 <audio> 標(biāo)簽，此標(biāo)簽的使用和 <video> 標(biāo)簽類似。插入視頻是有畫面的，我們也可以調(diào)整視頻的寬和高等，而插入音頻是沒有畫面的。

audio 元素支持的格式和 video 元素也有一點(diǎn)區(qū)別：

示例：

例如我們插入一段音頻，在瀏覽器中可以看到，是沒有畫面的，只有聲音：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5學(xué)習(xí)(9xkd.com)</title>
    </head>
    <body>
        <audio controls="controls">
            <source src="./test.mp4" type="audio/mpeg">
            <source src="./test.ogg" type="audio/ogg">
            您的瀏覽器不支持 audio 標(biāo)簽
        </audio>
    </body>
</html>

在瀏覽器中的演示效果：

向網(wǎng)頁中嵌入音頻時，也可以通過 <source> 標(biāo)簽來指定兩個源文件，<source> 標(biāo)簽允許規(guī)定兩個視頻或者音頻文件供瀏覽器根據(jù)它對媒體類型或者編解碼器的支持進(jìn)行選擇。

audio 元素中的常用屬性和 video 元素差不多，但是 audio 元素中沒有 width、height 等屬性。

常用屬性如下所示：

總結(jié)

向網(wǎng)頁中嵌入視頻和音頻其實很簡單，要注意 video 元素和 audio 元素支持的視頻、音頻格式類型，如果插入的視頻格式不支持，則視頻或音頻不會顯示。

更多可以查看鏈接：https://www.9xkd.com/

開源精選》是我們分享Github、Gitee等開源社區(qū)中優(yōu)質(zhì)項目的欄目，包括技術(shù)、學(xué)習(xí)、實用與各種有趣的內(nèi)容。本期推薦的是一個開源的HTML5流媒體播放器——PearPlayer.js。

PearPlayer是完全用JavaScript寫的開源HTML5流媒體播放框架，實現(xiàn)了融合HTTP（含HTTPS、HTTP2）和WebRTC的多協(xié)議、多源、低延遲、高帶寬利用率的無插件Web客戶端流媒體加速能力。基于H5的MSE（Media Source Extension）技術(shù)將來自多個源節(jié)點(diǎn)的Buffer分塊喂給播放器，再加上精心設(shè)計的算法可實現(xiàn)最優(yōu)的調(diào)度策略及對各種異常情況的處理，PearPlayer由此能在保證用戶流暢視頻體驗的前提下最大化P2P率。

PearPlayer特性

P2P能力基于WebRTC，無須安裝任何插件
多協(xié)議(HTTP、HTTPS、WebRTC)、多源
自研的調(diào)度算法，在保證用戶流暢視頻體驗的前提下最大化P2P率
默認(rèn)無需填參數(shù)（內(nèi)部根據(jù)視頻碼率等作自適應(yīng)），高級使用模式下可自行調(diào)整算法和參數(shù)
默認(rèn)不會無限制緩沖，盡可能為CP用戶節(jié)省帶寬/流量
支持Chrome、Firefox、Opera、IE、Edge等主流瀏覽器，即將支持Safari、騰訊微信、X5/TBS（可多源傳輸，播放問題待不久后由MSE支持完善）
可選接入低成本、高可用的Pear Fog CDN
協(xié)議默認(rèn)通過TLS/DTLS全加密，無DPI特征；并可通過Pear Fog組件的動態(tài)端口映射進(jìn)一步消除統(tǒng)計學(xué)特征
像使用HTML5 <video>標(biāo)簽一樣簡單，并易與video.js等流行播放框架集成
具備Browser P2P能力（基于WebTorrent）

使用方法

首先通過script標(biāo)簽導(dǎo)入pear-player.min.js：

<script src="./dist/pear-player.min.js"></script>

或者使用CDN：

<script src="https://cdn.jsdelivr.net/npm/pearplayer@latest"></script>

假設(shè)用video標(biāo)簽播放以下視頻，HTML如下：

<video id="pearvideo" src="https://qq.webrtc.win/tv/Pear-Demo-Yosemite_National_Park.mp4" controls>

只需以下幾行代碼，即可將PearPlayer綁定到video標(biāo)簽：

<script>

/**

* 第一個參數(shù)為video標(biāo)簽的id或class

* opts是可選的參數(shù)配置

*/

if (PearPlayer.isMSESupported()) {

var player = new PearPlayer('#pearvideo', opts);

}

</script>

至此，就已經(jīng)添加播放器了，無需任何插件。

開源地址：https://gitee.com/PearInc/PearPlayer.js

在線咨詢

上一篇：在小程序中使用 tailwindcss 的最佳方式，支持各家主流小程序平臺
下一篇：如何在網(wǎng)頁中瀏覽和編輯DWG文件夢想CAD控件

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

新書速覽-HTML5+CSS3 Web前端開發(fā)與實例教程：微課視頻版

向網(wǎng)頁中嵌入視頻

視頻的格式

source標(biāo)簽

向網(wǎng)頁中嵌入音頻

總結(jié)

PearPlayer特性

使用方法

您的項目需求