WebRTC實現瀏覽器上的音視頻通信

述

WebRTC (Web Real-Time Communications) 是一項實時通訊技術，它允許網絡應用或者站點，在不借助中間媒介的情況下，建立瀏覽器之間點對點（Peer-to-Peer）的連接，實現視頻流和（或）音頻流或者其他任意數據的傳輸。WebRTC包含的這些標準使用戶在無需安裝任何插件或者第三方的軟件的情況下，創建點對點（Peer-to-Peer）的數據分享和電話會議成為可能。

webRTC協議介紹

ice

交互式連接機構（ICE）是一個框架，允許您的網絡瀏覽器與同行連接。有許多原因，為什么從對等A到同行B的直升連接將不起作用。它需要繞過防火墻，防止打開連接，給您一個獨特的地址，如果像大多數情況下，您的設備沒有公共 IP 地址，并通過服務器中繼數據，如果你的路由器不允許您直接與對等連接。ICE 使用 STUN 和/或 TURN 服務器來實現此目的，如下所述。

STUN

NAT 的會話橫向公用設施（STUN）是一個協議，以發現您的公共地址，并確定任何限制，在你的路由器，將阻止與同行的直接連接。

客戶端將向 Internet 上的 STUN 服務器發送請求，該服務器將回復客戶的公共地址，以及路由器 NAT 后面是否訪問客戶端。

NAT

網絡地址翻譯（NAT）用于為您的設備提供公共 IP 地址。路由器將具有公共 IP 地址，連接到路由器的每個設備都將有一個私有 IP 地址。請求將從設備的私有 IP 轉換為路由器的公共 IP，并具有獨特的端口。這樣，您不需要每個設備都有獨特的公共 IP，但仍可以在互聯網上發現。

某些路由器將限制誰可以連接到網絡上的設備。這可能意味著，即使我們有 STUN 服務器找到的公共 IP 地址，也沒有人能夠創建連接。在這種情況下，我們需要轉向轉向。

TURN

一些使用 NAT 的路由器采用一種稱為"對稱 NAT"的限制。這意味著路由器將只接受您以前連接過的對等的連接。

使用 NAT 周圍的中繼進行橫向（轉）旨在通過打開與 TURN 服務器的連接并通過該服務器中繼所有信息來繞過對稱 NAT 限制。您將創建與 TURN 服務器的連接，并告訴所有對應方將數據包發送到服務器，然后轉發給服務器。這顯然伴隨著一些開銷，所以它只使用，如果沒有其他選擇。

SDP

會話描述協議（SDP）是描述連接的多媒體內容的標準，如分辨率、格式、編解碼器、加密等，以便在數據傳輸時兩個對等可以相互理解。這在本質上是描述內容而不是媒體內容本身的元數據。

因此，從技術上講，SDP 并不是真正的協議，而是用于描述設備之間共享介質連接的數據格式。

記錄 SDP 遠遠超出了此文檔的范圍;然而，這里有一些值得注意的事情。

webRTC API

WebRTC主要讓瀏覽器具備三個作用。

獲取音頻和視頻
進行音頻和視頻通信
進行任意數據的通信

WebRTC共分成三個API，分別對應上面三個作用。

MediaStream （又稱getUserMedia）
RTCPeerConnection
RTCDataChannel

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

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

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

getUserMedia

概述

navigator.getUserMedia方法目前主要用于，在瀏覽器中獲取音頻（通過麥克風）和視頻（通過攝像頭），將來可以用于獲取任意數據流，比如光盤和傳感器。

下面的代碼用于檢查瀏覽器是否支持getUserMedia方法。

navigator.getUserMedia  = navigator.getUserMedia ||
                          navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia ||
                          navigator.msGetUserMedia;

if (navigator.getUserMedia) {
    // 支持
} else {
    // 不支持
}

Chrome 21, Opera 18和Firefox 17，支持該方法。目前，IE還不支持，上面代碼中的msGetUserMedia，只是為了確保將來的兼容。

getUserMedia方法接受三個參數。

navigator.getUserMedia({
    video: true, 
    audio: true
}, onSuccess, onError);

getUserMedia的第一個參數是一個對象，表示要獲取哪些多媒體設備，上面的代碼表示獲取攝像頭和麥克風;onSuccess是一個回調函數，在獲取多媒體設備成功時調用；onError也是一個回調函數，在取多媒體設備失敗時調用。

下面是一個例子。

var constraints = {video: true};

function onSuccess(stream) {
  var video = document.querySelector("video");
  video.src = window.URL.createObjectURL(stream);
}

function onError(error) {
  console.log("navigator.getUserMedia error: ", error);
}

navigator.getUserMedia(constraints, onSuccess, onError);

如果網頁使用了getUserMedia方法，瀏覽器就會詢問用戶，是否同意瀏覽器調用麥克風或攝像頭。如果用戶同意，就調用回調函數onSuccess；如果用戶拒絕，就調用回調函數onError。

onSuccess回調函數的參數是一個數據流對象stream。stream.getAudioTracks方法和stream.getVideoTracks方法，分別返回一個數組，其成員是數據流包含的音軌和視軌（track）。使用的聲音源和攝影頭的數量，決定音軌和視軌的數量。比如，如果只使用一個攝像頭獲取視頻，且不獲取音頻，那么視軌的數量為1，音軌的數量為0。每個音軌和視軌，有一個kind屬性，表示種類（video或者audio），和一個label屬性（比如FaceTime HD Camera (Built-in)）。

onError回調函數接受一個Error對象作為參數。Error對象的code屬性有如下取值，說明錯誤的類型。

PERMISSION_DENIED：用戶拒絕提供信息。
NOT_SUPPORTED_ERROR：瀏覽器不支持硬件設備。
MANDATORY_UNSATISFIED_ERROR：無法發現指定的硬件設備。

范例：獲取攝像頭

下面通過getUserMedia方法，將攝像頭拍攝的圖像展示在網頁上。

首先，需要先在網頁上放置一個video元素。圖像就展示在這個元素中。

<video id="webcam"></video>

然后，用代碼獲取這個元素。

function onSuccess(stream) {
    var video = document.getElementById('webcam');
}

接著，將這個元素的src屬性綁定數據流，攝影頭拍攝的圖像就可以顯示了。

function onSuccess(stream) {
    var video = document.getElementById('webcam');
    if (window.URL) {
	    video.src = window.URL.createObjectURL(stream);
	} else {
		video.src = stream;
	}

	video.autoplay = true; 
	// 或者 video.play();
}

if (navigator.getUserMedia) {
	navigator.getUserMedia({video:true}, onSuccess);
} else {
	document.getElementById('webcam').src = 'somevideo.mp4';
}

在Chrome和Opera中，URL.createObjectURL方法將媒體數據流（MediaStream）轉為一個二進制對象的URL（Blob URL），該URL可以作為video元素的src屬性的值。在Firefox中，媒體數據流可以直接作為src屬性的值。Chrome和Opera還允許getUserMedia獲取的音頻數據，直接作為audio或者video元素的值，也就是說如果還獲取了音頻，上面代碼播放出來的視頻是有聲音的。

獲取攝像頭的主要用途之一，是讓用戶使用攝影頭為自己拍照。Canvas API有一個ctx.drawImage(video, 0, 0)方法，可以將視頻的一個幀轉為canvas元素。這使得截屏變得非常容易。

<video autoplay></video>
<img src="">
<canvas style="display:none;"></canvas>

<script>
  var video = document.querySelector('video');
  var canvas = document.querySelector('canvas');
  var ctx = canvas.getContext('2d');
  var localMediaStream = null;

  function snapshot() {
    if (localMediaStream) {
      ctx.drawImage(video, 0, 0);
      // “image/webp”對Chrome有效，
      // 其他瀏覽器自動降為image/png
      document.querySelector('img').src = canvas.toDataURL('image/webp');
    }
  }

  video.addEventListener('click', snapshot, false);

  navigator.getUserMedia({video: true}, function(stream) {
    video.src = window.URL.createObjectURL(stream);
    localMediaStream = stream;
  }, errorCallback);
</script>

范例：捕獲麥克風聲音

通過瀏覽器捕獲聲音，需要借助Web Audio API。

window.AudioContext = window.AudioContext ||
                      window.webkitAudioContext;

var context = new AudioContext();

function onSuccess(stream) {
	var audioInput = context.createMediaStreamSource(stream);
	audioInput.connect(context.destination);
}

navigator.getUserMedia({audio:true}, onSuccess);

捕獲的限定條件

getUserMedia方法的第一個參數，除了指定捕獲對象之外，還可以指定一些限制條件，比如限定只能錄制高清（或者VGA標準）的視頻。

var hdConstraints = {
  video: {
    mandatory: {
      minWidth: 1280,
      minHeight: 720
    }
  }
};

navigator.getUserMedia(hdConstraints, onSuccess, onError);

var vgaConstraints = {
  video: {
    mandatory: {
      maxWidth: 640,
      maxHeight: 360
    }
  }
};

navigator.getUserMedia(vgaConstraints, onSuccess, onError);

MediaStreamTrack.getSources()

如果本機有多個攝像頭/麥克風，這時就需要使用MediaStreamTrack.getSources方法指定，到底使用哪一個攝像頭/麥克風。

MediaStreamTrack.getSources(function(sourceInfos) {
  var audioSource = null;
  var videoSource = null;

  for (var i = 0; i != sourceInfos.length; ++i) {
    var sourceInfo = sourceInfos[i];
    if (sourceInfo.kind === 'audio') {
      console.log(sourceInfo.id, sourceInfo.label || 'microphone');

      audioSource = sourceInfo.id;
    } else if (sourceInfo.kind === 'video') {
      console.log(sourceInfo.id, sourceInfo.label || 'camera');

      videoSource = sourceInfo.id;
    } else {
      console.log('Some other kind of source: ', sourceInfo);
    }
  }

  sourceSelected(audioSource, videoSource);
});

function sourceSelected(audioSource, videoSource) {
  var constraints = {
    audio: {
      optional: [{sourceId: audioSource}]
    },
    video: {
      optional: [{sourceId: videoSource}]
    }
  };

  navigator.getUserMedia(constraints, onSuccess, onError);
}

上面代碼表示，MediaStreamTrack.getSources方法的回調函數，可以得到一個本機的攝像頭和麥克風的列表，然后指定使用最后一個攝像頭和麥克風。

RTCPeerConnectionl，RTCDataChannel

RTCPeerConnectionl

RTCPeerConnection的作用是在瀏覽器之間建立數據的“點對點”（peer to peer）通信，也就是將瀏覽器獲取的麥克風或攝像頭數據，傳播給另一個瀏覽器。這里面包含了很多復雜的工作，比如信號處理、多媒體編碼/解碼、點對點通信、數據安全、帶寬管理等等。

不同客戶端之間的音頻/視頻傳遞，是不用通過服務器的。但是，兩個客戶端之間建立聯系，需要通過服務器。服務器主要轉遞兩種數據。

通信內容的元數據：打開/關閉對話（session）的命令、媒體文件的元數據（編碼格式、媒體類型和帶寬）等。
網絡通信的元數據：IP地址、NAT網絡地址翻譯和防火墻等。

WebRTC協議沒有規定與服務器的通信方式，因此可以采用各種方式，比如WebSocket。通過服務器，兩個客戶端按照Session Description Protocol（SDP協議）交換雙方的元數據。

下面是一個示例。

var signalingChannel = createSignalingChannel();
var pc;
var configuration = ...;

// run start(true) to initiate a call
function start(isCaller) {
    pc = new RTCPeerConnection(configuration);

    // send any ice candidates to the other peer
    pc.onicecandidate = function (evt) {
        signalingChannel.send(JSON.stringify({ "candidate": evt.candidate }));
    };

    // once remote stream arrives, show it in the remote video element
    pc.onaddstream = function (evt) {
        remoteView.src = URL.createObjectURL(evt.stream);
    };

    // get the local stream, show it in the local video element and send it
    navigator.getUserMedia({ "audio": true, "video": true }, function (stream) {
        selfView.src = URL.createObjectURL(stream);
        pc.addStream(stream);

        if (isCaller)
            pc.createOffer(gotDescription);
        else
            pc.createAnswer(pc.remoteDescription, gotDescription);

        function gotDescription(desc) {
            pc.setLocalDescription(desc);
            signalingChannel.send(JSON.stringify({ "sdp": desc }));
        }
    });
}

signalingChannel.onmessage = function (evt) {
    if (!pc)
        start(false);

    var signal = JSON.parse(evt.data);
    if (signal.sdp)
        pc.setRemoteDescription(new RTCSessionDescription(signal.sdp));
    else
        pc.addIceCandidate(new RTCIceCandidate(signal.candidate));
};

RTCPeerConnection帶有瀏覽器前綴，Chrome瀏覽器中為webkitRTCPeerConnection，Firefox瀏覽器中為

mozRTCPeerConnection。Google維護一個函數庫adapter.js，用來抽象掉瀏覽器之間的差異。

RTCDataChannel

RTCDataChannel的作用是在點對點之間，傳播任意數據。它的API與WebSockets的API相同。

下面是一個示例。

var pc = new webkitRTCPeerConnection(servers,
  {optional: [{RtpDataChannels: true}]});

pc.ondatachannel = function(event) {
  receiveChannel = event.channel;
  receiveChannel.onmessage = function(event){
    document.querySelector("div#receive").innerHTML = event.data;
  };
};

sendChannel = pc.createDataChannel("sendDataChannel", {reliable: false});

document.querySelector("button#send").onclick = function (){
  var data = document.querySelector("textarea#send").value;
  sendChannel.send(data);
};

Chrome 25、Opera 18和Firefox 22支持RTCDataChannel。

外部函數庫

由于這兩個API比較復雜，一般采用外部函數庫進行操作。目前，視頻聊天的函數庫有SimpleWebRTC、easyRTC、webRTC.io，點對點通信的函數庫有PeerJS、Sharefest。

下面是SimpleWebRTC的示例。

var webrtc = new WebRTC({
  localVideoEl: 'localVideo',
  remoteVideosEl: 'remoteVideos',
  autoRequestMedia: true
});

webrtc.on('readyToCall', function () {
    webrtc.joinRoom('My room name');
});

下面是PeerJS的示例。

var peer = new Peer('someid', {key: 'apikey'});
peer.on('connection', function(conn) {
  conn.on('data', function(data){
    // Will print 'hi!'
    console.log(data);
  });
});

// Connecting peer
var peer = new Peer('anotherid', {key: 'apikey'});
var conn = peer.connect('someid');
conn.on('open', function(){
  conn.send('hi!');
});

原文 WebRTC實現瀏覽器上的音視頻通信 - 掘金

時的工作中常會遇到一些系統集成的需求，需要在軟件平臺集成視頻監控系統。而軟件開發者往往不懂安防弱電系統，不知道如何在自己的軟件界面中集成一些監控的實時畫面。而監控廠家提供的SDK比較復雜，很難在短時間完成集成的任務。最終導致軟件平臺的一些功能無法實現，影響項目的質量。

本文提供的方法主要基于VLC播放器的ActiveX插件，通過這個插件，在網頁中調用攝像機的RTSP流，實現圖像的實時預覽，音頻的監聽等等功能。文章以海康的IP網絡攝像機為例給出具體的調用方法，供大家學習參照。

VLC軟件下載

登錄VLC官網 https://www.videolan.org/，選擇windows（32位）版本下載。

下載VLC軟件

VLC軟件安裝（務必勾選插件）

運行安裝文件

選擇軟件安裝位置

一定記得要勾選網頁瀏覽器插件

完成安裝

網頁編輯

可選用記事本（notepad）或專業的編輯器，輸入如下代碼，保存為html網頁文件。

<html>
<body>

<title>TESTVDEIO-1-TEST</title>
<head>
<table>
            <tbody>
            <caption>視頻監控演示</caption>
        <tr>
            <td>
            <object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
    <param name='mrl' value='rtsp://admin:q66668888@172.16.200.88:554/h264/ch1/main/av_stream' />
    <param name='volume' value='50' />
    <param name='autoplay' value='true' />
    <param name='loop' value='false' />
    <param name='fullscreen' value='false' />
    <param name='controls' value='false' />
            </td>
            <td>
            <object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
    <param name='mrl' value='rtsp://admin:q66668888@172.16.200.89:554/h264/ch1/main/av_stream' />
    <param name='volume' value='50' />
    <param name='autoplay' value='true' />
    <param name='loop' value='false' />
    <param name='fullscreen' value='false' />
    <param name='controls' value='false' />
            </td>
        </tr>
         <tr>
            <td>
            <object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
    <param name='mrl' value='rtsp://admin:q66668888@172.16.200.89:554/h264/ch1/main/av_stream' />
    <param name='volume' value='50' />
    <param name='autoplay' value='true' />
    <param name='loop' value='false' />
    <param name='fullscreen' value='false' />
    <param name='controls' value='false' />
            </td>
            <td>
            <object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
    <param name='mrl' value='rtsp://admin:q66668888@172.16.200.88:554/h264/ch1/main/av_stream' />
    <param name='volume' value='50' />
    <param name='autoplay' value='true' />
    <param name='loop' value='false' />
    <param name='fullscreen' value='false' />
    <param name='controls' value='false' />
            </td>
        </tr>
    </tbody>
</table>
            </object>
</body>
</html>

代碼編輯截圖

海康威視RTSP調用格式

具體請參看海康專業文檔

瀏覽器測試

先用Google Chrome瀏覽器測試，提示插件不支持。

Chrome瀏覽器提示插件不受支持

用微軟IE測試，需要安裝插件。

IE瀏覽器提示要安裝ActiveX插件

確認安裝插件

瀏覽器只顯示了第一個畫面。

IE瀏覽器顯示不完整

用編輯器測試，2種內核都能正常顯示。

編輯器里測試效果

改用360瀏覽器，呈現2X2的畫面，實現最終的顯示效果。

360瀏覽器顯示的最終效果圖

結語

本文參考了一些專業文章，就不一一列出了，在這一并謝過！

由于本人水平有限，有不對的地方敬請指正。文章旨在拋磚引玉，通過討論，相互學習，共同進步。

我是WoNew弱電蝸牛，一名從業多年的弱電工程師，在頭條傳播弱電專業知識和行業信息，分享工作中的經驗和心得。
喜歡我的文章或視頻，歡迎點贊和轉發。有疑問或建議，也歡迎留言，我會盡力解答。

篇介紹了前端入門——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 表格的使用

在線咨詢

上一篇：超贊 vue2/3 可視化打印設計VuePluginPrint
下一篇：HTML常用代碼有哪些？

您的項目需求

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

整合營銷服務商