整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
頻、視頻的格式
開始學(xué)習(xí)之前，我們要下載些素材用來(lái)測(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ì)，常見的各種視頻格式有十幾種之多。
常見的音頻的格式比起視頻來(lái)會(huì)顯得少一些，一般是.wav和.mp3格式。
為什么存儲(chǔ)相同的內(nèi)容可以有這么多不同的格式呢？
格式產(chǎn)生的核心在于對(duì)音頻、視頻等多媒體文件進(jìn)行的不同編碼方式。
那什么是編碼呢？
簡(jiǎn)單來(lái)說(shuō)我們可以把"編碼"這個(gè)詞分成兩個(gè)部分，第一個(gè)是"編"，也就是"整理、組織"的意思，第二個(gè)是"碼"，也就是我們平時(shí)所說(shuō)的"數(shù)碼"。
首先說(shuō)"碼"，我們的計(jì)算機(jī)中的數(shù)據(jù)最終都是通過二進(jìn)制的數(shù)字（0和1）來(lái)存儲(chǔ)或計(jì)算的，這些0或1就是數(shù)碼。無(wú)論代碼、程序、圖片、音樂、視頻、文字等的存儲(chǔ)與計(jì)算都不例外。不管多么復(fù)雜或簡(jiǎn)單的文件，在計(jì)算機(jī)看來(lái)，都是一大堆0和1。
一個(gè)0或1被稱為1比特，圖片或視頻中的一個(gè)黑白像素通常是8比特（八位），如果一張1080乘720個(gè)像素的圖片所占內(nèi)存的大小就是1080*720*8=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.74*25=18.5mb的內(nèi)存。如果是一分鐘呢，18.5*60=1110mb約等于1.08gb。這樣的數(shù)據(jù)量是不是很嚇人。
但事實(shí)上我們下載的1080*720的一小時(shí)三十分鐘左右的視頻的體積往往也沒有超過1gb，這又是為什么呢？
這就是"編"的功勞！對(duì)數(shù)碼進(jìn)行整理和組織的主要目的是壓縮體積，壓縮數(shù)據(jù)體積既能節(jié)省磁盤又能方便傳播與攜帶，是信息技術(shù)的關(guān)鍵技術(shù)之一，壓縮的方法一般有兩類，一類叫做無(wú)損壓縮，也就是通過對(duì)這一大堆數(shù)碼進(jìn)行一個(gè)特殊的組合使其占有更小的空間，一類叫做有損壓縮，是在無(wú)損壓縮的基礎(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è)不同格式的視頻來(lái)應(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)中是不被支持的或者說(shuō)是非法的。
這里給大家簡(jiǎn)要介紹一下html5和html4的區(qū)別。
簡(jiǎn)單來(lái)說(shuō)呢，一個(gè)html文件的第一條語(yǔ)句是<!DOCTYPE HTML>，它就是HTML5標(biāo)準(zhǔn)的文件。如果是html4，它的第一條聲明語(yǔ)句有三種寫法，像這樣
一：<!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屬性就是用來(lái)顯示播放控制界面的，就是這個(gè)：（偷懶的話可以寫成"controls"就ok，不必加"="以及后面的內(nèi)容了。）
如果以后您使用自己編寫的控制界面，就可以不添加這個(gè)屬性。
刪掉這個(gè)屬性后就是這樣：這樣為自定義的播放控制界面留出了位置。
<audio></audio>標(biāo)簽夾著<source>標(biāo)簽，一個(gè)<audio></audio>標(biāo)簽中可以添加多個(gè)<source>用以支持不同的格式要求。示例代碼如下：（這段代碼來(lái)自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è)問題我們明天再說(shuō)，今天先學(xué)習(xí)為頁(yè)面添加音頻和視頻。
下面我們來(lái)看一下視頻的導(dǎo)入方法，示例代碼如下：
<video controls>
<source src="video/阿塔麗.mp4" type="video/mp4" />
</video>頁(yè)面效果如下:
我們可以通過設(shè)置height和width屬性來(lái)控制視頻的面積。實(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)予以斧正！
HTML序章（學(xué)習(xí)目的、對(duì)象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
第一個(gè)HTML頁(yè)面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML頁(yè)面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
在HTML頁(yè)面中嵌入其他頁(yè)面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
封閉在家學(xué)網(wǎng)頁(yè)制作！為頁(yè)面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
為HTML頁(yè)面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
網(wǎng)頁(yè)中添加視頻、聲音、動(dòng)畫等，可以增強(qiáng)用戶體驗(yàn)。在HTML5之前，為網(wǎng)頁(yè)添加多媒體的唯一辦法，就是使用第三方的插件（如，Adobe Flash等）。
HTML5中，提供了對(duì)多媒體的原生支持，只需通過 video 元素，就可以向網(wǎng)頁(yè)嵌入視頻、電影或音頻資源，通過 audio 元素向網(wǎng)頁(yè)嵌入音頻資源，省時(shí)省力。
HTML中嵌入視頻和音頻代碼
在HTML5時(shí)代，在網(wǎng)頁(yè)中嵌入視頻非常簡(jiǎn)單，只需要一個(gè) video 元素，并設(shè)置它的 src 屬性，使其鏈接一個(gè)視頻地址就可以完全搞定了，這個(gè)太esay了
<video src="media/vedio.mp4"></video>
把這個(gè)網(wǎng)站在IE8中打開一看，網(wǎng)站上除了一片空白外，什么也沒有，這是為什么呢？
原來(lái) video 是HTML5最新引入的元素，并不是所有瀏覽器都支持它，IE8及以下版本都無(wú)法識(shí)別 video 標(biāo)簽。如果瀏覽器不識(shí)別 video標(biāo)簽，則會(huì)忽略它，當(dāng)做什么都沒有。這就是網(wǎng)站上一片空白的原因。
這個(gè)問題好解決，只需在 video 標(biāo)簽之間放置文本信息，不支持 video 標(biāo)簽的老瀏覽器，會(huì)顯示 video 標(biāo)簽之間的文本信息，以提示用戶瀏覽器不支持 video，就這么簡(jiǎn)單！
<video src="media/vedio.mp4">
你的瀏覽器已經(jīng)老掉牙了，不支持video，還不趕快使用現(xiàn)代瀏覽器O(∩_∩)O~！
</video>
在IE8上打開一看，確實(shí)顯示了提示文本，這下好多了，至少用戶知道自己的瀏覽器不能播放視頻，該換瀏覽器了。
下載了Opera瀏覽器的最新版本25.0，打開一看，怎么還是一片空白外！Opera瀏覽器明明是支持video標(biāo)簽的，那又是為什么呢？
這個(gè)就得從視頻的編碼格式說(shuō)起了。video 元素支持三種視頻格式：Ogg、MP4、WebM。
Ogg是帶有Theora視頻編碼和Vorbis音頻編碼的文件，后綴名為 .ogg；MP4是帶有H.264視頻編碼和AAC音頻編碼的MP4文件，后綴名為 .mp4；WebM是VP8視頻編碼和Vorbis音頻編碼的文件，后綴名為 .webm。
這個(gè)Opera瀏覽器呢，它可以支持ogg，但不支持mp4。由于Opera支持video標(biāo)簽，故video標(biāo)簽之間的文本信息沒有顯示出來(lái)，但它不支持ogg，所以就不進(jìn)行播放，最終導(dǎo)致頁(yè)面出現(xiàn)一片空白。這下可怎么辦呢？
其實(shí)辦法有的是，我們可以從網(wǎng)上下載一副圖像，放到視頻播放窗口，如果視頻無(wú)法播放，就顯示這張圖片，是不是更好呢？從網(wǎng)上下載一張美女圖片，干脆叫beauty.jpg吧。那這個(gè)圖像怎么添加到視頻窗口呢？
video標(biāo)簽有個(gè)poster 屬性，就是專門在視頻窗口放置圖片的。poster是一個(gè)video的占位符，無(wú)論什么情況下，只要視頻還沒有播放（視頻下載過程中、視頻不存在、不支持該視頻類型、用戶點(diǎn)擊播放按鈕前），就會(huì)顯示該圖像，可以看做是視頻播放之前插入的宣傳畫或海報(bào)。
<video src="media/vedio.mp4" poster = "img/beauty.jpg">
你的瀏覽器已經(jīng)老掉牙了，不支持video，還不趕快使用現(xiàn)代瀏覽器O(∩_∩)O~！
</video>
在Opera瀏覽器上刷新一下，真的有一個(gè)美女沖著自己微笑呢。雖然視頻沒有播放出來(lái)，這回心情卻是好多了。
那我可不能一天到晚只看美女呀，視頻還是還是要想辦法播放出來(lái)的。既然Opera瀏覽器不支持mp4，我們就換成需要ogg吧，這樣就肯定沒問題了。
我想了想，這個(gè)辦法不好，萬(wàn)一某個(gè)瀏覽器只支持支持ogg，不支持mp4呢。這年頭，什么都缺，就是不缺點(diǎn)子，隨便在網(wǎng)上一搜，辦法就有了。
在 video 元素中添加 source 元素，就可以解決這個(gè)問題。在source 元素中，通過 src 屬性指定視頻的地址，通過 type 屬性指定視頻的類型，以幫助瀏覽器決定是否能播放該視頻。并且，在 video 元素中可以添加任意多個(gè)source 元素，讓不同的 source 元素鏈接到不同的視頻文件。
這樣的話，當(dāng)瀏覽器發(fā)現(xiàn) video 元素時(shí)，首先會(huì)查看它本身是否定義了 src 屬性。如果沒有，就會(huì)檢查 source 元素。瀏覽器會(huì)逐個(gè)查看這些視頻源，直到找到一個(gè)可以播放的視頻。一旦找到，就會(huì)播放它并忽略其他的視頻源。我們干脆添加兩個(gè)source，一個(gè)是mp4，一個(gè)是ogg，這下視頻是一定能播放出來(lái)了。
<video poster = "img/beauty.jpg">
<source src="media/vedio.mp4" type="video/mp4">
<source src="media/vedio.ogg" type="video/ogg">
你的瀏覽器已經(jīng)老掉牙了，不支持video，還不趕快使用現(xiàn)代瀏覽器O(∩_∩)O~！
</video>
在Opera瀏覽器上又刷新一下，只有美女沖著我微笑，視頻還是沒播放出來(lái)。唉，太粗心了，忘記添加播放視頻的控件了。
在video標(biāo)簽中，通過添加controls 屬性來(lái)為視頻添加播放控件，方便用戶執(zhí)行播放、暫停操作和音量控制。
<video poster = "img/beauty.jpg" controls>
（此處略去500字…）
</video>
在Opera瀏覽器上又刷新一下，效果真的不一樣，這次不僅看到美女，還看到了視頻控件。用鼠標(biāo)猛戳一下那個(gè)播放按鈕，哈哈，不錯(cuò)，真的聽到美妙的旋律。我們的ogg文件，終于播放出來(lái)了，讓我們好好享受一下吧O(∩_∩)O。
聽了一會(huì)，忽然一想，不對(duì)呀，我剛才點(diǎn)了播放按鈕后，等了半天才聽到聲音。能不能我一點(diǎn)播放按鈕，就立即播放呢？
原來(lái)視頻也是需要下載緩存的，點(diǎn)擊播放按鈕后，首先緩存，然后才播放的。那能不能在頁(yè)面加載的同時(shí)就緩存呢。這樣，用戶點(diǎn)擊播放后，就不必等待了。
這當(dāng)然可以，在video標(biāo)簽中，通過添加preload屬性來(lái)為視頻添加預(yù)加載功能，在頁(yè)面加載的同時(shí)加載視頻。
<video poster = "img/beauty.jpg" controls preload>
（此處略去500字…）
</video>
關(guān)于 preload 屬性，稍微再啰嗦一點(diǎn)，就是可以把它設(shè)置為 metadata，讓瀏覽器僅僅預(yù)加載視頻的基本信息，如尺寸、時(shí)長(zhǎng)、以及一些關(guān)鍵的幀。這樣的話，在開始播放之前，瀏覽器可以提前計(jì)算視頻的顯示尺寸。
既然一切都OK了！讓我們看看mp4是不是能正常播放。下載最新版的Google Chrome 38.0瀏覽器，打開網(wǎng)頁(yè)，猛戳一下播放按鈕。
等等~，等等~，不對(duì)，怎么只有聲音沒有畫面，明明是mp4格式的文件呀？使用暴風(fēng)影音試了一下，是有畫面的呀！
辛辛苦苦又在網(wǎng)上搜了一番，花了整整586秒，終于找到了答案。mp4視頻需要h.264編碼格式才會(huì)有圖像的。
找了一個(gè) h.264 編碼格式的 mp4 試了一下，不錯(cuò)，確實(shí)有圖像了！看了半天，原來(lái)是一部老外的電影，嘰里咕嚕一陣，一句話也沒聽懂。那O(∩_∩)O~，能否提供中文字幕呢，這樣就不必費(fèi)老大勁去聽了！
HTML5中，通過在video元素添加track元素為視頻添加字幕。字幕文件有兩種格式：WebVTT和TTML。WebVTT是Web視頻文本軌跡（Web Video Text Track），是UTF-8編碼格式的文本文件；TTML是時(shí)序文本標(biāo)記語(yǔ)言（Timed Text Markup Language），是XML格式的文件。兩種文件的具體格式，已經(jīng)超出我們的討論范圍。
video元素支持添加多個(gè)track元素，不同的track元素鏈接到不同的字幕文件。用戶可以在各個(gè)字幕間進(jìn)行切換。
<video poster = "img/beauty.jpg" controls preload>
<track src="en_track.vtt" kind="subtitles" srclang="en" label="English" default>
<track src="cn_track.vtt" kind="captions" srclang="zh" label="簡(jiǎn)體中文">
</video>
track元素中，src屬性指定字幕文件的URL；srclang屬性字幕文件的語(yǔ)言類型，若kind 屬性值是 "subtitles" 時(shí)，該屬性必需的；label 屬性指定字幕標(biāo)簽，每個(gè)字幕元素必需設(shè)置一個(gè)唯一不重復(fù)的標(biāo)簽，切換字幕時(shí)，會(huì)顯示標(biāo)簽的名稱；kind指定字幕內(nèi)容類型，只能是subtitles、captions、descriptions、chapters、metadata 之一；default屬性指定是否是默認(rèn)字幕，如果一個(gè)都沒指定，將不會(huì)自動(dòng)顯示字幕。
除了字幕外，我還希望對(duì)視頻進(jìn)行過多的控制，比如讓視頻自動(dòng)播放、循環(huán)播放、默認(rèn)靜音，以及視頻窗口的尺寸等等，這些都能做到嗎？
這已經(jīng)不是什么事了，video 元素已經(jīng)提供了相關(guān)屬性，根據(jù)需要設(shè)置相應(yīng)的屬性就可以了。這些屬性及含義見表 23：
HTML中嵌入視頻和音頻代碼
哦，原來(lái)這么簡(jiǎn)單呀！那就到此為止吧，網(wǎng)頁(yè)中嵌入視頻的全部代碼都在這里，就打包給你吧！
<video width="300" poster="img/beauty.jpg" controls preload autoplay loop muted>
<source src="media/vedio.mp4">
<source src="media/vedio.ogg">
<track src="en_track.vtt" kind="subtitles" srclang="en" label="English" default>
<track src="cn_track.vtt" kind="captions" srclang="zh" label="簡(jiǎn)體中文">
你的瀏覽器已經(jīng)老掉牙了，不支持video，還不趕快使用現(xiàn)代瀏覽器O(∩_∩)O~！
</video>
睜大眼睛一看，卻只有7行代碼。然而，就這區(qū)區(qū)7行代碼，可把他折磨得夠嗆。
看著這一切都全部搞定，他仰望著天空，長(zhǎng)長(zhǎng)呼了一口氣，顯得是那么的放松，那么的愜意。此時(shí)，他閉上眼睛，在自己的夢(mèng)幻世界里遨游！
有了在網(wǎng)頁(yè)中嵌入視頻的經(jīng)歷，要在網(wǎng)頁(yè)中嵌入音頻，那簡(jiǎn)直就是小菜一碟了。只要把vedio元素?fù)Q成 audio 元素，就全部搞定。
但需要了解的是，audio 所支持的音頻格式只有Ogg Vorbis、mp3 和 wav。還要知道，由于音頻沒有畫面，也就沒有 width、height、poster 屬性，而其他屬性都支持，并且跟視頻的含義相同。
網(wǎng)頁(yè)中嵌入音頻的代碼如下：
<audio controls preload autoplay loop muted>
<source src="media/audio.mp3">
<source src="media/audio.wav">
<source src="media/audio.ogg">
你的瀏覽器已經(jīng)老掉牙了，不支持audio，還不趕快使用現(xiàn)代瀏覽器O(∩_∩)O~！
</audio>
個(gè)小伙伴在頭條私信給小編留言：在Word中想插入優(yōu)酷視頻或土豆視頻網(wǎng)站中的一些網(wǎng)絡(luò)視頻，該怎么插入？
其實(shí)在我們工作中，需要在Word中插入視頻大部分人都是直接把視頻下載到本地，插入本地視頻，較少插入網(wǎng)絡(luò)視頻。因?yàn)椴迦刖W(wǎng)絡(luò)視頻可能會(huì)因?yàn)榫W(wǎng)速的原因比較慢。但要插入網(wǎng)絡(luò)視頻其實(shí)也不難。掌握以下幾個(gè)步驟就可以了。
1、打開優(yōu)酷，找一個(gè)簡(jiǎn)短的視頻打開看看。在視頻底部欄的左邊有一個(gè)分享按鈕。鼠標(biāo)移到這個(gè)分享按鈕上面，我們可以看到可以將視頻分享到QQ空間、微博、貼吧等這些網(wǎng)站。還可以復(fù)制代碼。
2、下面我們點(diǎn)擊“復(fù)制Html代碼”按鈕。
3、復(fù)制成功后，按鈕變成藍(lán)色并彈出復(fù)制成功對(duì)話框，點(diǎn)擊“確定”按鈕即可。
4、打開Word文檔 -- 點(diǎn)擊菜單欄的“插入”選項(xiàng)卡 -- 點(diǎn)擊“媒體”工具組中的“聯(lián)機(jī)視頻”按鈕。
5、彈出“插入視頻”對(duì)話框 -- 在“來(lái)自視頻嵌入代碼”后面的空白處粘貼我們復(fù)制的Html代碼，然后點(diǎn)擊后面的“插入”按鈕。
6、插入完成之后，可以看到Word文檔中有一個(gè)播放按鈕，點(diǎn)擊播放按鈕即可立即播放。但缺少一張封面，我們可以自定義視頻封面。
7、選中視頻框 -- 單擊鼠標(biāo)右鍵 -- 在右鍵菜單中選擇“更改圖片”--“來(lái)自文件”。
8、彈出“插入圖片”對(duì)話框 -- 選擇你要作為視頻封面的圖片路徑位置，點(diǎn)擊“插入”按鈕即可。
9、視頻封面就添加好了，點(diǎn)擊中間的播放按鈕就可以播放。插入一個(gè)視頻封面看起來(lái)是不是更加美觀吶？
由于小編的網(wǎng)絡(luò)比較慢，加上gif錄屏有大小限制，這里就不給大家錄制動(dòng)圖了。大家可將本教程收藏轉(zhuǎn)發(fā)起來(lái)，對(duì)照著步驟自己去練幾遍，很容易就掌握了。有問題可在評(píng)論區(qū)留言或私信找我哦~
覺得教程不錯(cuò)請(qǐng)隨意來(lái)個(gè)贊賞哦~您的贊賞、關(guān)注、轉(zhuǎn)發(fā)、評(píng)論、點(diǎn)贊、收藏都是對(duì)小編的鼓勵(lì)與支持，謝謝您！
內(nèi)容合作請(qǐng)聯(lián)系郵箱：allen_lyq@163.com.
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
