為HTML頁面添加視頻、音頻的方法-零基礎(chǔ)自學網(wǎng)頁制作

頻、視頻的格式

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

提取碼：td80

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

學習如何在頁面中添加音頻、視頻之前應(yīng)該了解一點基礎(chǔ)知識。

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

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

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

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

那什么是編碼呢？

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

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

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

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

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

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

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

通過"編"的方式壓縮文件體積，通過"解"的方式再還原出文件內(nèi)容成了處理大規(guī)模數(shù)據(jù)的通用手法。

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

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

為頁面添加音頻、視頻

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

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

簡單來說呢，一個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">

版權(quán)聲明：本文為CSDN博主「痦子」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。

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

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

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

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

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

頁面效果如下：

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

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

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

<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屬性是告訴瀏覽器音樂文件的類型。

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

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

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

頁面效果如下:

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

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

頁面效果如下：

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

今天的內(nèi)容結(jié)束了，明天我們繼續(xù)學習格式轉(zhuǎn)換和為不同瀏覽器預設(shè)不同音視頻格式的方法。

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

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎(chǔ)自學網(wǎng)頁制作

HTML是什么？——零基礎(chǔ)自學網(wǎng)頁制作

第一個HTML頁面如何寫？——零基礎(chǔ)自學網(wǎng)頁制作

HTML頁面中head標簽有啥用？——零基礎(chǔ)自學網(wǎng)頁制作

初識meta標簽與SEO——零基礎(chǔ)自學網(wǎng)頁制作

HTML中的元素使用方法1——零基礎(chǔ)自學網(wǎng)頁制作

HTML中的元素使用方法2——零基礎(chǔ)自學網(wǎng)頁制作

HTML元素中的屬性1——零基礎(chǔ)自學網(wǎng)頁制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學網(wǎng)頁制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學網(wǎng)頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學網(wǎng)頁制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學網(wǎng)頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學網(wǎng)頁制作

16進制顏色表示與RGB色彩模型——零基礎(chǔ)自學網(wǎng)頁制作

HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學網(wǎng)頁制作

初識HTML中的<div>塊元素——零基礎(chǔ)自學網(wǎng)頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學網(wǎng)頁制作

封閉在家學網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學網(wǎng)頁制作

HTML表單元素初識1——零基礎(chǔ)自學網(wǎng)頁制作

HTML表單元素初識2——零基礎(chǔ)自學網(wǎng)頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學網(wǎng)頁制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學網(wǎng)頁制作

HTML列表制作講解——零基礎(chǔ)自學網(wǎng)頁制作

為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學網(wǎng)頁制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學網(wǎng)頁制作

HTML中使用<a>標簽實現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學網(wǎng)頁制作

級版HTML視頻教程（全網(wǎng)原創(chuàng)首發(fā)！）

什么是HTML?HTML指的是超文本標記語言，它是從事網(wǎng)頁設(shè)計工作的基礎(chǔ)，也是網(wǎng)站開發(fā)者必須熟練掌握的一門標記語言。應(yīng)廣大學員的強烈要求，我愛自學網(wǎng)特推出《HTML基礎(chǔ)教程》，希望能得到廣大學員的支持。

學習交流

標題

第一課：HTML語言框架和相關(guān)標簽95 1-1 學習html的前提和必要性53662 1-2 什么是HTML33819 1-3 HTML語言的整體框架135783 1-4 HTML語言的整體框架231727 1-5 行標簽和段標簽29866 1-6 文字屬性標簽28853 1-7 文字格式化標簽26888 1-8 body標簽27570 1-9 標題標簽25212

第二課：常用標簽代碼0 2-1 圖片37992 2-2 超鏈接127213 2-3 超鏈接223253 2-4 iframe標簽25784 2-5 橫線22900 2-6 列表22740 2-7 無序列表20544 2-8 有序列表21073 2-9 滾動標簽23217 2-10 轉(zhuǎn)義字符22227

第三課：表格標簽83 3-1 表格31370 3-2 表格屬性123819 3-3 表格屬性223066

您說說看我發(fā)明的...是不是很牛逼呀[滑稽]

總高級版學習資料文件高達10G！??！

總高級版學習高清視頻資料的高達35G?。?！

需要的話我后期會更新，所以關(guān)注我，學到的好東西都是你自己的哦[滑稽]

那么大概內(nèi)容就更新到這里

本教程后期會逐一更新高清視頻學習資料+超詳細的學習資料教程！

別忘了四連！！【點贊收藏關(guān)注投幣】

我怕你到時候想找我都找不到了～[鮮花]

注：本人原創(chuàng)首發(fā)，未經(jīng)允許禁止轉(zhuǎn)載/抄襲，如有違法，本人將有權(quán)追究法律責任！！！

tml的自學剛開始的時候是比較難的，因為html的專業(yè)程度本身就不簡單，而自學也是一件非常煎熬的事情，但是為了掌握一項生存技能，你必須學會。

在學習html之前首先你要明確的幾點是：

1. 是否明確將來做什么工作，需要掌握哪些技能，不要別人學你也跟著學，盲目跟風

2. 你有沒有系統(tǒng)的學習規(guī)劃，規(guī)劃好每天學什么、學多長時間。

3. 學習方式要選對，很多人在學習html的時候就是學習方式選錯了，最后的結(jié)果就是學著學著就放棄了，學習過程種一定要找到學習技巧，不會的可以多問問別人，不要自己瞎琢磨，最后什么也沒琢磨出來。

下面小編給大家提供一個曾經(jīng)學習過的HTML視頻教程，希望可以幫助到大家，此視頻教程主要講解了HTML基礎(chǔ)語法，內(nèi)容主要包括：HTML概述、W3C概述、B/S架構(gòu)系統(tǒng)原理、table、背景色與背景圖片、超鏈接、列表、表單、框架等知識點。通過該視頻的學習之后，可以開發(fā)基本的網(wǎng)頁，并且可以看懂別人編寫的HTML頁面。

課程學習目錄

1.HTML視頻教程:課程內(nèi)容概述

2.HTML視頻教程:BS結(jié)構(gòu)介紹

3.HTML視頻教程:軟件環(huán)境準備

4.HTML視頻教程:HTML概述

5.HTML視頻教程:我的第一個HTML

6.HTML視頻教程:HTML的基本標簽

7.HTML視頻教程:HTML的實體符號

8.HTML視頻教程:HTML的表格

9.HTML視頻教程:HTML的單元格合并1

10.HTML視頻教程:HTML的單元格合并2

11.HTML視頻教程:thead tbody tfoot

12.HTML視頻教程:背景色和背景圖片

13.HTML視頻教程:HTML圖片img標簽

14.HTML視頻教程:HTML超鏈接

15.HTML視頻教程:超鏈接的作用-request和response的概念

16.HTML視頻教程:HTML列表

17.HTML視頻教程:form表單初步

18.HTML視頻教程:用戶注冊表單的實現(xiàn)

19.HTML視頻教程:下拉列表支持多選

20.HTML視頻教程:form的file控件

完整目錄可以關(guān)注動力節(jié)點Java視頻教程

HTML視頻教程：https://www.ixigua.com/6834413404204040715

在線咨詢

上一篇：開發(fā)者成長Vue.js 中有哪些性能陷阱
下一篇：2020設(shè)計師最佳配色工具盤點（58+網(wǎng)站合集）

您的項目需求

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

整合營銷服務(wù)商

為HTML頁面添加視頻、音頻的方法-零基礎(chǔ)自學網(wǎng)頁制作

HTML完整學習目錄

您的項目需求

為HTML頁面添加視頻、音頻的方法-零基礎(chǔ)自學網(wǎng)頁制作