HTML中嵌入視頻和音頻代碼

網頁中添加視頻、聲音、動畫等，可以增強用戶體驗。在HTML5之前，為網頁添加多媒體的唯一辦法，就是使用第三方的插件（如，Adobe Flash等）。

HTML5中，提供了對多媒體的原生支持，只需通過 video 元素，就可以向網頁嵌入視頻、電影或音頻資源，通過 audio 元素向網頁嵌入音頻資源，省時省力。

HTML中嵌入視頻和音頻代碼

一、視頻

在HTML5時代，在網頁中嵌入視頻非常簡單，只需要一個 video 元素，并設置它的 src 屬性，使其鏈接一個視頻地址就可以完全搞定了，這個太esay了

把這個網站在IE8中打開一看，網站上除了一片空白外，什么也沒有，這是為什么呢？

原來 video 是HTML5最新引入的元素，并不是所有瀏覽器都支持它，IE8及以下版本都無法識別 video 標簽。如果瀏覽器不識別 video標簽，則會忽略它，當做什么都沒有。這就是網站上一片空白的原因。

這個問題好解決，只需在 video 標簽之間放置文本信息，不支持 video 標簽的老瀏覽器，會顯示 video 標簽之間的文本信息，以提示用戶瀏覽器不支持 video，就這么簡單！

你的瀏覽器已經老掉牙了，不支持video，還不趕快使用現代瀏覽器O(∩_∩)O~！

</video>

在IE8上打開一看，確實顯示了提示文本，這下好多了，至少用戶知道自己的瀏覽器不能播放視頻，該換瀏覽器了。

下載了Opera瀏覽器的最新版本25.0，打開一看，怎么還是一片空白外！Opera瀏覽器明明是支持video標簽的，那又是為什么呢？

這個就得從視頻的編碼格式說起了。video 元素支持三種視頻格式：Ogg、MP4、WebM。

Ogg是帶有Theora視頻編碼和Vorbis音頻編碼的文件，后綴名為 .ogg；MP4是帶有H.264視頻編碼和AAC音頻編碼的MP4文件，后綴名為 .mp4；WebM是VP8視頻編碼和Vorbis音頻編碼的文件，后綴名為 .webm。

這個Opera瀏覽器呢，它可以支持ogg，但不支持mp4。由于Opera支持video標簽，故video標簽之間的文本信息沒有顯示出來，但它不支持ogg，所以就不進行播放，最終導致頁面出現一片空白。這下可怎么辦呢？

其實辦法有的是，我們可以從網上下載一副圖像，放到視頻播放窗口，如果視頻無法播放，就顯示這張圖片，是不是更好呢？從網上下載一張美女圖片，干脆叫beauty.jpg吧。那這個圖像怎么添加到視頻窗口呢？

video標簽有個poster 屬性，就是專門在視頻窗口放置圖片的。poster是一個video的占位符，無論什么情況下，只要視頻還沒有播放（視頻下載過程中、視頻不存在、不支持該視頻類型、用戶點擊播放按鈕前），就會顯示該圖像，可以看做是視頻播放之前插入的宣傳畫或海報。

你的瀏覽器已經老掉牙了，不支持video，還不趕快使用現代瀏覽器O(∩_∩)O~！

</video>

在Opera瀏覽器上刷新一下，真的有一個美女沖著自己微笑呢。雖然視頻沒有播放出來，這回心情卻是好多了。

那我可不能一天到晚只看美女呀，視頻還是還是要想辦法播放出來的。既然Opera瀏覽器不支持mp4，我們就換成需要ogg吧，這樣就肯定沒問題了。

我想了想，這個辦法不好，萬一某個瀏覽器只支持支持ogg，不支持mp4呢。這年頭，什么都缺，就是不缺點子，隨便在網上一搜，辦法就有了。

在 video 元素中添加 source 元素，就可以解決這個問題。在source 元素中，通過 src 屬性指定視頻的地址，通過 type 屬性指定視頻的類型，以幫助瀏覽器決定是否能播放該視頻。并且，在 video 元素中可以添加任意多個source 元素，讓不同的 source 元素鏈接到不同的視頻文件。

這樣的話，當瀏覽器發現 video 元素時，首先會查看它本身是否定義了 src 屬性。如果沒有，就會檢查 source 元素。瀏覽器會逐個查看這些視頻源，直到找到一個可以播放的視頻。一旦找到，就會播放它并忽略其他的視頻源。我們干脆添加兩個source，一個是mp4，一個是ogg，這下視頻是一定能播放出來了。

你的瀏覽器已經老掉牙了，不支持video，還不趕快使用現代瀏覽器O(∩_∩)O~！

</video>

在Opera瀏覽器上又刷新一下，只有美女沖著我微笑，視頻還是沒播放出來。唉，太粗心了，忘記添加播放視頻的控件了。

在video標簽中，通過添加controls 屬性來為視頻添加播放控件，方便用戶執行播放、暫停操作和音量控制。

（此處略去500字…）

</video>

在Opera瀏覽器上又刷新一下，效果真的不一樣，這次不僅看到美女，還看到了視頻控件。用鼠標猛戳一下那個播放按鈕，哈哈，不錯，真的聽到美妙的旋律。我們的ogg文件，終于播放出來了，讓我們好好享受一下吧O(∩_∩)O。

聽了一會，忽然一想，不對呀，我剛才點了播放按鈕后，等了半天才聽到聲音。能不能我一點播放按鈕，就立即播放呢？

原來視頻也是需要下載緩存的，點擊播放按鈕后，首先緩存，然后才播放的。那能不能在頁面加載的同時就緩存呢。這樣，用戶點擊播放后，就不必等待了。

這當然可以，在video標簽中，通過添加preload屬性來為視頻添加預加載功能，在頁面加載的同時加載視頻。

（此處略去500字…）

</video>

關于 preload 屬性，稍微再啰嗦一點，就是可以把它設置為 metadata，讓瀏覽器僅僅預加載視頻的基本信息，如尺寸、時長、以及一些關鍵的幀。這樣的話，在開始播放之前，瀏覽器可以提前計算視頻的顯示尺寸。

既然一切都OK了！讓我們看看mp4是不是能正常播放。下載最新版的Google Chrome 38.0瀏覽器，打開網頁，猛戳一下播放按鈕。

等等~，等等~，不對，怎么只有聲音沒有畫面，明明是mp4格式的文件呀？使用暴風影音試了一下，是有畫面的呀！

辛辛苦苦又在網上搜了一番，花了整整586秒，終于找到了答案。mp4視頻需要h.264編碼格式才會有圖像的。

找了一個 h.264 編碼格式的 mp4 試了一下，不錯，確實有圖像了！看了半天，原來是一部老外的電影，嘰里咕嚕一陣，一句話也沒聽懂。那O(∩_∩)O~，能否提供中文字幕呢，這樣就不必費老大勁去聽了！

HTML5中，通過在video元素添加track元素為視頻添加字幕。字幕文件有兩種格式：WebVTT和TTML。WebVTT是Web視頻文本軌跡（Web Video Text Track），是UTF-8編碼格式的文本文件；TTML是時序文本標記語言（Timed Text Markup Language），是XML格式的文件。兩種文件的具體格式，已經超出我們的討論范圍。

video元素支持添加多個track元素，不同的track元素鏈接到不同的字幕文件。用戶可以在各個字幕間進行切換。

</video>

track元素中，src屬性指定字幕文件的URL；srclang屬性字幕文件的語言類型，若kind 屬性值是 "subtitles" 時，該屬性必需的；label 屬性指定字幕標簽，每個字幕元素必需設置一個唯一不重復的標簽，切換字幕時，會顯示標簽的名稱；kind指定字幕內容類型，只能是subtitles、captions、descriptions、chapters、metadata 之一；default屬性指定是否是默認字幕，如果一個都沒指定，將不會自動顯示字幕。

除了字幕外，我還希望對視頻進行過多的控制，比如讓視頻自動播放、循環播放、默認靜音，以及視頻窗口的尺寸等等，這些都能做到嗎？

這已經不是什么事了，video 元素已經提供了相關屬性，根據需要設置相應的屬性就可以了。這些屬性及含義見表 23：

HTML中嵌入視頻和音頻代碼

哦，原來這么簡單呀！那就到此為止吧，網頁中嵌入視頻的全部代碼都在這里，就打包給你吧！

你的瀏覽器已經老掉牙了，不支持video，還不趕快使用現代瀏覽器O(∩_∩)O~！

</video>

睜大眼睛一看，卻只有7行代碼。然而，就這區區7行代碼，可把他折磨得夠嗆。

看著這一切都全部搞定，他仰望著天空，長長呼了一口氣，顯得是那么的放松，那么的愜意。此時，他閉上眼睛，在自己的夢幻世界里遨游！

二、音頻

有了在網頁中嵌入視頻的經歷，要在網頁中嵌入音頻，那簡直就是小菜一碟了。只要把vedio元素換成 audio 元素，就全部搞定。

但需要了解的是，audio 所支持的音頻格式只有Ogg Vorbis、mp3 和 wav。還要知道，由于音頻沒有畫面，也就沒有 width、height、poster 屬性，而其他屬性都支持，并且跟視頻的含義相同。

網頁中嵌入音頻的代碼如下：

你的瀏覽器已經老掉牙了，不支持audio，還不趕快使用現代瀏覽器O(∩_∩)O~！

</audio>

篇介紹了前端入門——html 中如何使用圖片,今天講下如何使用視頻和音頻等多媒體元素，它們能讓你的網頁更加豐富，讀者相對于文字圖片更愿意觀看視頻和音頻或其它多媒體。在本教程中，您將了解到不同的多媒體格式，以及如何在您的網頁中使用它們。

什么是多媒體？

是多種媒體的綜合，一般包括文本，聲音和圖像等多種媒體形式。在計算機系統中，多媒體指組合兩種或兩種以上媒體的一種人機交互式信息交流和傳播媒體。使用的媒體包括文字、圖片、照片、聲音、動畫和影片，以及程式所提供的互動功能。

在因特網上，您會經常發現嵌入網頁中的多媒體元素，現代瀏覽器已支持多種多媒體格式。

多媒體文件格式

多媒體元素（比如視頻和音頻）存儲于媒體文件中。多媒體元素也擁有帶有不同擴展名字的文件格式，比如 .swf、.wmv、.mp3 以及 .mp4。具體有哪些格式可以參考 w3cshool 網站的介紹，https://www.w3cschool.cn/html5/html5-video.html ，https://www.w3cschool.cn/html5/html5-audio.html。

HTML5 Video(視頻)

直到現在，網頁上仍然不存在一項顯示視頻的標準。今天，大多數視頻是通過插件（比如 Flash）來顯示的。然而，并非所有瀏覽器都擁有同樣的插件。HTML5 規定了一種通過 video 元素來包含視頻的標準方法。

語法如下：

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的瀏覽器不支持Video標簽。
</video>

<video> 元素提供了播放、暫停和音量控件來控制視頻。

同時 <video> 元素也提供了 width 和 height 屬性控制視頻的尺寸。如果設置的高度和寬度，所需的視頻空間會在頁面加載時保留。如果沒有設置這些屬性，瀏覽器不知道視頻的大小，瀏覽器就不能在加載時保留特定的空間，頁面就會根據原始視頻的大小而改變。

<video> 與 </video> 標簽之間插入的內容是提供給不支持 video 元素的瀏覽器顯示的。元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式。一個頁面可以使用多個<video> 標簽，<video> 元素支持三種視頻格式： MP4, WebM, 和 Ogg。

顯示效果：

HTML5Audio(音頻)

和視頻一樣沒有統一的標準，各個瀏覽器都不一樣。HTML5 規定了在網頁上嵌入音頻元素的標準，即使用 <audio> 元素。通過使用HTML5中的audio功能，你可以實現與flash相同的功能，即回放、跳轉、緩沖等。

語法如下：

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  您的瀏覽器不支持 audio 元素。
</audio>

control 屬性供添加播放、暫停和音量控件。在<audio> 與 </audio> 之間你需要插入瀏覽器不支持的<audio>元素的提示文本。允許使用多個 <source> 元素。<source> 元素可以鏈接不同的音頻文件，瀏覽器將使用第一個支持的音頻文件。目前, <audio>元素支持三種音頻格式文件: MP3, Wav, 和 Ogg。

顯示效果：

HTML 插件——輔助應用程序

插件（Plug-in）是擴展瀏覽器標準功能的計算機程序，插件被設計用于許多不同的目的：

運行 Java 小程序
運行 ActiveX 控件
顯示 Flash 電影
顯示視頻或音頻
顯示地圖
掃描病毒
驗證銀行賬號

1、<object> 元素

它旨在將插件（例如 Java applet、PDF 閱讀器和 Flash 播放器）嵌入網頁中，但也可以用于將 HTML 包含在 HTML 中。

如下：

插入一個網頁片段

<object width="100%" height="500px" data="snippet.html"></object>

或者插入一個圖片

<object data="audi.jpeg"></object>

播放一個視頻

<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="movie.mp4">
<param name="controller" value="true">
</object>

播放一個音頻

<object height="100" width="100" data="song.mp3"></object>

2、<embed> 元素

插入一個flash文件

<embed width="400" height="50" src="bookmark.swf">

插入html片段

<embed width="100%" height="500px" src="snippet.html">

播放一個音頻

<embed height="100" width="100" src="song.mp3" />

插入一個圖片

<embed src="audi.jpeg">

注意：
大多數瀏覽器不再支持 Java 小程序和插件。
大多數現代瀏覽器關閉了對 Flash 的支持。
我們可以使用 <video> 和 <audio> 標簽來顯示視頻和音頻

視頻和音頻如何兼容大多瀏覽器

如下視頻代碼，HTML 5 <video> 元素會嘗試播放以 mp4、ogg 或 webm 格式中的一種來播放視頻。如果均失敗，則回退到 <embed> 元素。

HTML 5 + <object> + <embed> 是最好的解決辦法。

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

如下音頻代碼，HTML5 <audio> 元素會嘗試以 mp3 或 ogg 來播放音頻。如果失敗，代碼將回退嘗試 <embed> 元素。

HTML 5 + <embed> 是最好的解決辦法。

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
  <embed height="100" width="100" src="song.mp3" />
</audio>

到此你以及了解了如何在網頁中使用視頻音頻及其它多媒體控件，趕快自己試試，祝你學習愉快。

參考文獻：https://www.w3school.com.cn/html/html_video.asp

上篇：前端入門——html 中如何使用圖片

下篇：前端入門——html 表格的使用

、需求

使用 webrtc 協議做直播，常見的音視頻源是攝像頭和麥克風，高級一點的就是桌面分享。雖然使用桌面分享可以實現推送本地流（原理就是對屏幕錄制），但依賴本地播放器，并且觀眾可以看到主播的任何操作。

有一種偽直播需求，需要將本地視頻無感知推送給用戶，讓用戶感覺就像直播一樣。

使用webrtc協議，大多數情況是在瀏覽器中做主播端。眾所周知，出于安全和隱私的原因，Web 應用程序不能直接訪問用戶設備上的文件。那么如何將本地視頻源進行加載到瀏覽器并推送出去呢？

二、核心API

HTMLCanvasElement.captureStream()

該方法返回一個CanvasCaptureMediaStream實時視頻捕獲的畫布。

使用例子：

//獲取所需要截取媒體流的canvas element
var canvasElt = document.querySelector('canvas'); // 或者 video 標簽

//截取到媒體流
var stream = canvasElt.captureStream(25); // 25 FPS

//使用媒體流
// E.g.使用RTCPeerConnection來傳輸給其它的電腦
// 下面的pc是其他地方創建的一個RTCPeerConnection
pc.addStream(stream);

通過以上例子，是不是恍然大霧。

此時我們的方案可以是：

上傳一段視頻到服務器或者云存儲
使用 video 標簽加載視頻
使用 captureStream 捕獲視頻流
使用 addStream 將視頻流發布

此時解決了推送視頻流，但是要推送本地視頻怎么做呢？

相關學習資料推薦，點擊下方鏈接免費報名，先碼住不迷路~】

音視頻免費學習地址：FFmpeg/WebRTC/RTMP/NDK/Android音視頻流媒體高級開發

【免費分享】音視頻學習資料包、大廠面試題、技術視頻和學習路線圖，資料包括（C/C++，Linux，FFmpeg webRTC rtmp hls rtsp ffplay srs 等等）有需要的可以點擊788280672加群免費領取~

三、最終解決方案

出于安全和隱私的原因，Web 應用程序不能直接訪問用戶設備上的文件。如果需要讀取一個或多個本地文件，可以通過使用 input file 和 FileReader 來實現。雖然 FileReader 可以讀文件，但是需要經過base-64編碼，如果讀大文件肯定會影響效率。所以我們只能考慮 input file，可以使用 URL.createObjectURL 對視頻進行預覽。

那么我的最終方案就是使用 captureStream + input file預覽 模式來解決這個問題。

簡要代碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
    <video width="500" controls>
        <source src="my_video.mp4" id="video_here">
    </video>
    <input type="file" name="file[]" class="file_video" accept="video/*">
    <script>
        $(document).on("change", ".file_video", function (evt) {
            var $source = $('#video_here');
            $source[0].src = URL.createObjectURL(this.files[0]);
            $source.parent()[0].load();
        })
    </script>
</body>

</html>

四、總結

通過以上步驟，我們可以總結如下步驟：

使用 input 標簽進行文件選擇
使用 video標簽配合 input標簽進行視頻預覽
使用 captureStream 捕獲視頻流
使用 addStream 將視頻流發布

原文 https://zhuanlan.zhihu.com/p/291399800

在線咨詢

上一篇：手把手教小白入門網絡安全：代碼基礎-HTML的基本語法和結構
下一篇：程序員浪漫起來沒文科生什么事：HTML制作表白愛心-無需編程基礎

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML中嵌入視頻和音頻代碼

一、視頻

二、音頻

什么是多媒體？

多媒體文件格式

HTML5 Video(視頻)

HTML5Audio(音頻)

HTML 插件——輔助應用程序

視頻和音頻如何兼容大多瀏覽器

、需求

二、核心API

三、最終解決方案

四、總結

您的項目需求