為HTML頁面添加視頻、音頻的方法-零基礎自學網頁制作

頻、視頻的格式

開始學習之前，我們要下載些素材用來測試使用，地址如下：https://pan.baidu.com/s/1reRWno0ibYRcYXjw4MClqw

提取碼：td80

其中包括兩個視頻一個音頻和一個安裝程序。

學習如何在頁面中添加音頻、視頻之前應該了解一點基礎知識。

我們應該都有在互聯網上下載電影、視頻、音樂的經歷，大家會注意到，有的視頻文件名的后綴是.avi，有的視頻是.mp4，還有.mov的，據不完全統計，常見的各種視頻格式有十幾種之多。

常見的音頻的格式比起視頻來會顯得少一些，一般是.wav和.mp3格式。

為什么存儲相同的內容可以有這么多不同的格式呢？

格式產生的核心在于對音頻、視頻等多媒體文件進行的不同編碼方式。

那什么是編碼呢？

簡單來說我們可以把"編碼"這個詞分成兩個部分，第一個是"編"，也就是"整理、組織"的意思，第二個是"碼"，也就是我們平時所說的"數碼"。

首先說"碼"，我們的計算機中的數據最終都是通過二進制的數字（0和1）來存儲或計算的，這些0或1就是數碼。無論代碼、程序、圖片、音樂、視頻、文字等的存儲與計算都不例外。不管多么復雜或簡單的文件，在計算機看來，都是一大堆0和1。

一個0或1被稱為1比特，圖片或視頻中的一個黑白像素通常是8比特（八位），如果一張1080乘720個像素的圖片所占內存的大小就是1080*720*8=6220800字節，約等于0,74mb。如果一個視頻每秒中有25幀，也就是一秒鐘在我們眼前閃過25張圖片（視頻播放實際上就是在我們眼前快速的更替圖片，這些圖片在大腦中會被自動連成動作，這也是小的時候在課本的角上畫好一套走路的小人的不同動作后，快速翻動書頁，畫面中的小人會走路的原因，大家可以自行百度"視覺暫留原理"）。

一秒鐘25張1080乘720的圖片的視頻，一秒鐘就會占0.74*25=18.5mb的內存。如果是一分鐘呢，18.5*60=1110mb約等于1.08gb。這樣的數據量是不是很嚇人。

但事實上我們下載的1080*720的一小時三十分鐘左右的視頻的體積往往也沒有超過1gb，這又是為什么呢？

這就是"編"的功勞！對數碼進行整理和組織的主要目的是壓縮體積，壓縮數據體積既能節省磁盤又能方便傳播與攜帶，是信息技術的關鍵技術之一，壓縮的方法一般有兩類，一類叫做無損壓縮，也就是通過對這一大堆數碼進行一個特殊的組合使其占有更小的空間，一類叫做有損壓縮，是在無損壓縮的基礎上剔除掉人眼睛識別不到的冗余信息。具體的壓縮過程涉及到很多數學知識，這里大家簡單了解一下即可。

壓縮后的視頻或音頻文件最終通過播放器對該文件的壓縮算法進行逆向運算后，還原成計算機可以解讀的畫面和聲音再呈現給觀眾，這個過程叫做"解碼"。

通過"編"的方式壓縮文件體積，通過"解"的方式再還原出文件內容成了處理大規模數據的通用手法。

不同的編碼和解碼方式催生出不同的文件格式，這種情況下，瀏覽器在播放視頻的時候就要有應對不同格式的不同解碼方式，在15年以前，瀏覽器為了能夠播放不同格式的視頻，就要調用電腦中不同的播放器，這個過程的寫法非常麻煩。隨著技術不斷地整合，時至今日，在頁面中播放視頻不需要這么復雜的寫法了，但是因為每個瀏覽器都不是包打一切，因此，雖然不用指定播放器，但是也要預設不同格式的視頻來應對不同的瀏覽器。

因此，我們在這一部分的學習中除了講解如何向頁面添加不同格式的音視頻外還會告訴大家如何為音視頻轉換格式。

為頁面添加音頻、視頻

添加音頻使用<audio></audio>標簽，這個標簽被所有瀏覽器支持，是html5推薦的音頻導入標簽，但是遺憾的是在html4標準中是不被支持的或者說是非法的。

這里給大家簡要介紹一下html5和html4的區別。

簡單來說呢，一個html文件的第一條語句是<!DOCTYPE HTML>，它就是HTML5標準的文件。如果是html4，它的第一條聲明語句有三種寫法，像這樣

一：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

二：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

三：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

原文鏈接：https://blog.csdn.net/yh1061632045/article/details/81518141

這讓我想到了孔乙己的"茴"字的多種寫法

是不是很麻煩，其實html5比html4更簡單，功能更強大，而且我們一直以html5的標準進行學習，所以大家不必糾結。

下面我們導入一個音頻試試吧。示例代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>音視頻導入</title>
  </head> 
  <body>
  <audio controls="controls"> 
    <source src="audio/千年的祈禱.mp3" type="audio/mp3" />
  </audio>
  </body> 
  </html>

頁面效果如下：

其中controls屬性就是用來顯示播放控制界面的，就是這個：（偷懶的話可以寫成"controls"就ok，不必加"="以及后面的內容了。）

如果以后您使用自己編寫的控制界面，就可以不添加這個屬性。

刪掉這個屬性后就是這樣：這樣為自定義的播放控制界面留出了位置。

<audio></audio>標簽夾著<source>標簽，一個<audio></audio>標簽中可以添加多個<source>用以支持不同的格式要求。示例代碼如下：（這段代碼來自w3school）

<audio controls="controls"> 
  <source src="song.ogg" type="audio/ogg" /> 
  <source src="song.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.<!--你的瀏覽器不支持這個音頻元素-->
</audio>

type屬性是告訴瀏覽器音樂文件的類型。

不同格式的文件的生成需要我們自己去做，這就涉及到如何給一個音頻文件進行格式轉化的問題。這個問題我們明天再說，今天先學習為頁面添加音頻和視頻。

下面我們來看一下視頻的導入方法，示例代碼如下：

<video controls> 
  <source src="video/阿塔麗.mp4" type="video/mp4" />
</video>

頁面效果如下:

我們可以通過設置height和width屬性來控制視頻的面積。實例代碼如下：

<video controls width="850" height="500" > 
  <source src="video/阿塔麗.mp4" type="video/mp4" />
</video>

頁面效果如下：

視頻畫面變小了，和視頻并排的是我們之前添加的音頻文件，由此可知，這兩個元素都是內聯元素。

今天的內容結束了，明天我們繼續學習格式轉換和為不同瀏覽器預設不同音視頻格式的方法。

如果您有任何疑問請給我留言，如有問題或錯誤請予以斧正！

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作

HTML是什么？——零基礎自學網頁制作

第一個HTML頁面如何寫？——零基礎自學網頁制作

HTML頁面中head標簽有啥用？——零基礎自學網頁制作

初識meta標簽與SEO——零基礎自學網頁制作

HTML中的元素使用方法1——零基礎自學網頁制作

HTML中的元素使用方法2——零基礎自學網頁制作

HTML元素中的屬性1——零基礎自學網頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作

使用HTML添加表格1（基本元素）——零基礎自學網頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

HTML中的塊級元素與內聯元素——零基礎自學網頁制作

初識HTML中的<div>塊元素——零基礎自學網頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作

HTML表單4（form的action、method屬性）——零基礎自學網頁制作

HTML列表制作講解——零基礎自學網頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

覽器解析HTML文件的過程是網頁呈現的關鍵步驟之一。具體介紹如下：

HTML文檔的接收和預處理

網絡請求處理：當用戶輸入URL或點擊鏈接時，瀏覽器發起HTTP請求，服務器響應并返回HTML文件。此過程中，瀏覽器需要處理DNS查詢、建立TCP連接等底層網絡通信操作。
預解析優化：為了提高性能，現代瀏覽器在主線程解析HTML之前會啟動一個預解析線程，提前下載HTML中鏈接的外部CSS和JS文件。這一步驟確保了后續渲染過程的順暢進行。

解析為DOM樹

詞法分析和句法分析：瀏覽器的HTML解析器通過詞法分析將HTML文本標記轉化為符號序列，然后通過句法分析器按照HTML規范構建出DOM樹。每個節點代表一個HTML元素，形成了多層次的樹狀結構。
生成對象接口：生成的DOM樹是頁面元素的結構化表示，提供了操作頁面元素的接口，如JavaScript可以通過DOM API來動態修改頁面內容和結構。

CSS解析與CSSOM樹構建

CSS文件加載與解析：瀏覽器解析HTML文件中的<link>標簽引入的外部CSS文件和<style>標簽中的內聯CSS，生成CSSOM樹。CSSOM樹反映了CSS樣式的層級和繼承關系。
CSS屬性計算：包括層疊、繼承等，確保每個元素對應的樣式能夠被準確計算。這些計算過程為后續的布局提供必要的樣式信息。

JavaScript加載與執行

阻塞式加載：當解析器遇到<script>標簽時，它會停止HTML的解析，轉而先加載并執行JavaScript代碼。這是因為JS可能會修改DOM結構或CSSOM樹，從而影響已解析的部分。
異步和延遲加載：為了不影響頁面的初步渲染，可以采用async或defer屬性來異步加載JS文件，這樣可以在后臺進行JS的加載和執行，而不阻塞HTML解析。

渲染樹的構建

合并DOM樹和CSSOM樹：有了DOM樹和CSSOM樹后，瀏覽器將它們組合成渲染樹，這個樹只包含顯示界面所需的DOM節點及對應的樣式信息。
不可見元素的排除：渲染樹會忽略例如<head>、<meta>等不可見元素，只關注<body>內的可視化內容。

布局計算（Layout）

元素位置和尺寸確定：瀏覽器從渲染樹根節點開始，遞歸地計算每個節點的精確位置和尺寸，這個過程也被稱為“回流”或“重排”，是后續繪制的基礎。
布局過程的優化：現代瀏覽器會盡量優化布局過程，例如通過流式布局的方式減少重復計算，確保高效地完成布局任務。

繪制（Paint）

像素級繪制：繪制是一個將布局計算后的各元素繪制成像素點的過程。這包括文本、顏色、邊框、陰影以及替換元素的繪制。
層次化的繪制：為了高效地更新局部內容，瀏覽器會將頁面分成若干層次（Layer），對每一層分別進行繪制，這樣只需更新變化的部分。

因此，我們開發中要注意以下幾點：

避免過度使用全局腳本：盡量減少使用全局腳本或者將它們放在文檔底部，以減少對HTML解析的阻塞。
合理組織CSS和使用CSS預處理器：合理組織CSS文件的結構和覆蓋規則，利用CSS預處理器進行模塊化管理。
利用瀏覽器緩存機制：通過設置合理的緩存策略，減少重復加載相同資源，提升二次訪問的體驗。
優化圖片和多媒體資源：適當壓縮圖片和優化多媒體資源的加載，減少網絡傳輸時間和渲染負擔。

綜上所述，瀏覽器解析HTML文件是一個復雜而高度優化的過程，涉及從網絡獲取HTML文檔到最終將其渲染到屏幕上的多個步驟。開發者需要深入理解這些步驟，以優化網頁性能和用戶體驗。通過合理組織HTML結構、優化資源加載順序、減少不必要的DOM操作和合理安排CSS和JavaScript的加載與執行，可以顯著提升頁面加載速度和運行效率。

我們開發Web應用的時候，會用到大量的js、css、image、html等靜態資源資源。

靜態資源映射

默認情況下，我們只需要將靜態資源放在一下幾個目錄中就可以直接通過url在瀏覽器中訪問了。

/META-INF/resources/
/resources/
/static/
/public/

如果這四個目錄中有相同的靜態資源文件，那么優先訪問哪個目錄下面的資源啊？

靜態資源的默認訪問優先級：/META-INF/resources/>/resources/>/static/>/public/

在四個目錄中都放一個static.html的文件，每個html文件中都說明自己所在的目錄，訪問結果如下：

SpringBoot關于靜態資源的訪問涉及到了application.properties中的兩個屬性：

# 默認值為 /*
spring.mvc.static-path-pattern= #這里設置靜態資源匹配的url-pattern
# 默認值為 classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/ 
spring.resources.static-locations= #這里設置要指向的路徑，多個使用英文逗號隔開，在前面的優先級高

此時，我們豁然開朗，知道默認情況下靜態資源為什么放在/META-INF/resources/、/resources/、/static/、/public/這四個目錄了，還有這四個目錄訪問的優先級是怎么來的了。

修改靜態資源映射的方法：

我們可以修改這兩個屬性來改變靜態資源的映射，比如我們的所有靜態資源都在mystatic目錄中，并且我們希望訪問靜態資源的的url都帶有/mystatic/這個目錄前綴:

spring.mvc.static-path-pattern=/mystatic/*
spring.resources.static-locations= classpath:mystatic/

在resources資源目錄中創建一個mystatic目錄，在該目錄下面創建一個static.html文件，訪問結果如下：

繼承WebMvcConfigurerAdapter類，并且重寫addResourceHandlers方法就行，該操作與上面的方法得到的效果是一樣的

注意：還可以設置外部磁盤目錄，設置方式不變，格式如下：file:d/mystatic/。

WebJars

WebJars將前端資源（css,js,image,html等等）打包到jar中，然后使用基于JVM的包管理器（比如 Maven、Gradle 等）管理前端依賴的方案。SpringBoot中也可以通過WebJars來訪問靜態資源。

SpringBoot默認將/webjars/**映射到 classpath:/META-INF/resources/webjars/。

/webjars/**：表示/webjars/目錄下的所有文件，及存在其目錄下的jar包中的所有文件。

所以默認情況下我們需要訪問WebJars中的資源，需要將其jar包放到classpath:/META-INF/resources/webjars/目錄中。

我們來使用一下WebJars:

在pom.xml中引入jquery的WebJars，默認會被放在classpath:/META-INF/resources/webjars/目錄中

 <dependency>
 <groupId>org.webjars</groupId>
 <artifactId>jquery</artifactId>
 <version>2.1.1</version>
 </dependency>

在前端webjars.html頁面中引入jquery

<script src="/webjars/jquery/2.1.1/jquery.js"></script>

訪問頁面webjars.html，查看源碼，可以鏈接到jquery.js的內容

版本號統一管理

如果我們有很多頁面都是用了WebJars中的資源，而我們現在要升級WebJars的版本，豈不是要在每個頁面中都改動一下，這樣很麻煩啊，有沒有簡單的方法啊。此時，我們可以進行版本號統一管理。

在pom.xml中引入jquery的WebJars的基礎上添加：

 <dependency>
 <groupId>org.webjars</groupId>
 <artifactId>webjars-locator</artifactId>
 </dependency>

添加版本號統一管理的控制器

在頁面中引入jquery的方式如下：

<script src="/webjarslocator/jquery/jquery.js"></script>

靜態資源版本管理

當我們資源內容發生變化時，由于瀏覽器緩存，用戶本地的靜態資源還是舊的資源，為了防止這種情況導致的問題，我們可能會手動在請求url的時候加個版本號或者其他方式。

<script type="text/javascript" src="/lavor.js?v=1.1"></script>

SpringMVC提供了兩種方式可以幫助我們很容易地解決這類問題。

MD5方式

修改application.properties配置文件

spring.resources.chain.strategy.content.enabled=true
spring.resources.chain.strategy.content.paths=/**

添加@ControllerAdvice注解，返回ResourceUrlProvider的對象，這樣所有通過控制器返回的模板頁面（jsp,thymeleaf,freeemarker等）就都可以在頁面中使用該對象了

在控制器返回的模板頁面中，添加以下信息，我們這里的返回頁面時jsp頁面，lavor.js是webapp目錄下面的js腳本文件。

<script src="${urls.getForLookupPath('/lavor.js') }"></script>

通過瀏覽器訪問控制器的請求url，查看頁面源代碼

<script src="/lavor-fdfa0502716d517c6cad4f2536aa02a1.js"></script>

請求/lavor-fdfa0502716d517c6cad4f2536aa02a1.js，我們MD5配置的paths=/**，所以SpringMVC會嘗試url中是否包含-，如果包含會去掉后面這部分，然后去映射的目錄（如webapp根目錄，上面提到的四大靜態映射目錄）查找/lavor.js文件，如果能找到就返回。

版本號方式

修改application.properties配置文件，注意MD5方式中的是content，這里是fixed

spring.resources.chain.strategy.fixed.enabled=true
#版本號處理的路徑
spring.resources.chain.strategy.fixed.paths=/**
# 版本號，可以為所處理路徑中的資源加上/v1.1目錄前綴
spring.resources.chain.strategy.fixed.version=v1.1

添加@ControllerAdvice注解，返回ResourceUrlProvider的對象，這樣所有通過控制器返回的模板頁面（jsp,thymeleaf,freeemarker等）就都可以在頁面中使用該對象了

在控制器返回的模板頁面中，添加以下信息，我們這里的返回頁面時jsp頁面，lavor.js是webapp目錄下面的js腳本文件.

<script src="${urls.getForLookupPath('/lavor.js') }"></script>

通過瀏覽器訪問控制器的請求url，查看頁面源代碼

<script src="/v1.1/lavor.js"></script>

請求/v1.1/lavor.js，會查看v1.1是不是版本號，如果是就去掉前綴目錄，直接查找/lavor.js。

注意：我們發現如果添加了webapp目錄，那么該目錄也可以存放靜態資源，并且默認情況下訪問優先級比/META-INF/resources/還要高。

在線咨詢

上一篇：html開發筆記20-合并單元格-列和行
下一篇：使用正則表達式從HTML中提取并驗證日期的有效性

您的項目需求

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

整合營銷服務商

為HTML頁面添加視頻、音頻的方法-零基礎自學網頁制作

HTML完整學習目錄

您的項目需求