前端之HTML視頻、音頻

• 網頁中的音頻和視頻
• • <video> 元素
  • • 簡單視頻
    • • 格式問題
    • 多播放源視頻
    • 其他特性
  • <audio> 元素
  • • 音頻實例
• 嵌入

網頁中的音頻和視頻

HTML5 添加了許多的新特性，包括 <video> 和 <audio> 標簽，以及一些 JavaScript 和 APIs 用于對其進行控制。

YouTube 、Dailymotion 、Vimeo、Bilibili等在線視頻提供商，以及Soundcloud等在線音頻提供商 。這些公司提供方便、簡單的方式來支持視頻，不必擔心龐大的帶寬消耗。

<video> 元素

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

簡單視頻

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

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

src 指向嵌入網頁中的視頻資源
controls 顯示瀏覽器自帶的控件，如果沒有就像加了一個圖片一樣

<video>標簽內的文本內容是后備內容，當覽器不支持 <video> 標簽的時候顯示。

格式問題

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

多播放源視頻

MP3 (音頻格式) 和 MP4/H.264 (視頻格式) 是被廣泛支持的兩種格式，并且質量良好。但有專利問題。
WebM由Google提出，是一個開放、免費的媒體文件格式。包含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 視頻。可點擊<a href="https://www.bilibili.com/video/BV19F411i7yp?spm_id_from=333.999.0.0">此鏈接</a>觀看</p> </video>

其他特性

屬性作用

autoplay	音頻和視頻內容立即播放，哪怕網頁還沒加載完
autobuffer	視頻會自動開始緩存，即使沒有設置自動播放
loop	循環播放
muted	默認靜音
poster	指向了一個圖像，會在視頻播放前顯示。用于預覽或廣告。
preload	“none” ：不緩沖；“auto” ：頁面加載后緩存媒體文件；“metadata” ：僅緩沖文件的元數據

<audio> 元素

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

音頻實例

<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權威指南(第6版)(中文版).pdf" frameborder="0"></iframe> </section><h3>嵌入pdf——2</h3> <embed src="./pdfs/JavaScript權威指南(第6版)(中文版).pdf" width="100%" height="960"><h3>嵌入pdf——3</h3> <object data="./pdfs/JavaScript權威指南(第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權威指南(第6版)(中文版).pdf">download the PDF file.</a></p> </object>

網頁實例

總結

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

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