整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
在很多網站上都會使用到視頻和音頻，HTML5 中提供了展示視頻和音頻的標簽。向網頁嵌入視頻可以使用 <video> 標簽，而嵌入音頻可以使用 <audio> 標簽。這兩個標簽都是 HTML 5 中新增的標簽，兩個標簽中的屬性和方法也很類似，但也有些不同。其中 audio 元素用于定義聲音，比如音樂， video 元素用于定義視頻，如電影等。
<video> 標簽可以用于定義視頻，且提供了播放、暫停、音量控件來控制視頻。舉個例子，像我們俠課島網站上，課程視頻播放，就是通過 <video> 標簽來實現的。下面我們來看一下如何向網頁中嵌入一個視頻。
示例：
首先我們準備一個視頻，例如一個 test.mp4，然后使用 <video> 標簽嵌入視頻，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5學習(9xkd.com)</title>
</head>
<body>
<video src="./test.mp4" controls="controls" width="700px" height="400px"></video>
</body>
</html>
在瀏覽器中的預覽效果：
從上圖中可以看到，我們通過 <video> 標簽成功向網頁中插入了一個視頻， 其中 src 屬性用于引入要播放的視頻的 URL，注意視頻地址一定要正確，如果地址錯誤，視頻是不能顯示的。然后我們通過 width、height 屬性設置了視頻的寬度為 700px ，高度為 400px。
然后可以看到，視頻上還顯示了播放、調整音量等控件，當我們點擊播放按鈕時，視頻就會開始播放。這是因為我們設置了 controls 屬性，如果我們沒有設置這個屬性，視頻將會顯示一個靜止的畫面，并且不管怎么點擊都是沒有反應的。大家可以試一下，不設置 controls 屬性然后在瀏覽器中查看演示效果，這里就不演示給大家看了。
video 元素中的常用屬性如下所示：
有些比較老的瀏覽器可能不支持 <video> 標簽，例如 IE8 及以下的瀏覽器就不支持，而 IE9+、Firefox、Opera、Chrome、Safari 等瀏覽器都支持 <video> 標簽。
所以我們可以在 <video> 標簽中放置文本內容，這樣當某個瀏覽器不支持此標簽時，就可以顯示提示內容：
<video src="./test.mp4" controls="controls" width="700px" height="400px">
您的瀏覽器不支持 video 標簽
</video>
這樣用戶就會知道，是因為瀏覽器不支持所以加載視頻不成功，可以換一個瀏覽器。
像我們平時看到的視頻格式有很多種，例如常見的有 mp4、AVI、mov、rmvb、Ogg 等等， 目前 video 元素支持的視頻格式有下面三種：
這三種視頻格式，在不同的瀏覽器中兼容性不同，例如 MP4 格式不支持 Firefox 和 Opera 瀏覽器，Ogg 格式不支持IE、Safari 瀏覽器，WebM 格式不支持IE、Safari 瀏覽器等。
所以我們可能需要在不同的瀏覽器中使用不同的視頻格式，這需要用到 <source> 標簽。
<source> 標簽可以為媒體元素定義媒介資源，例如 video 和 audio 元素。
例如 <video> 標簽中可以包含多個 <source> 標簽，<source> 標簽可以鏈接不同的視頻文件，瀏覽器將使用第一個可識別的格式。
示例：
例如我們插入的視頻播放器，帶有兩個源文件，瀏覽器會根據需要來選擇源文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5學習(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 標簽
</video>
</body>
</html>
像上述代碼中，如果是 Safari 瀏覽器就會選擇第一個源文件，如果是 Firefox 瀏覽器則會選擇第二個源文件。
<source> 標簽有三個屬性：
向網頁中嵌入音頻可以使用 <audio> 標簽，此標簽的使用和 <video> 標簽類似。插入視頻是有畫面的，我們也可以調整視頻的寬和高等，而插入音頻是沒有畫面的。
audio 元素支持的格式和 video 元素也有一點區別：
示例：
例如我們插入一段音頻，在瀏覽器中可以看到，是沒有畫面的，只有聲音：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5學習(9xkd.com)</title>
</head>
<body>
<audio controls="controls">
<source src="./test.mp4" type="audio/mpeg">
<source src="./test.ogg" type="audio/ogg">
您的瀏覽器不支持 audio 標簽
</audio>
</body>
</html>
在瀏覽器中的演示效果：
向網頁中嵌入音頻時，也可以通過 <source> 標簽來指定兩個源文件，<source> 標簽允許規定兩個視頻或者音頻文件供瀏覽器根據它對媒體類型或者編解碼器的支持進行選擇。
audio 元素中的常用屬性和 video 元素差不多，但是 audio 元素中沒有 width、height 等屬性。
常用屬性如下所示：
向網頁中嵌入視頻和音頻其實很簡單，要注意 video 元素 和 audio 元素支持的視頻、音頻格式類型，如果插入的視頻格式不支持，則視頻或音頻不會顯示。
更多可以查看鏈接：https://www.9xkd.com/
頻、視頻的格式
開始學習之前，我們要下載些素材用來測試使用，地址如下：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">
版權聲明：本文為CSDN博主「痦子」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：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頁面中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>標簽實現文本內鏈接——零基礎自學網頁制作
emo：
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Video（視頻）：在網頁中播放視頻的簡單方法</title>
</head>
<body>
<h1>HTML5 Video（視頻）：在網頁中播放視頻的簡單方法</h1>
<p>下面是一個使用HTML5 Video標簽在網頁中播放視頻的示例：</p>
<video width="400" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video tag.
</video>
<p>上述代碼將呈現出一個帶有控制條的視頻播放器，并在其中播放指定的視頻文件。視頻文件可以是MP4格式（<code>.mp4</code>）或WebM格式（<code>.webm</code>）。</p>
<p>在上述代碼中，我們使用了HTML5的Video標簽來嵌入視頻。通過設置<code>width</code>屬性，我們可以指定視頻播放器的寬度。通過設置<code>controls</code>屬性，我們可以啟用控制條，讓用戶可以控制視頻的播放和暫停。</p>
<p>在<code>video</code>標簽內部，我們使用了<code>source</code>標簽來指定視頻文件的URL和類型。在示例中，我們提供了兩個不同格式的視頻文件，以便在不同瀏覽器中兼容播放。</p>
<p>如果用戶的瀏覽器不支持HTML5 Video標簽或指定的視頻文件格式，則會顯示<code>Your browser does not support the video tag.</code>的提示信息。</p>
<p>通過使用HTML5 Video功能，我們可以在網頁中方便地播放視頻，為用戶提供更加豐富和多樣化的內容。視頻可以應用于各種場景，如教育、娛樂、廣告等。</p>
</body>
</html>```
以上是一篇使用HTML5 Video標簽在網頁中播放視頻的文章，其中包含了示例代碼和一些相關說明。通過使用HTML5的Video標簽，我們可以在網頁中方便地嵌入和播放視頻。在示例中，我們使用了兩種不同格式的視頻文件，以便在不同瀏覽器中兼容播放。通過設置Video標簽的屬性，如寬度和控制條，我們可以定制視頻播放器的外觀和功能。通過使用HTML5 Video功能，我們可以為用戶提供更加豐富和多樣化的內容，如教育、娛樂、廣告等。請注意，在使用視頻功能時，需要確保視頻文件的合法性和版權問題。
我是永不低頭的熊，喜歡美食、健身，當然也喜歡寫代碼，每天不定時更新各類編程相關的文章，希望你在碼農這條路上不再孤單！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
