音頻、視頻的格式
開始學(xué)習(xí)之前检盼，我們要下載些素材用來測(cè)試使用，地址如下：https://pan.baidu.com/s/1reRWno0ibYRcYXjw4MClqw
提取碼：td80
其中包括兩個(gè)視頻一個(gè)音頻和一個(gè)安裝程序翘单。
學(xué)習(xí)如何在頁(yè)面中添加音頻吨枉、視頻之前應(yīng)該了解一點(diǎn)基礎(chǔ)知識(shí)。
我們應(yīng)該都有在互聯(lián)網(wǎng)上下載電影哄芜、視頻貌亭、音樂的經(jīng)歷，大家會(huì)注意到认臊，有的視頻文件名的后綴是.avi圃庭，有的視頻是.mp4，還有.mov的失晴，據(jù)不完全統(tǒng)計(jì)剧腻，常見的各種視頻格式有十幾種之多。
常見的音頻的格式比起視頻來會(huì)顯得少一些书在，一般是.wav和.mp3格式。
為什么存儲(chǔ)相同的內(nèi)容可以有這么多不同的格式呢拆又？
格式產(chǎn)生的核心在于對(duì)音頻儒旬、視頻等多媒體文件進(jìn)行的不同編碼方式。
那什么是編碼呢遏乔？
簡(jiǎn)單來說我們可以把"編碼"這個(gè)詞分成兩個(gè)部分义矛，第一個(gè)是"編"，也就是"整理盟萨、組織"的意思凉翻，第二個(gè)是"碼"，也就是我們平時(shí)所說的"數(shù)碼"捻激。
首先說"碼"制轰，我們的計(jì)算機(jī)中的數(shù)據(jù)最終都是通過二進(jìn)制的數(shù)字（0和1）來存儲(chǔ)或計(jì)算的，這些0或1就是數(shù)碼胞谭。無論代碼垃杖、程序、圖片丈屹、音樂调俘、視頻伶棒、文字等的存儲(chǔ)與計(jì)算都不例外。不管多么復(fù)雜或簡(jiǎn)單的文件彩库，在計(jì)算機(jī)看來肤无，都是一大堆0和1。
一個(gè)0或1被稱為1比特骇钦，圖片或視頻中的一個(gè)黑白像素通常是8比特（八位）宛渐，如果一張1080乘720個(gè)像素的圖片所占內(nèi)存的大小就是10807208=6220800字節(jié)，約等于0,74mb眯搭。如果一個(gè)視頻每秒中有25幀窥翩，也就是一秒鐘在我們眼前閃過25張圖片（視頻播放實(shí)際上就是在我們眼前快速的更替圖片，這些圖片在大腦中會(huì)被自動(dòng)連成動(dòng)作鳞仙，這也是小的時(shí)候在課本的角上畫好一套走路的小人的不同動(dòng)作后寇蚊，快速翻動(dòng)書頁(yè)，畫面中的小人會(huì)走路的原因棍好，大家可以自行百度"視覺暫留原理"）幔荒。
一秒鐘25張1080乘720的圖片的視頻梳玫，一秒鐘就會(huì)占0.7425=18.5mb的內(nèi)存爹梁。如果是一分鐘呢，18.560=1110mb約等于1.08gb提澎。這樣的數(shù)據(jù)量是不是很嚇人姚垃。
但事實(shí)上我們下載的1080*720的一小時(shí)三十分鐘左右的視頻的體積往往也沒有超過1gb，這又是為什么呢盼忌？
這就是"編"的功勞积糯！對(duì)數(shù)碼進(jìn)行整理和組織的主要目的是壓縮體積，壓縮數(shù)據(jù)體積既能節(jié)省磁盤又能方便傳播與攜帶谦纱，是信息技術(shù)的關(guān)鍵技術(shù)之一看成，壓縮的方法一般有兩類，一類叫做無損壓縮跨嘉，也就是通過對(duì)這一大堆數(shù)碼進(jìn)行一個(gè)特殊的組合使其占有更小的空間川慌，一類叫做有損壓縮，是在無損壓縮的基礎(chǔ)上剔除掉人眼睛識(shí)別不到的冗余信息祠乃。具體的壓縮過程涉及到很多數(shù)學(xué)知識(shí)梦重，這里大家簡(jiǎn)單了解一下即可。
壓縮后的視頻或音頻文件最終通過播放器對(duì)該文件的壓縮算法進(jìn)行逆向運(yùn)算后亮瓷，還原成計(jì)算機(jī)可以解讀的畫面和聲音再呈現(xiàn)給觀眾琴拧，這個(gè)過程叫做"解碼"。
通過"編"的方式壓縮文件體積嘱支，通過"解"的方式再還原出文件內(nèi)容成了處理大規(guī)模數(shù)據(jù)的通用手法蚓胸。
不同的編碼和解碼方式催生出不同的文件格式挣饥，這種情況下，瀏覽器在播放視頻的時(shí)候就要有應(yīng)對(duì)不同格式的不同解碼方式沛膳，在15年以前亮靴，瀏覽器為了能夠播放不同格式的視頻，就要調(diào)用電腦中不同的播放器于置，這個(gè)過程的寫法非常麻煩。隨著技術(shù)不斷地整合贞岭，時(shí)至今日八毯，在頁(yè)面中播放視頻不需要這么復(fù)雜的寫法了，但是因?yàn)槊總€(gè)瀏覽器都不是包打一切瞄桨，因此话速，雖然不用指定播放器，但是也要預(yù)設(shè)不同格式的視頻來應(yīng)對(duì)不同的瀏覽器芯侥。
因此泊交，我們?cè)谶@一部分的學(xué)習(xí)中除了講解如何向頁(yè)面添加不同格式的音視頻外還會(huì)告訴大家如何為音視頻轉(zhuǎn)換格式。
為頁(yè)面添加音頻柱查、視頻
添加音頻使用<audio></audio>標(biāo)簽廓俭，這個(gè)標(biāo)簽被所有瀏覽器支持，是html5推薦的音頻導(dǎo)入標(biāo)簽唉工，但是遺憾的是在html4標(biāo)準(zhǔn)中是不被支持的或者說是非法的研乒。
這里給大家簡(jiǎn)要介紹一下html5和html4的區(qū)別。
簡(jiǎn)單來說呢淋硝，一個(gè)html文件的第一條語句是<!DOCTYPE HTML>雹熬，它就是HTML5標(biāo)準(zhǔn)的文件。如果是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)載請(qǐng)附上原文出處鏈接及本聲明烈菌。
原文鏈接：https://blog.csdn.net/yh1061632045/article/details/81518141
這讓我想到了孔乙己的"茴"字的多種寫法
是不是很麻煩，其實(shí)html5比html4更簡(jiǎn)單花履，功能更強(qiáng)大僧界，而且我們一直以html5的標(biāo)準(zhǔn)進(jìn)行學(xué)習(xí)，所以大家不必糾結(jié)臭挽。
下面我們導(dǎo)入一個(gè)音頻試試吧捂襟。示例代碼如下：
<!DOCTYPE HTML> <html> <head> <title>音視頻導(dǎo)入</title> </head> <body> <audio controls="controls"> <source src="audio/千年的祈禱.mp3" type="audio/mp3" /> </audio> </body> </html>
頁(yè)面效果如下：
其中controls屬性就是用來顯示播放控制界面的欢峰，就是這個(gè)：（偷懶的話可以寫成"controls"就ok葬荷，不必加"="以及后面的內(nèi)容了涨共。）
如果以后您使用自己編寫的控制界面宠漩，就可以不添加這個(gè)屬性举反。
刪掉這個(gè)屬性后就是這樣：這樣為自定義的播放控制界面留出了位置。
<audio></audio>標(biāo)簽夾著<source>標(biāo)簽火鼻，一個(gè)<audio></audio>標(biāo)簽中可以添加多個(gè)<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.<!--你的瀏覽器不支持這個(gè)音頻元素--></audio>
type屬性是告訴瀏覽器音樂文件的類型雕崩。
不同格式的文件的生成需要我們自己去做魁索，這就涉及到如何給一個(gè)音頻文件進(jìn)行格式轉(zhuǎn)化的問題。這個(gè)問題我們明天再說盼铁，今天先學(xué)習(xí)為頁(yè)面添加音頻和視頻粗蔚。
下面我們來看一下視頻的導(dǎo)入方法，示例代碼如下：
<video controls> <source src="video/阿塔麗.mp4" type="video/mp4" /></video>
頁(yè)面效果如下:
我們可以通過設(shè)置height和width屬性來控制視頻的面積鹏控。實(shí)例代碼如下：
<video controls width="850" height="500" > <source src="video/阿塔麗.mp4" type="video/mp4" /></video>
頁(yè)面效果如下：
視頻畫面變小了肤寝，和視頻并排的是我們之前添加的音頻文件当辐，由此可知，這兩個(gè)元素都是內(nèi)聯(lián)元素鲤看。
今天的內(nèi)容結(jié)束了瀑构，明天我們繼續(xù)學(xué)習(xí)格式轉(zhuǎn)換和為不同瀏覽器預(yù)設(shè)不同音視頻格式的方法。
如果您有任何疑問請(qǐng)給我留言刨摩，如有問題或錯(cuò)誤請(qǐng)予以斧正寺晌！
