前端入門-html 如何在網(wǎng)頁中使用視頻音頻

篇介紹了前端入門——html 中如何使用圖片,今天講下如何使用視頻和音頻等多媒體元素，它們能讓你的網(wǎng)頁更加豐富，讀者相對于文字圖片更愿意觀看視頻和音頻或其它多媒體。在本教程中，您將了解到不同的多媒體格式，以及如何在您的網(wǎng)頁中使用它們。

什么是多媒體？

是多種媒體的綜合，一般包括文本，聲音和圖像等多種媒體形式。在計算機系統(tǒng)中，多媒體指組合兩種或兩種以上媒體的一種人機交互式信息交流和傳播媒體。使用的媒體包括文字、圖片、照片、聲音、動畫和影片，以及程式所提供的互動功能。

在因特網(wǎng)上，您會經(jīng)常發(fā)現(xiàn)嵌入網(wǎng)頁中的多媒體元素，現(xiàn)代瀏覽器已支持多種多媒體格式。

多媒體文件格式

多媒體元素（比如視頻和音頻）存儲于媒體文件中。多媒體元素也擁有帶有不同擴展名字的文件格式，比如 .swf、.wmv、.mp3 以及 .mp4。具體有哪些格式可以參考 w3cshool 網(wǎng)站的介紹，https://www.w3cschool.cn/html5/html5-video.html ，https://www.w3cschool.cn/html5/html5-audio.html。

HTML5 Video(視頻)

直到現(xiàn)在，網(wǎng)頁上仍然不存在一項顯示視頻的標(biāo)準(zhǔn)。今天，大多數(shù)視頻是通過插件（比如 Flash）來顯示的。然而，并非所有瀏覽器都擁有同樣的插件。HTML5 規(guī)定了一種通過 video 元素來包含視頻的標(biāo)準(zhǔn)方法。

語法如下：

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的瀏覽器不支持Video標(biāo)簽。
</video>

<video> 元素提供了播放、暫停和音量控件來控制視頻。

同時 <video> 元素也提供了 width 和 height 屬性控制視頻的尺寸。如果設(shè)置的高度和寬度，所需的視頻空間會在頁面加載時保留。如果沒有設(shè)置這些屬性，瀏覽器不知道視頻的大小，瀏覽器就不能在加載時保留特定的空間，頁面就會根據(jù)原始視頻的大小而改變。

<video> 與 </video> 標(biāo)簽之間插入的內(nèi)容是提供給不支持 video 元素的瀏覽器顯示的。元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式。一個頁面可以使用多個<video> 標(biāo)簽，<video> 元素支持三種視頻格式： MP4, WebM, 和 Ogg。

顯示效果：

HTML5Audio(音頻)

和視頻一樣沒有統(tǒng)一的標(biāo)準(zhǔn)，各個瀏覽器都不一樣。HTML5 規(guī)定了在網(wǎng)頁上嵌入音頻元素的標(biāo)準(zhǔn)，即使用 <audio> 元素。通過使用HTML5中的audio功能，你可以實現(xiàn)與flash相同的功能，即回放、跳轉(zhuǎn)、緩沖等。

語法如下：

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  您的瀏覽器不支持 audio 元素。
</audio>

control 屬性供添加播放、暫停和音量控件。在<audio> 與 </audio> 之間你需要插入瀏覽器不支持的<audio>元素的提示文本。允許使用多個 <source> 元素。<source> 元素可以鏈接不同的音頻文件，瀏覽器將使用第一個支持的音頻文件。目前, <audio>元素支持三種音頻格式文件: MP3, Wav, 和 Ogg。

顯示效果：

HTML 插件——輔助應(yīng)用程序

插件（Plug-in）是擴展瀏覽器標(biāo)準(zhǔn)功能的計算機程序，插件被設(shè)計用于許多不同的目的：

運行 Java 小程序
運行 ActiveX 控件
顯示 Flash 電影
顯示視頻或音頻
顯示地圖
掃描病毒
驗證銀行賬號

1、<object> 元素

它旨在將插件（例如 Java applet、PDF 閱讀器和 Flash 播放器）嵌入網(wǎng)頁中，但也可以用于將 HTML 包含在 HTML 中。

如下：

插入一個網(wǎng)頁片段

<object width="100%" height="500px" data="snippet.html"></object>

或者插入一個圖片

<object data="audi.jpeg"></object>

播放一個視頻

<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="movie.mp4">
<param name="controller" value="true">
</object>

播放一個音頻

<object height="100" width="100" data="song.mp3"></object>

2、<embed> 元素

插入一個flash文件

<embed width="400" height="50" src="bookmark.swf">

插入html片段

<embed width="100%" height="500px" src="snippet.html">

播放一個音頻

<embed height="100" width="100" src="song.mp3" />

插入一個圖片

<embed src="audi.jpeg">

注意：
大多數(shù)瀏覽器不再支持 Java 小程序和插件。
大多數(shù)現(xiàn)代瀏覽器關(guān)閉了對 Flash 的支持。
我們可以使用 <video> 和 <audio> 標(biāo)簽來顯示視頻和音頻

視頻和音頻如何兼容大多瀏覽器

如下視頻代碼，HTML 5 <video> 元素會嘗試播放以 mp4、ogg 或 webm 格式中的一種來播放視頻。如果均失敗，則回退到 <embed> 元素。

HTML 5 + <object> + <embed> 是最好的解決辦法。

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

如下音頻代碼，HTML5 <audio> 元素會嘗試以 mp3 或 ogg 來播放音頻。如果失敗，代碼將回退嘗試 <embed> 元素。

HTML 5 + <embed> 是最好的解決辦法。

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
  <embed height="100" width="100" src="song.mp3" />
</audio>

到此你以及了解了如何在網(wǎng)頁中使用視頻音頻及其它多媒體控件，趕快自己試試，祝你學(xué)習(xí)愉快。

參考文獻：https://www.w3school.com.cn/html/html_video.asp

上篇：前端入門——html 中如何使用圖片

下篇：前端入門——html 表格的使用

家好

這里是有新媒之聲給大家?guī)淼膆tml5教程

話不多說直接看效果圖

首先我們先創(chuàng)建一個html

我們再建一個存放視頻背景的文件夾video

我們給建好的html寫入基本代碼

然后我們再把作為背景網(wǎng)站的視頻拷貝到video這個文件夾下

我們在給剛剛建好的html寫入視頻代碼

效果如下

并未網(wǎng)頁全屏，而且視頻重復(fù)播放

別急現(xiàn)在我們給視頻添加樣式，使它成為名副其實的視頻背景

我們給視頻代碼寫一個class="index-video"

我們在head頭寫上css樣式

我們現(xiàn)在再來看看效果

現(xiàn)在網(wǎng)頁視頻是以全屏播放并且你可以在上面寫上其它的效果，比如說導(dǎo)航欄之類的，因為現(xiàn)在視頻已經(jīng)成為了我們網(wǎng)頁的背景。

現(xiàn)在我們在head加上跳轉(zhuǎn)代碼

現(xiàn)在就讓我們回顧一下需要用到那些代碼和注意的要去

body體里

<body>

</body>

css樣式

.index-video {

position: fixed; right: 0; bottom: 0;

min-width: 100%; min-height: 100%;

width: auto;

height: auto;

z-index: -100;

}

</style>

跳轉(zhuǎn)代碼

//

<title>炫酷跳轉(zhuǎn)演示站</title>//為網(wǎng)頁標(biāo)題

position 屬性規(guī)定元素的定位類型。

position語法：

position : static absolute relative

position參數(shù)：

static : 　無特殊定位，對象遵循HTML定位規(guī)則

absolute : 　將對象從文檔流中拖出，使用left，right，top，bottom等屬性進行絕對定位。而其層疊通過css z-index屬性定義。此時對象不具有邊距，但仍有補白和邊框

relative : 　對象不可層疊，但將依據(jù)left，right，top，bottom等屬性在正常文檔流中偏移位置

position說明：

設(shè)置對象的定位方式，可以讓布局層容易位置絕對定位，控制盒子對象更加準(zhǔn)確。

min-width: 最小寬度; min-height: 最小高度;

width: auto;//寬度為自動

height: auto;//高度為自動

z-index: -100;

//當(dāng)你定義的CSS中有position屬性值為absolute、relative或fixed，

用z-index此取值方可生效。

此屬性參數(shù)值越大，則被層疊在最上面。

完整代碼

天小編與大家分享一個下載B站視頻的

網(wǎng)址

相信大家很多人都是B站的粉絲

二次元

鬼畜視頻等等

但是現(xiàn)在

B站也逐漸成為一個學(xué)習(xí)的網(wǎng)站

各種各樣的學(xué)習(xí)資源

應(yīng)有盡有

無所不有

如果碰到自己喜歡的視頻還是下載下來吧，雖然緩存也是一個不錯的選擇，但是萬一哪一天找不到視頻了，下載視頻還是最穩(wěn)妥的選擇

上圖是軟件安裝的界面，我們上圖中就能看出來軟件的風(fēng)格

由于是安裝在D盤，我們也不需要去改變其中的設(shè)置，只需要點擊開始安裝即可，稍后我們選擇安裝完畢，點擊打開

整體而言，軟件安裝過程還是比較簡單的，我們按照上面的步驟仔細安裝即可

打開軟件之后，我們就可以發(fā)現(xiàn)軟件小清新的界面，我們這個時候只需要復(fù)制我們想要下載視頻的鏈接到上面即可，軟件會自動視頻我們復(fù)制的鏈接，我們我們只需要輕輕敲下回車鍵，這樣我們就可以找到我們需要下載的視頻

上圖中我們也可以自由選擇我們需要的視頻清晰度，我們可以選擇1080、480不同種類的清晰度，我們可以選擇1080最清晰的即可

當(dāng)然我們也可以單單選擇音頻文件進行下載，還有XML的彈幕文件

上圖就是我們下載的過程，下載完成之后，右下角就會出現(xiàn)下載成功的提示，我們按照提示打開文件夾即可，這樣整個下載過程就算完成了

微信公眾號：燦哥工作室 后臺回復(fù)：B站視頻下載

在線咨詢

上一篇：DIV/CSS] css3在頁面中插入內(nèi)容
下一篇：「PHP基礎(chǔ)知識」在頁面中顯示“Hello World！”

您的項目需求

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

整合營銷服務(wù)商