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

頻、視頻的格式

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

提取碼：td80

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

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

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

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

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

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

那什么是編碼呢？

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

首先說"碼"，我們的計(jì)算機(jī)中的數(shù)據(jù)最終都是通過二進(jìn)制的數(shù)字（0和1）來存儲或計(jì)算的，這些0或1就是數(shù)碼。無論代碼、程序、圖片、音樂、視頻、文字等的存儲與計(jì)算都不例外。不管多么復(fù)雜或簡單的文件，在計(jì)算機(jī)看來，都是一大堆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)書頁，畫面中的小人會(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，這又是為什么呢？

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

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

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

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

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

為頁面添加音頻、視頻

添加音頻使用<audio></audio>標(biāo)簽，這個(gè)標(biāo)簽被所有瀏覽器支持，是html5推薦的音頻導(dǎo)入標(biāo)簽，但是遺憾的是在html4標(biāo)準(zhǔn)中是不被支持的或者說是非法的。

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

簡單來說呢，一個(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)載請附上原文出處鏈接及本聲明。

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

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

是不是很麻煩，其實(shí)html5比html4更簡單，功能更強(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>

頁面效果如下：

其中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í)為頁面添加音頻和視頻。

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

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

頁面效果如下:

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

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

頁面效果如下：

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

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

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

HTML完整學(xué)習(xí)目錄

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

家好，我是小繪！

你們知道嗎，在Word文檔中不只能插入文本和圖片，如果想讓你的Word文檔變得更加的豐富，我們可以插入一些Flash動(dòng)畫，網(wǎng)絡(luò)視頻等，那么接下來跟小繪一起來看看怎么在word文檔中插入動(dòng)畫和視頻吧~

一、Word文檔中插入Flash動(dòng)畫

第一步我們先打開word，然后點(diǎn)擊「插入」，選擇「文本」，再選擇「對象」，點(diǎn)擊「由文件創(chuàng)建」，選擇「瀏覽」選中Flash動(dòng)畫的路徑位置，然后插入。

我們需要復(fù)制一下文件路徑，然后點(diǎn)擊「確定」后返回文檔，鼠標(biāo)點(diǎn)擊「右鍵」選擇插入的對象，再點(diǎn)擊「屬性」，在「Movie」后面的空白處粘貼一下剛剛復(fù)制的路徑。接下來關(guān)閉「屬性」，再進(jìn)入「開發(fā)工具」，點(diǎn)擊「控件后」取消「設(shè)計(jì)模式」。

二、Word中插入網(wǎng)絡(luò)視頻

如果我們想在word里插入愛奇藝或者優(yōu)酷等一些網(wǎng)絡(luò)視頻，我們可以先在網(wǎng)站視頻上點(diǎn)擊「分享」按鈕，然后「復(fù)制Html」代碼。回到Word文檔中，點(diǎn)擊「插入」，然后選擇「媒體」再點(diǎn)擊「聯(lián)機(jī)視頻」，在「來自視頻嵌入代碼」后面空白處，將代碼粘貼進(jìn)去，然后點(diǎn)擊后面的「插入」按鈕。

怎么樣，你學(xué)會(huì)了嗎？

更多打印知識、職場小技巧記得

多跟小繪在留言區(qū)溝通哦~

老板給我1天時(shí)間做的Excel產(chǎn)品報(bào)價(jià)表格，我只用了2分鐘

個(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è)簡短的視頻打開看看。在視頻底部欄的左邊有一個(gè)分享按鈕。鼠標(biāo)移到這個(gè)分享按鈕上面，我們可以看到可以將視頻分享到QQ空間、微博、貼吧等這些網(wǎng)站。還可以復(fù)制代碼。

2、下面我們點(diǎn)擊“復(fù)制Html代碼”按鈕。

3、復(fù)制成功后，按鈕變成藍(lán)色并彈出復(fù)制成功對話框，點(diǎn)擊“確定”按鈕即可。

4、打開Word文檔 -- 點(diǎn)擊菜單欄的“插入”選項(xiàng)卡 -- 點(diǎn)擊“媒體”工具組中的“聯(lián)機(jī)視頻”按鈕。

5、彈出“插入視頻”對話框 -- 在“來自視頻嵌入代碼”后面的空白處粘貼我們復(fù)制的Html代碼，然后點(diǎn)擊后面的“插入”按鈕。

6、插入完成之后，可以看到Word文檔中有一個(gè)播放按鈕，點(diǎn)擊播放按鈕即可立即播放。但缺少一張封面，我們可以自定義視頻封面。

7、選中視頻框 -- 單擊鼠標(biāo)右鍵 -- 在右鍵菜單中選擇“更改圖片”--“來自文件”。

8、彈出“插入圖片”對話框 -- 選擇你要作為視頻封面的圖片路徑位置，點(diǎn)擊“插入”按鈕即可。

9、視頻封面就添加好了，點(diǎn)擊中間的播放按鈕就可以播放。插入一個(gè)視頻封面看起來是不是更加美觀吶？

由于小編的網(wǎng)絡(luò)比較慢，加上gif錄屏有大小限制，這里就不給大家錄制動(dòng)圖了。大家可將本教程收藏轉(zhuǎn)發(fā)起來，對照著步驟自己去練幾遍，很容易就掌握了。有問題可在評論區(qū)留言或私信找我哦~

覺得教程不錯(cuò)請隨意來個(gè)贊賞哦~您的贊賞、關(guān)注、轉(zhuǎn)發(fā)、評論、點(diǎn)贊、收藏都是對小編的鼓勵(lì)與支持，謝謝您！

內(nèi)容合作請聯(lián)系郵箱：allen_lyq@163.com.

在線咨詢

上一篇：迷你發(fā)光字制造方法和技巧有什么？
下一篇：HTML中的定位

您的項(xiàng)目需求

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

整合營銷服務(wù)商

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

HTML完整學(xué)習(xí)目錄

家好，我是小繪！

一、Word文檔中插入Flash動(dòng)畫

您的項(xiàng)目需求