Web前端开发笔记——第二章 HTML语言 第十节 画布标签、音视频标签
目錄
- 一、畫(huà)布標(biāo)簽
- 二、音視頻標(biāo)簽
- （一）音頻標(biāo)簽
- （二）視頻標(biāo)簽
- （三）資源標(biāo)簽
- 結(jié)語(yǔ)
一、畫(huà)布標(biāo)簽
<canvas> </canvas> 畫(huà)布標(biāo)簽用于圖形、字符等的繪制，它不能直接地繪制圖形，要通過(guò)腳本即JavaScript來(lái)完成，這里不對(duì)具體腳本闡述，只介紹該標(biāo)簽的用法。通過(guò)指定id=""屬性 ，用于在腳本中引用，而通過(guò)定義 width=""和 height=""屬性來(lái)規(guī)定該畫(huà)布的大小.，即寬度和高，如下：
<canvas id="" width="" height=""></canvas>可以通過(guò)添加style=""屬性來(lái)對(duì)畫(huà)布加上邊框，因?yàn)槟J(rèn)時(shí)畫(huà)布是無(wú)邊框的。
例如，在HBulider X中下列代碼，設(shè)置畫(huà)布的邊框大小寬度為300，高度為250，邊框大小為5px，且顏色為藍(lán)色：
運(yùn)行結(jié)果如下：
二、音視頻標(biāo)簽
一般瀏覽器通過(guò)帶有flash插件，使其播放音視頻，但也能通過(guò)HTML5中的標(biāo)簽來(lái)播放音視頻。
（一）音頻標(biāo)簽
通過(guò)<audio></audio>標(biāo)簽，在網(wǎng)頁(yè)上加入音頻元素，使能播放音頻文件，添加src=""屬性，即該音頻文件的URL，controls="controls"屬性表示顯示音頻控件，即播放暫停按鈕、調(diào)節(jié)聲音等等；loop="loop"屬性表示當(dāng)播放完該音頻后，自動(dòng)重新開(kāi)始播放；autoplay="autoplay"屬性表示當(dāng)打開(kāi)該網(wǎng)頁(yè)頁(yè)面時(shí)，音頻文件加載好后自動(dòng)開(kāi)始播放該音頻；muted="muted"屬性表示該音頻文件自動(dòng)設(shè)置為靜音輸出。
<audio src="" controls="controls" loop="loop" autoplay="autoplay" muted="muted"> </audio>另外要注意audio標(biāo)簽?zāi)壳皟H支持的3種文件格式：mp3、wav、ogg。
例如，在HBulider X中下列代碼，音頻文件位于站點(diǎn)文件夾music內(nèi)，在文件夾中html文件調(diào)用該音頻，設(shè)置音頻控件、自動(dòng)播放以及循環(huán)播放屬性：
運(yùn)行結(jié)果如下，可以正常播放音頻文件：
（二）視頻標(biāo)簽
和音頻標(biāo)簽一樣，也可以通過(guò)<video></video>標(biāo)簽，在網(wǎng)頁(yè)上加入媒體元素，使能播放媒體。它的屬性與音頻標(biāo)簽屬性一樣，只不過(guò)多了寬度和高度屬性設(shè)置，即通過(guò)width=""屬性和height=""屬性設(shè)置，但如果不設(shè)置大小屬性，原視頻播放畫(huà)面大小會(huì)隨頁(yè)面的改變而改變。
<video src="" width="" height="" controls="controls" loop="loop" autoplay="autoplay" muted="muted"> </video>這里也是一樣，要注意video標(biāo)簽?zāi)壳皟H支持的3種文件格式：mp4、webm、ogg。
例如，在HBulider X中下列代碼，音頻文件位于站點(diǎn)文件夾video內(nèi)，在文件夾中html文件調(diào)用該視頻，設(shè)置視頻控件、自動(dòng)播放以及循環(huán)播放屬性：
運(yùn)行結(jié)果如下，可以正常播放視頻文件：
（三）資源標(biāo)簽
當(dāng)要定義多種媒體資源時(shí)，這時(shí)要用到<source> </source> 標(biāo)簽，它用在audio和video標(biāo)簽內(nèi)。通過(guò)src=""屬性和type=""屬性，定義音視頻文件的URL和類型，如下：
<audio controls="controls"><source src="../music/陳奕迅-愛(ài)情轉(zhuǎn)移.mp3" type="audio/mp3"> </audio>比如為了當(dāng)用戶使用不同的瀏覽器播放音視頻時(shí)有些瀏覽器不支持該格式時(shí)，可以利用另一種格式，即第二個(gè)媒體資源。
例如，在HBulider X中下列代碼，即在音頻標(biāo)簽內(nèi)定義了兩個(gè)資源標(biāo)簽，它有兩種格式，當(dāng)瀏覽器都支持時(shí)任意播放，而有的瀏覽器不支持其中一種時(shí)選用另一種可支持的格式播放：
結(jié)語(yǔ)
以上就是全部?jī)?nèi)容，篇幅較長(zhǎng)，感謝您的閱讀和支持，若有表述或代碼中有不當(dāng)之處，望指出！您的指出和建議能給作者帶來(lái)很大的動(dòng)力！！！
總結(jié)
以上是生活随笔為你收集整理的Web前端开发笔记——第二章 HTML语言 第十节 画布标签、音视频标签的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Web前端开发笔记——第二章 HTML语
- 下一篇： Web前端开发笔记——第二章 HTML语