洞察 video 超能力系列-玩轉 mp4

技術提升美好事物發生的概率。Technologically, for greater probability to be happy

前言

只要在 HTML5 中使用過視頻播放的同學對 video 標簽一定不會陌生，不過很多同學只使用了 video 的基礎功能，實際上 video 擁有強大潛能的，只要姿勢正確就能讓其擁有超能力。不妨從下面幾個場景來逐漸了解下video 未曾被發掘的神秘空間：

清晰度無縫切換
節省視頻流量

清晰度無縫切換

點播領域里 mp4 是最普遍、兼容性最好的視頻容器，不過 mp4 也有它的局限性，比如常見的清晰度切換，我們是無法像youtube那樣做到無縫切換的。我們可以看下普通的mp4播放的網絡請求和youtube視頻播放的網絡請求的區別。

圖1.1 普通mp4的下載請求過程

圖1.2 Youtube視頻下載請求過程

這兩張圖不難看出，在默認情況下 mp4 使用一次 http 請求所有的視頻數據，Youtube 則分次請求。當然這個描述很不專業，但確實形象。造成這種差異的是 video 不支持流式的視頻數據，Youtube 采用的是流式的視頻容器 webm，而 mp4 是非流式的。那如何解釋清楚流式的視頻數據呢，從專業的角度三言兩語很難說清楚，但用大白話翻譯過來就是流式的視頻數據支持分段獨立播放，非流式的不可以。換句話說一個10M的視頻文件，流式的視頻可以把0~1M的數據請求回來單獨播放，但是非流式的不可以。

上面我們描述了視頻格式的不同，接下來我們要說的是第一張圖中的視頻加載是瀏覽器來控制的，通過給 video 的 src 屬性配置視頻地址，觸發播放之后瀏覽器就會開始下載了，JS干涉不了。而 Youtube 的視頻加載是通過JS來控制的，各位可以再次看下第二張圖的網絡請求類型：xhr，足以證明這一點。

上面兩點搞清楚之后我們就該說下清晰度切換的事情了。這個需求大家都不陌生，但是直接使用 mp4 格式做無縫清晰度切換，難度還挺大的。先解釋下“無縫清晰度切換”的概念：從播放一個分辨率的視頻到另一個分辨率且保證畫面、聲音不停頓的平滑切換過程。了解了這個概念，大家應該知道了用 video 無縫切換 mp4 有多難。一方面，video 是不支持流式的視頻格式的，一方面，video 的加載是不受JS控制的。通過切換 video 的 src 屬性，必然會導致畫面中斷、重新請求視頻數據等。有的同學想到說利用兩個 video 再結合 z-index 來搞，但是當你生成另一個video去加載視頻的時候，無法保證兩個畫面是嚴格一致的，即使將原來的畫面暫停到一個時刻，用另一個視頻通過 currentTime 屬性與之同步，切換仍然看到畫面閃爍，基本無法和 Youtube 無縫切換的體驗匹敵。而且還會造成更多流量的浪費，背后的原因大家可以研究下 mp4 容器和 webm 容器的異同，也可以看下視頻解碼相關的文章。

還有一種方法就是將 mp4 格式統統轉碼到流式的視頻格式比如 hls、webm 等。不過這種看上去可行的方式實際上會帶來很大的成本開銷，如將大量視頻做轉碼會消耗高昂的機器資源、雙倍存儲的費用、CDN的雙倍費用等等。其實我們也是在這種背景下研究出來新的技術問題解決清晰度無縫切換的。

首先，我們改變對 mp4 視頻的播放流程，不再直接使用 video 的 src 來播放，因為我們沒有任何可以操作的空間。video不僅支持 src 屬性還支持 Blob 對象，我們就是利用后者。播放的流程如下：

圖1.3 mp4 視頻新播放流程

來請求 mp4 視頻數據，這樣可以結合視頻 Range 服務，做到精確加載。
編寫解析器將加載回來的部分 mp4 視頻數據進行解復用
將解復用的視頻數據轉成 fmp4 格式并傳遞給 MediaSource
使用 video 進行解碼完成播放

然后在做清晰度切換的時候流程如下：

圖1.4 mp4視頻清晰度切換原理示意圖

播放視頻A，過程同上
在某個時刻，用戶切換到播放視頻B，首先解析B的索引文件（moov），反向計算mp4的range區間
加載B的視頻區間數據
解復用
把數據轉換成fmp4格式并傳遞給MediaSource
刪除A的部分Buffer
在下一個關鍵幀自動完成畫質的切換

圖1.5 mp4視頻清晰度切換流程示意圖

這個過程看上去比較繁瑣，但是所有的操作都是在瀏覽器端完成，也就是說都是JS來實現的。這樣之前說的所有成本問題都不存在，還能做到youtube相同體驗的無縫切換。如果大家也想使用這個功能不需要自己再去實現一遍上述流程，可以使用如下代碼：

如果對這段代碼有什么疑惑，或者想深入了解下它背后是如何實現的，可以參考 Github：https://github.com/bytedance/xgplayer 或閱讀原文：https://techblog.toutiao.com/

節省視頻流量

使用 video 的同學基本上都是這樣用的，如下：

利用src屬性

2.利用source標簽

這樣就可以播放視頻了，不過前面我們講過這樣使用 video ，視頻的加載是受瀏覽器控制的，可以看下瀏覽器在視頻剛開始播放的時候下載了多少數據：

圖2.1 video默認下載截圖

我隨便找了個視頻，大家看下視頻總長度是 02:08,在播放到 00:05 的時候，瀏覽器已經下載到 01:30 了，如果用戶終止觀看，下載的視頻就這樣被浪費掉了。當然，如果不斷的 seek 也會造成較多的流量浪費。按照我們之前的統計在短視頻領域，用戶 seek 的頻率在 80%，所以這部分流量是可以節省掉的。具體原理如下:

圖2.2 播放器加載視頻原理

設置每次加載的數據包大小
設置預加載時長
開啟加載隊列，完成第一次數據包下載，判斷緩沖時間和預加載時長是否滿足，不滿足請求下一個數據包

具體實現代碼如下：

這樣就實現了視頻在播放過程中永遠只預加載10秒的數據，進而保證節省流量。

擴展鏈接，了解超能力西瓜視頻是怎樣煉成的。

多站點都會使用到視頻. HTML5 提供了展示視頻的標準。

檢測您的瀏覽器是否支持 HTML5 視頻：

檢測

Web站點上的視頻

直到現在，仍然不存在一項旨在網頁上顯示視頻的標準。

今天，大多數視頻是通過插件（比如 Flash）來顯示的。然而，并非所有瀏覽器都擁有同樣的插件。

HTML5 規定了一種通過 video 元素來包含視頻的標準方法。

瀏覽器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <video> 元素.

注意: Internet Explorer 8 或者更早的IE版本不支持 <video> 元素。

HTML5 (視頻)- 如何工作

如需在 HTML5 中顯示視頻，您所有需要的是：

實例

您的瀏覽器不支持Video標簽。

</video>

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

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

<video> 與</video> 標簽之間插入的內容是提供給不支持 video 元素的瀏覽器顯示的。

<video> 元素支持多個 <source> 元素. <source> 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式：

視頻格式與瀏覽器的支持

當前， <video> 元素支持三種視頻格式： MP4, WebM, 和 Ogg:

瀏覽器	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	NO	NO
Opera	YES (從 Opera 25 起)	YES	YES

MP4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件
WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件
Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件

視頻格式

格式	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

HTML5 <video> - 使用 DOM 進行控制

HTML5 <video> 和 <audio> 元素同樣擁有方法、屬性和事件。

<video> 和 <audio>元素的方法、屬性和事件可以使用JavaScript進行控制.

其中的方法有用于播放、暫停以及加載等。其中的屬性（比如時長、音量等）可以被讀取或設置。其中的 DOM 事件能夠通知您，比方說，<video> 元素開始播放、已暫停，已停止，等等。

例中簡單的方法，向我們演示了如何使用 <video> 元素，讀取并設置屬性，以及如何調用方法。

實例 1

為視頻創建簡單的播放/暫停以及調整尺寸控件：

播放/暫停放大縮小普通

上面的例子調用了兩個方法：play() 和 pause()。它同時使用了兩個屬性：paused 和 width。

HTML5 Video 標簽

標簽	描述
<video>	定義一個視頻
<source>	定義多種媒體資源,比如 <video> 和<audio>
<track>	定義在媒體播放器文本軌跡

.標簽

1.1meta標簽

meta主要用于設置網頁中的一些元數據，元數據不是給用戶看 charset 指定網頁的字符集 name 指定的數據的名稱 content 指定的數據的內容

keywords 表示網站的關鍵字，可以同時指定多個關鍵字，關鍵字間使用,隔開

<meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手表,存儲卡,京東"/>

description 用于指定網站的描述

<meta name="description" content="京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，為您提供愉悅的網上購物體驗!"/>

<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">

將頁面重定向到另一個網站

1.2title標簽

title標簽的內容會作為搜索結果的超鏈接上的文字顯示

<title>Document</title>

1.3標題

h1 ~ h6 一共有六級標題
從h1~h6重要性遞減，h1最重要，h6最不重要
h1在網頁中的重要性僅次于title標簽，一般情況下一個頁面中只會有一個h1
標題元素是塊元素
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
hgroup標簽用來為標題分組，可以將一組相關的標題同時放入到hgroup
<hgroup>
<h1>回鄉偶書二首</h1>
<h2>其一</h2>
</hgroup>
其他標簽

p標簽表示頁面中的一個段落
<p>在p標簽中的內容就表示一個段落</p>
em標簽用于表示語音語調的一個加重
<p>今天天氣<em>真</em>不錯！</p>
strong表示強調，重要內容！
<p>你今天必須要<strong>完成作業</strong>！</p>
blockquote 表示一個長引用
<blockquote>
這句話我是從來沒有說過的！
</blockquote>
q表示一個短引用
子曰<q>學而時習之，樂呵樂呵！</q>
br標簽表示頁面中的換行
<br>

1.4布局標簽

header 表示網頁的頭部 main 表示網頁的主體部分(一個頁面中只會有一個main) footer 表示網頁的底部 nav 表示網頁中的導航 aside 和主體相關的其他內容（側邊欄） article 表示一個獨立的文章 section 表示一個獨立的區塊，上邊的標簽都不能表示時使用section

div 沒有語義，就用來表示一個區塊，目前來講div還是我們主要的布局元素

span 行內元素，沒有任何的語義，一般用于在網頁中選中文字

<header></header>
    <main></main>
    <footer></footer>

    <nav></nav>
    <aside></aside>
    <article></article>

    <section></section>

    <div></div>

    <span></span>

1.5列表

1.1.1分類

1.1.1.1有序列表

使用ol標簽來創建無序列表，使用li表示列表項

<ul>
       <li>結構</li>
       <li>表現</li>
       <li>行為</li>
   </ul>

1.1.1.2 無序列表

使用ul標簽來創建無序列表，使用li表示列表項

<ol>
       <li>結構</li>
       <li>表現</li>
       <li>行為</li>
   </ol>

1.1.1.3定義列表

使用dl標簽來創建一個定義列表，使用dt來表示定義的內容，使用dd來對內容進行解釋說明

<dl>
       <dt>結構</dt>
       <dd>結構表示網頁的結構，結構用來規定網頁中哪里是標題，哪里是段落</dd>
       <dd>結構表示網頁的結構，結構用來規定網頁中哪里是標題，哪里是段落</dd>
       <dd>結構表示網頁的結構，結構用來規定網頁中哪里是標題，哪里是段落</dd>
   </dl>

1.1.1.4列表之間可以互相嵌套

<ul>
       <li>
          aa
           <ul>
               <li>aa-1</li>
               <li>aa-2
                   <ul>
                       <li>aa-1</li>
                       <li>aa-2</li>
                   </ul>
               </li>
           </ul>
       </li>
   </ul>

1.6超鏈接

1.6.1 作用

超鏈接可以讓我們從一個頁面跳轉到其他頁面，或者是當前頁面的其他的位置

1.6.2 定義

使用 a 標簽來定義超鏈接

<a href="https://www.baidu.com">超鏈接</a>

1.6.3 屬性

1.6.3.1屬性1：href

指定跳轉的目標路徑

值可以是一個外部網站的地址

也可以寫一個內部頁面的地址

超鏈接是也是一個行內元素，在a標簽中可以嵌套除它自身外的任何元素

1.6.3.2 屬性2：target

用來指定超鏈接打開的位置

_self 默認值在當前頁面中打開超鏈接

_blank 在一個新的要么中打開超鏈接

<a href="07.列表.html" target="_blank">超鏈接</a>

1.6.4其他

將#作為超鏈接的路徑的展位符使用

javascript：; 來作為href的屬性，此時點擊這個超鏈接什么也不會發生

將超鏈接的href屬性設置為#，這樣點擊超鏈接以后頁面不會發生跳轉，而是轉到當前頁面的頂部的位置

跳轉到頁面的指定位置，只需將href屬性設置 #目標元素的id屬性值

<a href="#bottom">去底部</a>
   <br><br>
<a href="#p3">去第三個自然段</a>
   <br><br>
<p>
  內容多一點
</p>
<a href="#">這是一個新的超鏈接</a>
   <br><br>
<a href="javascript：;">這是一個新的超鏈接</a>
   <br><br>
<a id="bottom" href="#">回到頂部</a>

1.7圖片標簽

img標簽來引入外部圖片，img標簽是一個自結束標簽

屬性：src 屬性指定的是外部圖片的路徑（路徑規則和超鏈接是一樣的）

alt 圖片的描述，這個描述默認情況下不會顯示，有些瀏覽器會圖片無法加載時顯示

<img src="./img/1.gif" alt="松鼠">

1.8內聯框架

用于向當前頁面中引入一個其他頁面

src 指定要引入的網頁的路徑
frameborder 指定內聯框架的邊框

<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>

1.8 音視頻標簽

1.8.1音頻

audio 標簽用來向頁面中引入一個外部的音頻文件的

1.8.1.1 屬性

controls 是否允許用戶控制播放
autoplay 音頻文件是否自動播放

如果設置了autoplay 則音樂在打開頁面時會自動播放

loop 音樂是否循環播放

<audio src="./source/audio.mp3" controls autoplay loop></audio>

除了通過src來指定外部文件的路徑以外，還可以通過source來指定文件的路徑

<audio controls>
       <!-- 對不起，您的瀏覽器不支持播放音頻！請升級瀏覽器！-->
       <source src="./source/audio.mp3">
       <source src="./source/audio.ogg">
       <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
   </audio>

1.8.2視頻

與 audio 相似

<video controls>
       <source src="./source/flower.webm">
       <source src="./source/flower.mp4">
       <embed src="./source/flower.mp4" type="video/mp4">
   </video>

2.表格table

在table中使用tr表示表格中的一行，有幾個tr就有幾行
在tr中使用td表示一個單元格，有幾個td就有幾個單元格
rowspan 縱向的合并單元格
colspan 橫向的合并單元格

<table border="1" width='50%' align="center">
      <tr>
          <td>A1</td>
          <td>B1</td>
          <td>C1</td>
          <td>D1</td>
      </tr>
      <tr>
          <td>A2</td>
          <td>B2</td>
          <td>C2</td>
          <td rowspan="2">D2</td>
      </tr>
      <tr>
          <td>A3</td>
          <td>B3</td>
          <td>C3</td>
      </tr>
      <tr>
          <td>A4</td>
          <td>B4</td>
          <td colspan="2">C4</td>
      </tr>
  </table>

長表格

可以將一個表格分成三個部分：

頭部 thead
主體 tbody
底部 tfoot

th 表示頭部的單元格

<table border="1" width='50%' align="center">  
      <thead>
          <tr>
              <th>日期</th>
              <th>收入</th>
              <th>支出</th>
              <th>合計</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
      </tbody>
      <tfoot>
          <tr>
              <td></td>
              <td></td>
              <td>合計</td>
              <td>300</td>
          </tr>
      </tfoot>

  </table>

表格樣式

border-spacing: 指定邊框之間的距離

border-spacing: 0px;

border-collapse: collapse; 設置邊框的合并

border-collapse: collapse;

如果表格中沒有使用tbody而是直接使用tr，那么瀏覽器會自動創建一個tbody，并且將tr全都放到tbody中tr不是table的子元素

3.表單（form）

使用form標簽來創建一個表單
action 表單要提交的服務器的地址
數據要提交到服務器中，必須要為元素指定一個name屬性值

<input type="text" name="username">

單選按鈕

像這種選擇框，必須要指定一個value屬性，value屬性最終會作為用戶的填寫的值傳遞給服務器
checked 可以將單選按鈕設置為默認選中

<input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>

多選框

<input type="checkbox" name="test" value="1">
      <input type="checkbox" name="test" value="2">
      <input type="checkbox" name="test" value="3" checked>

下拉列表

<select name="haha">
          <option value="i">選項一</option>
          <option selected value="ii">選項二</option>
          <option value="iii">選項三</option>
      </select>

提交按鈕

<input type="submit" value="注冊">

屬性

autocomplete="off" 關閉自動補全
readonly 將表單項設置為只讀，數據會提交
disabled 將表單項設置為禁用，數據不會提交
autofocus 設置表單項自動獲取焦點

<form action="target.html">
      <input type="text" name="username" value="hello" readonly>
      <br><br>
      <input type="text" name="username" autofocus>
      <br><br>
      <input type="text" name="b">

      <br><br>

      <!-- <input type="color"> -->
      <br><br>
      <!-- <input type="email"> -->
      <br><br>

      <input type="submit">
      <!-- 重置按鈕 -->
      <input type="reset">
      <!-- 普通的按鈕 -->
      <input type="button" value="按鈕">

      <br><br>
       

      <button type="submit">提交</button>
      <button type="reset">重置</button>
      <button type="button">按鈕</button>
  </form>

4.注釋

<!--
我是注釋中的注釋 注釋不能嵌套
-->

5.屬性

屬性，在標簽中（開始標簽或自結束標簽）還可以設置屬性
屬性是一個名值對（x=y）
屬性用來設置標簽中的內容如何顯示
屬性和標簽名或其他屬性應該使用空格隔開
屬性不能瞎寫，應該根據文檔中的規定來編寫，有些屬性有屬性值，有些沒有。如果有屬性值，屬性值應該使用引號引起來

6.文檔聲明

<!doctype html>

在線咨詢

上一篇：PDF轉HTML格式如何轉？看完這篇你就會了
下一篇：H5網頁布局+css代碼美化，零基礎參考

您的項目需求

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

整合營銷服務商