可以用video標(biāo)簽插入視頻。
專注于為中小企業(yè)提供網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)邗江免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了1000多家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
1、新建html文件，在body標(biāo)簽中添加video標(biāo)簽，為video標(biāo)簽添加“src”屬性，屬性值為視頻的位置，這時(shí)視頻就被插入到網(wǎng)頁中去了：
2、為video標(biāo)簽添加“controls”屬性，不需要添加屬性值，這時(shí)視頻中將會(huì)出現(xiàn)視頻控制按鈕：
3、video默認(rèn)的寬高是視頻自身的寬高，可以通過添加“width”和“height”屬性自定義視頻的寬高：
4、為video添加“autoplay”屬性，屬性值為“autoplay”，這時(shí)當(dāng)視頻加載完成時(shí)會(huì)自動(dòng)播放：
HTML5和瀏覽器對(duì)視頻和音頻文件格式都有嚴(yán)格的要求，僅有少數(shù)幾種視頻和音頻格式的文件能夠同時(shí)滿足HML5和瀏覽器的需求。
因此想要在網(wǎng)頁中嵌入視頻和音頻文件，首先要選擇正確的視頻和音頻文件格式。下面將對(duì)HTML5中視頻和音頻的一些常見格式以及瀏覽器的支持情況做具體介紹。
1、HTML5支持的視頻格式在HTML5中嵌入的視頻格式主要包括ogg、mpeg4、wehm等，具體介紹如下。
ogg：一種開源的視頻封裝容器，其視頻文件擴(kuò)展名為ogg，里面可以封裝vobris音頻編碼或者theora視頻編碼，同時(shí)ogg文件也能將音頻編碼和視頻編碼進(jìn)行混合封裝。
mpeg4：目前最流行的視頻格式，其視頻文件擴(kuò)展名為mp4。
同等條件下，mpeg4格式的視頻質(zhì)量較好，但它的專利被MPEG－LA公司控制，任何支持播放mpeg4視頻的設(shè)備，都必須有一張MPEG－LA頒發(fā)的許可證。
目前MPEG－LA規(guī)定，只要是互聯(lián)網(wǎng)上免費(fèi)播放的視頻，均可以無償獲得使用許可證。Webm：由Google發(fā)布的一個(gè)開放、免費(fèi)的媒體文件格式，其視頻文件擴(kuò)展名為webm。
由于webm格式的視頻質(zhì)量和mpeg4較為接近，并且沒有專利限制等問題，webm已經(jīng)被越來越多的人所使用。推薦了解傳智播客web前端培訓(xùn)6．5版本課程。
2．HTML5支持的音頻格式在HTML5中嵌入的音頻格式主要包括ogg、mp3、wav等，具體介紹如下。
ogg：當(dāng)ogg文件只封裝音頻編碼時(shí)，它就會(huì)變成為一個(gè)音頻文件。ogg音頻文件擴(kuò)展名為ogg。ogg音頻格式類似于mp3音頻格式，不同的是，ogg格式完全免費(fèi)并且沒有專利限制。
同等條件下，ogg格式音頻文件的音質(zhì)、體積大小優(yōu)于mp3音頻格式。mp3：目前主流的音頻格式，其音頻文件擴(kuò)展名為mp3。
同mpeg4視頻格式一樣，mp3音頻格式也存在專利、版權(quán)等諸多的限制，但因?yàn)楦鞔笥布峁┥痰闹С质沟胢p3依靠其豐富的資源、良好的兼容性仍舊保持較高的使用率。
wav：微軟公司（Microsoft）開發(fā)的一種聲音文件格式，其擴(kuò)展名為wav。作為無損壓縮的音頻格式，wav的音質(zhì)是三種音頻格式文件中最好的，但其體積也是最大的。
wav音頻格式最大的優(yōu)勢(shì)是被Windows平臺(tái)及其應(yīng)用程序廣泛支持，是標(biāo)準(zhǔn)的Windows文件。
擴(kuò)展資料：
html5的智能表單：
表單是實(shí)現(xiàn)用戶與頁面后臺(tái)交互主要組成部分，HTML5在表單的設(shè)計(jì)上功能更加強(qiáng)大。
input類型和屬性的多樣性大大地增強(qiáng)了HTML可表達(dá)的表單形式，再加上新增加的一些表單標(biāo)簽，使得原本需要JavaScript來實(shí)現(xiàn)的控件，可以直接使用HTML5的表單來實(shí)現(xiàn)。
一些如內(nèi)容提示、焦點(diǎn)處理、數(shù)據(jù)驗(yàn)證等功能，也可以通過HTML5的智能表單屬性標(biāo)簽來完成。
!DOCTYPE html
html lang="en"
head
meta charset="utf-8"
/head
body
!-- video src="mp4.mp4" autoplay controls/video --
我們的視頻支持 ogg mp4 webM 三種視頻格式
video controls autoplay
source src="mp4.mp4"/
source src="movie04.ogg"/
您的瀏覽器不支持視頻播放
/video
/body
/html
通過html5中的video標(biāo)簽添加視頻文件。
1、新建html文件，如圖所示，在body標(biāo)簽中添加video標(biāo)簽，為video標(biāo)簽設(shè)置“src”屬性，屬性值是視頻文件地址，這里以html同一目錄下的“movie.mp4”視頻為例：
2、此時(shí)的視頻只會(huì)顯示一個(gè)封面，并沒有控制按鈕，這時(shí)為video標(biāo)簽添加“controls”屬性，如圖所示，不需要添加屬性值，可以看到視頻中出現(xiàn)了常用的控制按鈕：
3、直接插入的視頻顯示寬和高是視頻本身默認(rèn)的寬和高，這時(shí)可以給video添加我們想要的寬和高，這里以寬度400和高度300為例，添加屬性“width”，屬性值為“400”，添加屬性“height”，屬性值為“300”：
4、這時(shí)視頻默認(rèn)是加載完成后等待用戶點(diǎn)擊播放按鈕再播放，如果需要加載完成后自動(dòng)播放，可以給video添加屬性“autoplay”，屬性值為“autoplay”，這時(shí)視頻加載完成后就會(huì)自動(dòng)播放：
許多時(shí)髦的網(wǎng)站都提供視頻。HTML5 提供了展示視頻的標(biāo)準(zhǔn)。
檢測(cè)您的瀏覽器是否支持 HTML5 視頻：
Check
Web 上的視頻
直到現(xiàn)在，仍然不存在一項(xiàng)旨在網(wǎng)頁上顯示視頻的標(biāo)準(zhǔn)。
今天，大多數(shù)視頻是通過插件（比如 Flash）來顯示的。然而，并非所有瀏覽器都擁有同樣的插件。
HTML5 規(guī)定了一種通過 video 元素來包含視頻的標(biāo)準(zhǔn)方法。
視頻格式
當(dāng)前，video 元素支持三種視頻格式：
格式
IE
Firefox
Opera
Chrome
Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No
Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件
MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件
WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件
如何工作
如需在 HTML5 中顯示視頻，您所有需要的是：
video src="movie.ogg" controls="controls" /video
TIY
control 屬性供添加播放、暫停和音量控件。
包含寬度和高度屬性也是不錯(cuò)的主意。
video 與 /video 之間插入的內(nèi)容是供不支持 video 元素的瀏覽器顯示的：
實(shí)例
video src="movie.ogg" width="320" height="240" controls="controls" Your browser does not support the video tag. /video
TIY
上面的例子使用一個(gè) Ogg 文件，適用于Firefox、Opera 以及 Chrome 瀏覽器。
要確保適用于 Safari 瀏覽器，視頻文件必須是 MPEG4 類型。
video 元素允許多個(gè) source 元素。source 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個(gè)可識(shí)別的格式：
實(shí)例
video width="320" height="240" controls="controls" source src="movie.ogg" type="video/ogg" source src="movie.mp4" type="video/mp4" Your browser does not support the video tag. /video
TIY
Internet Explorer
Internet Explorer 8 不支持 video 元素。在 IE 9 中，將提供對(duì)使用 MPEG4 的 video 元素的支持。
video 標(biāo)簽的屬性
屬性
值
描述
autoplay autoplay 如果出現(xiàn)該屬性，則視頻在就緒后馬上播放。
controls controls 如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。
height pixels 設(shè)置視頻播放器的高度。
loop loop 如果出現(xiàn)該屬性，則當(dāng)媒介文件完成播放后再次開始播放。
preload preload
如果出現(xiàn)該屬性，則視頻在頁面加載時(shí)進(jìn)行加載，并預(yù)備播放。
如果使用 "autoplay"，則忽略該屬性。
src url 要播放的視頻的 URL。
width pixels 設(shè)置視頻播放器的寬度。
在html網(wǎng)頁中添加視頻過程如下：
1、如圖，在項(xiàng)目文件中放置mp4格式的視頻，因?yàn)镠5只支持這類視頻，avi格式的不可以。
2、然后在自己的HTML編輯軟件建一個(gè)HTML5的文件，這里就用Hbuilder建立了。
3、然后添加video元素即可插入視頻，最好用autoplay設(shè)置自動(dòng)播放，controls設(shè)置控制欄。
4、source可以連接對(duì)應(yīng)的視頻文件資源，記得視頻資源路徑要寫正確。
5、這樣，等到HTML網(wǎng)頁加載之后視頻即可自動(dòng)的播放。
6、并且左邊有播放按鈕，視頻進(jìn)度控制條等工具。
7、右邊可以全屏播放，調(diào)節(jié)聲音大小，如果是放在服務(wù)器上面還可以下載喲，非常方便。
最常用的向HTML中插入視頻的方法有兩種，一種是古老的object/object標(biāo)簽，一種是html5中的video/video標(biāo)簽。
前者的兼容性沒得說，但是使用起來不太方便，后者使用起來很方便，但是兼容性讓人頭疼。
雖然后者兼容性存在很多問題，但是因?yàn)槭褂煤芊奖?，符合未來網(wǎng)頁設(shè)計(jì)發(fā)展的趨勢(shì)，因此我們以后者為主要的插入視頻的方法，因?yàn)樗嫒菪缘膯栴}，前者作為輔助。
重慶分公司
重慶分公司
