前端必須理解知識點—HTML5音視頻處理

天小編將分享前端開發中必學的知識點，HTML5中關于音視頻處理

視頻處理

基本內容：目前國內的視頻網站 - Flash技術，HTML5的視頻處理首先替換Flash技術，支持的視頻格式有：

1.MP4 - .mp4 目前比較主流的視頻格式。

2.OGG - .ogv 手機端的視頻格式。

3.WebM - 目前唯一一個支持超高清視頻格式，該視頻格式出自Goggle公司。

問：如何處理視頻？

答：<video>元素 - 引入單個格式視頻文件，它由自己的屬性組成。 src屬性 - 指定視頻文件的地址， width屬性 - 設置視頻寬度， height屬性 - 設置視頻高度。語法規范：<video src="視頻文件路徑" width=“100px”>

！！需要注意的是：視頻的寬高比不會改變，在video元素內定義不支持的提示內容。

如果要想在<video>元素引入多個格式視頻文件，那么就使用<source/>，使用這種方式能夠實現各個瀏覽器的兼容性，語法規范：

<video>

</video>

<video>元素的屬性

autoplay屬性 - 自動播放

controls屬性 - 提供控制面板

loop屬性 - 循環播放

poster屬性 - 播放之前顯示一張圖片

preload屬性 - 預加載(視頻)

none - 不加載

auto - (默認值)自動(盡快加載完畢)

metadata - 只加載除視頻之外的信息(寬和高)

video的高級用法方法

play() - 播放視頻

pause() - 暫停視頻

load() - 加載視頻

canPlayType() - 判斷是否支持該格式

事件

play - 播放視頻時觸發

pause - 暫停視頻時觸發

ended - 結束播放時觸發

error - 播放錯誤時觸發

canplay - 可播放時觸發(不考慮整體)

canplaythrough - 整體播放順利時觸發

progress - 下載進度

屬性

paused - 判斷視頻當前是否暫停，如果暫停狀態,返回true

ended - 判斷視頻當前是否結束播放，如果結束播放,返回true

duration - 當前視頻的總時長

currentTime - 獲取或設置當前視頻播放的位置

音頻處理

基本內容：目前HTML頁面實現音頻處理，將Windows Media Player播放器,內置頁面中，使用Flash技術實現音頻處理，HTML5實現音頻處理支持的音頻格式有：

1.mp3 - 感謝百度(MP3)

2.ogg

3.wav

問：如何使用音頻？

答： audio元素 - 引入一種音頻格式。

<audio>元素的屬性

src屬性 - 引入音頻文件，作用 - 實現頁面背景音樂播放

audio元素 - 引入多種音頻格式

source元素

autoplay - 自動播放

controls - 提供控制面板

loop - 循環播放

preload - 預加載

audio的高級用法

事件

play - 播放音頻時觸發

方法

play() - 播放音頻

pause() - 暫停音頻

屬性

paused - true,表示暫停狀態

！！需要特別注意，IE 8及之前的版本都不支持

.標簽

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>

TML5多媒體作品以其對各種平臺的兼容而見長，目前已獲得了廣泛的應用。如果我們需要制作自己的HTML5多媒體作品，一個方便之選就是利用現成的在線制作工具“百度H5”。

首先訪問“百度H5”網頁（https://h5.baidu.com/），可以看到非常簡單的頁面，僅有“我的H5”和“我的模板”兩個選項。其中“我的模板”是通過套用模板的方式來制作HTML5作品，而“我的H5”則可以完全靠自定義各種參數來自由創作，制作好的作品也會顯示在這里（圖1）。

1. 通過創意模板輕松制作

在首頁中選擇“我的模板”，隨后會進入一個模板展示頁面，這些都是設計者們分享的模板。根據你所要設計的作品的類別，可以按類選擇一個類似的作品作為制作的模板，然后在此基礎上進行修改，即可快速形成自己的多媒體作品（圖2）。

比如要制作一個招生方面的媒體作品，選擇如圖所示的秋季班招生模板，然后點擊右下角的“使用模板”按鈕（圖3）。

接下來先要為作品命名，例如“我們的幼兒園招生了”。輸入完畢點擊“確定”按鈕（圖4）。

隨后進入實質性的模板修改編輯階段。對于不合適的內容，可先刪除頁面元素再添加。點擊“文本”菜單插入所需文本內容。同理，可使用右邊的“媒體”按鈕插入圖片、音頻、視頻、嵌入視頻、全景圖等內容。如果是PSD圖片，則直接用PSD菜單載入。若版面中需要插入一些圖標或形狀，則點擊“圖形”菜單選擇添加（圖5）。

此外，對于作品中所要用到的展示數據，可以通過插入圖表、表單等方式，非常輕松地完成數據展示制作（圖6）。如果要實現更多的效果，可通過“插件”菜單，選擇添加頁面加載套件和加載進度、添加計數器、添加幀動畫、添加相冊或地圖等。

對于需要修改的屬性，可通過窗口右側的分類屬性窗口選擇設置。通過窗口下方的編輯區域，可控制動畫、加載頁、全局全景和背景、當前頁等參數設置。例如，要定制個性化的加載頁面效果，點擊“加載頁”選項卡，然后通過下方的滑塊，對加載頁中的圖片和進度進行自定義編輯（圖7）。

對頁面上的各種元素進行修改和編輯完成之后，點擊工具欄左上角的磁盤按鈕將作品保存在網上。注意，編輯過程中產生的內容軟件會自動保存，但為了防止丟失，還是要養成勤于手動保存的習慣。

最后，就可以發布作品了。點擊工具欄上的“發布”按鈕執行發布操作（圖8）。

由于作品是保存在網絡服務器中的，因此作品的共享是以網址的形式體現的。發布時要填寫作品分享的標題，設置個人域名。我們只需在“個性化域名”中填寫自己命名的作品個性域名地址，發布后其他人就可以用這個域名來訪問HTML5作品了（圖9）。

小提示：使用上述服務需要使用自己的百度賬號登錄。為維護網絡安全，目前發布信息需先經過用戶實名制認證方可進行。

2. DIY 完全自己設計制作

套用模板適合于初學者或設計能力不強的用戶。其實，不用套用模板，完全可以從頭全部由自己來設計作品。

制作時，在主頁中選擇“我的H5”，然后點擊空白頁上印有圓圈套加號圖標的按鈕，向導會詢問創建什么樣的布局。從“分頁布局”或“整頁布局”中選擇一種布局方式。如果是分頁布局，則依靠頁面間的前后滑動實現簡單跳轉；如果是整頁布局，則將整個頁面分為不同區域，各部分還可創建鏈接，實現不同的功能（圖10）。

隨后其他步驟與第1部分的添加和設置操作方法相當，只是全要親自設計，不能套用現成的組件而已。在創作過程中，只要善于使用系統提供的文本工具編排文字內容，用媒體和圖形工具添加圖片、圖形、音視頻，數據相關的內容使用圖表、表單等工具，借助于“插件”擴展來補充完善，發揮自由想象的創作空間，一定能創作出更具個性化的作品。

在線咨詢

上一篇：從0開始通過一個商城實例手把手教你學習網站開發第2章HTML基礎
下一篇：20201119登錄頁面模板的制作

您的項目需求

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

整合營銷服務商