前端之HTML視頻、音頻

• 網(wǎng)頁(yè)中的音頻和視頻
• • <video> 元素
  • • 簡(jiǎn)單視頻
    • • 格式問(wèn)題
    • 多播放源視頻
    • 其他特性
  • <audio> 元素
  • • 音頻實(shí)例
• 嵌入

網(wǎng)頁(yè)中的音頻和視頻

HTML5 添加了許多的新特性，包括 <video> 和 <audio> 標(biāo)簽，以及一些 JavaScript 和 APIs 用于對(duì)其進(jìn)行控制。

YouTube 、Dailymotion 、Vimeo、Bilibili等在線視頻提供商，以及Soundcloud等在線音頻提供商 。這些公司提供方便、簡(jiǎn)單的方式來(lái)支持視頻，不必?fù)?dān)心龐大的帶寬消耗。

<video> 元素

在HTML或者XHTML文檔中嵌入媒體播放器，用于支持文檔內(nèi)的視頻播放

簡(jiǎn)單視頻

視頻的尺寸多大占位就是多大。可以用width、height指定尺寸。

video{max-width: 100%;max-height: 100%; } <video src="./video/475829081-1-112.mp4" controls><p>你的瀏覽器不支持 HTML5 視頻。可點(diǎn)擊<a href="https://www.bilibili.com/video/BV19F411i7yp?spm_id_from=333.999.0.0">此鏈接</a>觀看</p> </video>

src 指向嵌入網(wǎng)頁(yè)中的視頻資源
controls 顯示瀏覽器自帶的控件，如果沒(méi)有就像加了一個(gè)圖片一樣

<video>標(biāo)簽內(nèi)的文本內(nèi)容是后備內(nèi)容，當(dāng)覽器不支持 <video> 標(biāo)簽的時(shí)候顯示。

格式問(wèn)題

文件：
視頻文件有MP3、MP4、WebM等格式。不同格式定義了構(gòu)成媒體文件的音頻軌道和視頻軌道的不同儲(chǔ)存結(jié)構(gòu)，其中還包含描述這個(gè)媒體文件的元數(shù)據(jù)，以及用于編碼的編碼譯碼器等等。
瀏覽器：
瀏覽器并不全支持相同的 codecs，所以你得使用幾個(gè)不同格式的文件來(lái)兼容不同的瀏覽器。如果你使用的格式都得不到瀏覽器的支持，那么媒體文件將不會(huì)播放。

多播放源視頻

MP3 (音頻格式) 和 MP4/H.264 (視頻格式) 是被廣泛支持的兩種格式，并且質(zhì)量良好。但有專利問(wèn)題。
WebM由Google提出，是一個(gè)開(kāi)放、免費(fèi)的媒體文件格式。包含VP8影片軌和 Ogg Vorbis 音軌。

<video controls><source src="./video/475829081-1-112.mp4" type="video/mp4"><source src="./video/475829081-1-112.webm" type="video/webm"><p>你的瀏覽器不支持 HTML5 視頻。可點(diǎn)擊<a href="https://www.bilibili.com/video/BV19F411i7yp?spm_id_from=333.999.0.0">此鏈接</a>觀看</p> </video>

其他特性

屬性作用

autoplay	音頻和視頻內(nèi)容立即播放，哪怕網(wǎng)頁(yè)還沒(méi)加載完
autobuffer	視頻會(huì)自動(dòng)開(kāi)始緩存，即使沒(méi)有設(shè)置自動(dòng)播放
loop	循環(huán)播放
muted	默認(rèn)靜音
poster	指向了一個(gè)圖像，會(huì)在視頻播放前顯示。用于預(yù)覽或廣告。
preload	“none” ：不緩沖；“auto” ：頁(yè)面加載后緩存媒體文件；“metadata” ：僅緩沖文件的元數(shù)據(jù)

<audio> 元素

在文檔中嵌入音頻內(nèi)容，使用方法與<video>元素十分相似。

音頻實(shí)例

<audio controls><source src="./audios/audio.aac" type="audio/aac"><source src="./audios/audio.mp3" type="audio/mp3"><source src="./audios/audio.ogg" type="audio/ogg"><p>你的瀏覽器不支持 HTML5 音頻的播放。 </p> </audio>

type 屬性，方便瀏覽器找到支持的格式。

嵌入

<h3>嵌入pdf——1</h3> <section><iframe width="100%" height="950" src="./pdfs/JavaScript權(quán)威指南(第6版)(中文版).pdf" frameborder="0"></iframe> </section><h3>嵌入pdf——2</h3> <embed src="./pdfs/JavaScript權(quán)威指南(第6版)(中文版).pdf" width="100%" height="960"><h3>嵌入pdf——3</h3> <object data="./pdfs/JavaScript權(quán)威指南(第6版)(中文版).pdf" type="application/pdf" width="800" height="1200" typemustmatch><p>You don't have a PDF plugin, but you can<a href="./pdfs/JavaScript權(quán)威指南(第6版)(中文版).pdf">download the PDF file.</a></p> </object>

網(wǎng)頁(yè)實(shí)例

總結(jié)

以上是生活随笔為你收集整理的前端之HTML视频、音频的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。