HTML5視頻教程-相對路徑與絕對路徑

繼續(xù)分享千鋒好程序員HTML5基礎(chǔ)視頻教程，本節(jié)課程內(nèi)容為HTML&CSS基礎(chǔ)中相對路徑與絕對路徑，以下為詳細(xì)視頻內(nèi)容，更多免費(fèi)課程大家可以關(guān)注千鋒好程序員官方技術(shù)論壇，直接下載學(xué)習(xí)！

在很多網(wǎng)站上都會(huì)使用到視頻和音頻，HTML5 中提供了展示視頻和音頻的標(biāo)簽。向網(wǎng)頁嵌入視頻可以使用 <video> 標(biāo)簽，而嵌入音頻可以使用 <audio> 標(biāo)簽。這兩個(gè)標(biāo)簽都是 HTML 5 中新增的標(biāo)簽，兩個(gè)標(biāo)簽中的屬性和方法也很類似，但也有些不同。其中 audio 元素用于定義聲音，比如音樂， video 元素用于定義視頻，如電影等。

向網(wǎng)頁中嵌入視頻

<video> 標(biāo)簽可以用于定義視頻，且提供了播放、暫停、音量控件來控制視頻。舉個(gè)例子，像我們俠課島網(wǎng)站上，課程視頻播放，就是通過 <video> 標(biāo)簽來實(shí)現(xiàn)的。下面我們來看一下如何向網(wǎng)頁中嵌入一個(gè)視頻。

示例：

首先我們準(zhǔn)備一個(gè)視頻，例如一個(gè) test.mp4，然后使用 <video> 標(biāo)簽嵌入視頻，如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5學(xué)習(xí)(9xkd.com)</title>
    </head>
    <body>
        <video src="./test.mp4" controls="controls" width="700px" height="400px"></video>
    </body>
</html>

在瀏覽器中的預(yù)覽效果：

從上圖中可以看到，我們通過 <video> 標(biāo)簽成功向網(wǎng)頁中插入了一個(gè)視頻，其中 src 屬性用于引入要播放的視頻的 URL，注意視頻地址一定要正確，如果地址錯(cuò)誤，視頻是不能顯示的。然后我們通過 width、height 屬性設(shè)置了視頻的寬度為 700px ，高度為 400px。

然后可以看到，視頻上還顯示了播放、調(diào)整音量等控件，當(dāng)我們點(diǎn)擊播放按鈕時(shí)，視頻就會(huì)開始播放。這是因?yàn)槲覀冊O(shè)置了 controls 屬性，如果我們沒有設(shè)置這個(gè)屬性，視頻將會(huì)顯示一個(gè)靜止的畫面，并且不管怎么點(diǎn)擊都是沒有反應(yīng)的。大家可以試一下，不設(shè)置 controls 屬性然后在瀏覽器中查看演示效果，這里就不演示給大家看了。

video 元素中的常用屬性如下所示：

有些比較老的瀏覽器可能不支持 <video> 標(biāo)簽，例如 IE8 及以下的瀏覽器就不支持，而 IE9+、Firefox、Opera、Chrome、Safari 等瀏覽器都支持 <video> 標(biāo)簽。

所以我們可以在 <video> 標(biāo)簽中放置文本內(nèi)容，這樣當(dāng)某個(gè)瀏覽器不支持此標(biāo)簽時(shí)，就可以顯示提示內(nèi)容：

<video src="./test.mp4" controls="controls" width="700px" height="400px">
    您的瀏覽器不支持 video 標(biāo)簽
</video>

這樣用戶就會(huì)知道，是因?yàn)闉g覽器不支持所以加載視頻不成功，可以換一個(gè)瀏覽器。

視頻的格式

像我們平時(shí)看到的視頻格式有很多種，例如常見的有 mp4、AVI、mov、rmvb、Ogg 等等，目前 video 元素支持的視頻格式有下面三種：

這三種視頻格式，在不同的瀏覽器中兼容性不同，例如 MP4 格式不支持 Firefox 和 Opera 瀏覽器，Ogg 格式不支持IE、Safari 瀏覽器，WebM 格式不支持IE、Safari 瀏覽器等。

所以我們可能需要在不同的瀏覽器中使用不同的視頻格式，這需要用到 <source> 標(biāo)簽。

source標(biāo)簽

<source> 標(biāo)簽可以為媒體元素定義媒介資源，例如 video 和 audio 元素。

例如 <video> 標(biāo)簽中可以包含多個(gè) <source> 標(biāo)簽，<source> 標(biāo)簽可以鏈接不同的視頻文件，瀏覽器將使用第一個(gè)可識(shí)別的格式。

示例：

例如我們插入的視頻播放器，帶有兩個(gè)源文件，瀏覽器會(huì)根據(jù)需要來選擇源文件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5學(xué)習(xí)(9xkd.com)</title>
    </head>
    <body>
        <video controls="controls" width="700px" height="400px">
            <source src="./test.mp4" type="video/mp4">
            <source src="./test.ogg" type="video/ogg">
            您的瀏覽器不支持 video 標(biāo)簽
        </video>
    </body>
</html>

像上述代碼中，如果是 Safari 瀏覽器就會(huì)選擇第一個(gè)源文件，如果是 Firefox 瀏覽器則會(huì)選擇第二個(gè)源文件。

<source> 標(biāo)簽有三個(gè)屬性：

向網(wǎng)頁中嵌入音頻

向網(wǎng)頁中嵌入音頻可以使用 <audio> 標(biāo)簽，此標(biāo)簽的使用和 <video> 標(biāo)簽類似。插入視頻是有畫面的，我們也可以調(diào)整視頻的寬和高等，而插入音頻是沒有畫面的。

audio 元素支持的格式和 video 元素也有一點(diǎn)區(qū)別：

示例：

例如我們插入一段音頻，在瀏覽器中可以看到，是沒有畫面的，只有聲音：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5學(xué)習(xí)(9xkd.com)</title>
    </head>
    <body>
        <audio controls="controls">
            <source src="./test.mp4" type="audio/mpeg">
            <source src="./test.ogg" type="audio/ogg">
            您的瀏覽器不支持 audio 標(biāo)簽
        </audio>
    </body>
</html>

在瀏覽器中的演示效果：

向網(wǎng)頁中嵌入音頻時(shí)，也可以通過 <source> 標(biāo)簽來指定兩個(gè)源文件，<source> 標(biāo)簽允許規(guī)定兩個(gè)視頻或者音頻文件供瀏覽器根據(jù)它對媒體類型或者編解碼器的支持進(jìn)行選擇。

audio 元素中的常用屬性和 video 元素差不多，但是 audio 元素中沒有 width、height 等屬性。

常用屬性如下所示：

總結(jié)

向網(wǎng)頁中嵌入視頻和音頻其實(shí)很簡單，要注意 video 元素和 audio 元素支持的視頻、音頻格式類型，如果插入的視頻格式不支持，則視頻或音頻不會(huì)顯示。

更多可以查看鏈接：https://www.9xkd.com/

言

前不久抽空對目前比較火的視頻直播，做了下研究與探索，了解其整體實(shí)現(xiàn)流程，以及探討移動(dòng)端HTML5直播可行性方案。

發(fā)現(xiàn)目前 WEB 上主流的視頻直播方案有 HLS 和 RTMP，移動(dòng) WEB 端目前以 HLS 為主（HLS存在延遲性問題，也可以借助 video.js 采用RTMP），PC端則以 RTMP 為主實(shí)時(shí)性較好，接下來將圍繞這兩種視頻流協(xié)議來展開H5直播主題分享。

一、視頻流協(xié)議HLS與RTMP

1. HTTP Live Streaming

HTTP Live Streaming（簡稱 HLS）是一個(gè)基于 HTTP 的視頻流協(xié)議，由 Apple 公司實(shí)現(xiàn)，Mac OS 上的 QuickTime、Safari 以及 iOS 上的 Safari 都能很好的支持 HLS，高版本 Android 也增加了對 HLS 的支持。一些常見的客戶端如：MPlayerX、VLC 也都支持 HLS 協(xié)議。

HLS 協(xié)議基于 HTTP，而一個(gè)提供 HLS 的服務(wù)器需要做兩件事：

編碼：以 H.263 格式對圖像進(jìn)行編碼，以 MP3 或者 HE-AAC 對聲音進(jìn)行編碼，最終打包到 MPEG-2 TS（Transport Stream）容器之中；分割：把編碼好的 TS 文件等長切分成后綴為 ts 的小文件，并生成一個(gè) .m3u8 的純文本索引文件；瀏覽器使用的是 m3u8 文件。m3u8 跟音頻列表格式 m3u 很像，可以簡單的認(rèn)為 m3u8 就是包含多個(gè) ts 文件的播放列表。播放器按順序逐個(gè)播放，全部放完再請求一下 m3u8 文件，獲得包含最新 ts 文件的播放列表繼續(xù)播，周而復(fù)始。整個(gè)直播過程就是依靠一個(gè)不斷更新的 m3u8 和一堆小的 ts 文件組成，m3u8 必須動(dòng)態(tài)更新，ts 可以走 CDN。一個(gè)典型的 m3u8 文件格式如下：

#EXTM3U
#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=200000
gear1/prog_index.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=311111
gear2/prog_index.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=484444
gear3/prog_index.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=737777
gear4/prog_index.m3u8

可以看到 HLS 協(xié)議本質(zhì)還是一個(gè)個(gè)的 HTTP 請求 / 響應(yīng)，所以適應(yīng)性很好，不會(huì)受到防火墻影響。但它也有一個(gè)致命的弱點(diǎn)：延遲現(xiàn)象非常明顯。如果每個(gè) ts 按照 5 秒來切分，一個(gè) m3u8 放 6 個(gè) ts 索引，那么至少就會(huì)帶來 30 秒的延遲。如果減少每個(gè) ts 的長度，減少 m3u8 中的索引數(shù)，延時(shí)確實(shí)會(huì)減少，但會(huì)帶來更頻繁的緩沖，對服務(wù)端的請求壓力也會(huì)成倍增加。所以只能根據(jù)實(shí)際情況找到一個(gè)折中的點(diǎn)。

對于支持 HLS 的瀏覽器來說，直接這樣寫就能播放了：

<video src=”./bipbopall.m3u8″ height=”300″ width=”400″  preload=”auto” autoplay=”autoplay” loop=”loop” webkit-playsinline=”true”></video>

注意：HLS 在 PC 端僅支持safari瀏覽器，類似chrome瀏覽器使用HTML5 video

標(biāo)簽無法播放 m3u8 格式，可直接采用網(wǎng)上一些比較成熟的方案，如：sewise-player、MediaElement、videojs-contrib-hls、jwplayer。

程序猿的生活：web前端全棧資料粉絲福利（面試題、視頻、資料筆記，進(jìn)階路線）zhuanlan.zhihu.com/p/136454207

2. Real Time Messaging Protocol

Real Time Messaging Protocol（簡稱 RTMP）是 Macromedia 開發(fā)的一套視頻直播協(xié)議，現(xiàn)在屬于 Adobe。這套方案需要搭建專門的 RTMP 流媒體服務(wù)如 Adobe Media Server，并且在瀏覽器中只能使用 Flash 實(shí)現(xiàn)播放器。它的實(shí)時(shí)性非常好，延遲很小，但無法支持移動(dòng)端 WEB 播放是它的硬傷。

雖然無法在iOS的H5頁面播放，但是對于iOS原生應(yīng)用是可以自己寫解碼去解析的, RTMP 延遲低、實(shí)時(shí)性較好。瀏覽器端，HTML5 video

標(biāo)簽無法播放 RTMP 協(xié)議的視頻，可以通過 video.js 來實(shí)現(xiàn)。

<link href=“http://vjs.zencdn.net/5.8.8/video-js.css” rel=“stylesheet”>
<video id=“example_video_1″ class=“video-js vjs-default-skin” controls preload=“auto” width=“640” height=“264” loop=“l(fā)oop” webkit-playsinline>
<source src=“rtmp://10.14.221.17:1935/rtmplive/home” type=‘rtmp/flv’>
</video>
<script src=“http://vjs.zencdn.net/5.8.8/video.js”></script>
<script>
videojs.options.flash.swf=‘video.swf’;
videojs(‘example_video_1′).ready(function() {
this.play();
});
</script>

3. 視頻流協(xié)議HLS與RTMP對比

二、直播形式

目前直播展示形式，通常以YY直播、映客直播這種頁面居多，可以看到其結(jié)構(gòu)可以分成三層：

① 背景視頻層

② 關(guān)注、評論模塊

③ 點(diǎn)贊動(dòng)畫

而現(xiàn)行H5類似直播頁面，實(shí)現(xiàn)技術(shù)難點(diǎn)不大，其可以通過實(shí)現(xiàn)方式分為：

① 底部視頻背景使用video視頻標(biāo)簽實(shí)現(xiàn)播放

② 關(guān)注、評論模塊利用 WebScoket 來實(shí)時(shí)發(fā)送和接收新的消息通過DOM 和 CSS3 實(shí)現(xiàn)

③ 點(diǎn)贊利用 CSS3 動(dòng)畫

了解完直播形式之后，接下來整體了解直播流程。

相關(guān)學(xué)習(xí)資料推薦，點(diǎn)擊下方鏈接免費(fèi)報(bào)名，先碼住不迷路~】

音視頻免費(fèi)學(xué)習(xí)地址：FFmpeg/WebRTC/RTMP/NDK/Android音視頻流媒體高級(jí)開發(fā)

【免費(fèi)分享】音視頻學(xué)習(xí)資料包、大廠面試題、技術(shù)視頻和學(xué)習(xí)路線圖，資料包括（C/C++，Linux，F(xiàn)Fmpeg webRTC rtmp hls rtsp ffplay srs 等等）有需要的可以點(diǎn)擊788280672加群免費(fèi)領(lǐng)取~

三、直播整體流程

直播整體流程大致可分為：

視頻采集端：可以是電腦上的音視頻輸入設(shè)備、或手機(jī)端的攝像頭、或麥克風(fēng)，目前以移動(dòng)端手機(jī)視頻為主。

直播流視頻服務(wù)端：一臺(tái)Nginx服務(wù)器，采集視頻錄制端傳輸?shù)囊曨l流(H264/ACC編碼)，由服務(wù)器端進(jìn)行解析編碼，推送RTMP/HLS格式視頻流至視頻播放端。

視頻播放端：可以是電腦上的播放器（QuickTime Player、VLC），手機(jī)端的native播放器，還有就是 H5 的video標(biāo)簽等，目前還是以手機(jī)端的native播放器為主。

（web前端學(xué)習(xí)交流群：328058344 禁止閑聊，非喜勿進(jìn)！）

四、H5 錄制視頻

對于H5視頻錄制，可以使用強(qiáng)大的 webRTC （Web Real-Time Communication）是一個(gè)支持網(wǎng)頁瀏覽器進(jìn)行實(shí)時(shí)語音對話或視頻對話的技術(shù)，缺點(diǎn)是只在 PC 的 Chrome 上支持較好，移動(dòng)端支持不太理想。

使用 webRTC 錄制視頻基本流程

① 調(diào)用 window.navigator.webkitGetUserMedia()

獲取用戶的PC攝像頭視頻數(shù)據(jù)。

② 將獲取到視頻流數(shù)據(jù)轉(zhuǎn)換成 window.webkitRTCPeerConnection

(一種視頻流數(shù)據(jù)格式)。

③ 利用 WebScoket

將視頻流數(shù)據(jù)傳輸?shù)椒?wù)端。

注意：

雖然Google一直在推WebRTC，目前已有不少成型的產(chǎn)品出現(xiàn)，但是大部分移動(dòng)端的瀏覽器還不支持 webRTC（最新iOS 10.0也不支持），所以真正的視頻錄制還是要靠客戶端（iOS,Android）來實(shí)現(xiàn),效果會(huì)好一些。

WebRTC支持度

iOS原生應(yīng)用調(diào)用攝像頭錄制視頻流程

① 音視頻的采集，利用AVCaptureSession和AVCaptureDevice可以采集到原始的音視頻數(shù)據(jù)流。

② 對視頻進(jìn)行H264編碼，對音頻進(jìn)行AAC編碼，在iOS中分別有已經(jīng)封裝好的編碼庫（x264編碼、faac編碼、ffmpeg編碼）來實(shí)現(xiàn)對音視頻的編碼。

③ 對編碼后的音、視頻數(shù)據(jù)進(jìn)行組裝封包。

④ 建立RTMP連接并上推到服務(wù)端。

五、搭建Nginx+Rtmp直播流服務(wù)

安裝nginx、nginx-rtmp-module

① 先clone nginx項(xiàng)目到本地：

brew tap homebrew/nginx

② 執(zhí)行安裝nginx-rtmp-module

brew install nginx-full –with-rtmp-module

2. nginx.conf配置文件，配置RTMP、HLS

查找到nginx.conf配置文件（路徑/usr/local/etc/nginx/nginx.conf），配置RTMP、HLS。

① 在http節(jié)點(diǎn)之前添加 rtmp 的配置內(nèi)容：

② 在http中添加 hls 的配置

3. 重啟nginx服務(wù)

重啟nginx服務(wù)，瀏覽器中輸入 http://localhost:8080，是否出現(xiàn)歡迎界面確定nginx重啟成功。

nginx -s reload

六、直播流轉(zhuǎn)換格式、編碼推流

當(dāng)服務(wù)器端接收到采集視頻錄制端傳輸過來的視頻流時(shí)，需要對其進(jìn)行解析編碼，推送RTMP/HLS格式視頻流至視頻播放端。通常使用的常見編碼庫方案，如x264編碼、faac編碼、ffmpeg編碼等。鑒于 FFmpeg 工具集合了多種音頻、視頻格式編碼，我們可以優(yōu)先選用FFmpeg進(jìn)行轉(zhuǎn)換格式、編碼推流。

1.安裝 FFmpeg 工具

brew install ffmpeg

2.推流MP4文件

視頻文件地址：/Users/gao/Desktop/video/test.mp4

推流拉流地址：rtmp://localhost:1935/rtmplive/home，rtmp://localhost:1935/rtmplive/home

//RTMP 協(xié)議流
ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -acodec aac -f flv rtmp://10.14.221.17:1935/rtmplive/home
//HLS 協(xié)議流
ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://10.14.221.17:1935/hls/test

注意：

當(dāng)我們進(jìn)行推流之后，可以安裝VLC、ffplay（支持rtmp協(xié)議的視頻播放器）本地拉流進(jìn)行演示

3.FFmpeg推流命令

① 視頻文件進(jìn)行直播

ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://192.168.1.101:1935/hls/test
ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://10.14.221.17:1935/hls/test

② 推流攝像頭＋桌面+麥克風(fēng)錄制進(jìn)行直播

ffmpeg -f avfoundation -framerate 30 -i “1:0″ \-f avfoundation -framerate 30 -video_size 640x480 -i “0” \-c:v libx264 -preset ultrafast \-filter_complex ‘overlay=main_w-overlay_w-10:main_h-overlay_h-10′ -acodec libmp3lame -ar 44100 -ac 1 -f flv rtmp://192.168.1.101:1935/hls/test

更多命令，請參考：

FFmpeg處理RTMP流媒體的命令大全

FFmpeg常用推流命令

七、H5 直播視頻播放

移動(dòng)端iOS和 Android 都天然支持HLS協(xié)議，做好視頻采集端、視頻流推流服務(wù)之后，便可以直接在H5頁面配置 video 標(biāo)簽播放直播視頻。

<video controls preload=“auto” autoplay=“autoplay” loop=“l(fā)oop” webkit-playsinline>
<source src=“http://10.14.221.8/hls/test.m3u8″ type=“application/vnd.apple.mpegurl” />
<p class=“warning”>Your browser does not support HTML5 video.</p>
</video>

八、總結(jié)

本文從視頻采集上傳，服務(wù)器處理視頻推流，以及H5頁面播放直播視頻一整套流程,具體闡述了直播實(shí)現(xiàn)原理，實(shí)現(xiàn)過程中會(huì)遇到很多性能優(yōu)化問題。

① H5 HLS 限制必須是H264+AAC編碼。

② H5 HLS 播放卡頓問題，server 端可以做好分片策略，將 ts 文件放在 CDN 上，前端可盡量做到 DNS 緩存等。

③ H5 直播為了達(dá)到更好的實(shí)時(shí)互動(dòng)，也可以采用RTMP協(xié)議，通過video.js 實(shí)現(xiàn)播放。

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

在線咨詢

上一篇：一個(gè)簡單例子入門VC++（自動(dòng)插入自定義鏈接到網(wǎng)頁文
下一篇：視頻素材在哪找？高清無水印素材庫分享

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML5視頻教程-相對路徑與絕對路徑

向網(wǎng)頁中嵌入視頻

視頻的格式

source標(biāo)簽

向網(wǎng)頁中嵌入音頻

總結(jié)

言

一、視頻流協(xié)議HLS與RTMP

二、直播形式

三、直播整體流程

四、H5 錄制視頻

五、搭建Nginx+Rtmp直播流服務(wù)

六、直播流轉(zhuǎn)換格式、編碼推流

七、H5 直播視頻播放

八、總結(jié)

您的項(xiàng)目需求