使用HTML5在網(wǎng)頁(yè)中嵌入音頻和視頻播放的基本方法

2020-03-24 17:58:09

字體：大中小

供稿：網(wǎng)友

HTML5 特性，包括原生音頻和視頻支持而無(wú)需 Flash。HTML5 audio 和 video 標(biāo)簽讓我們給站點(diǎn)添加媒體變得簡(jiǎn)單。我們只需要設(shè)置 src 屬性來(lái)識(shí)別媒體資源，包含 controls 屬性讓用戶可以播放和暫停媒體。嵌入視頻
下面是在 Web 頁(yè)面中嵌入視頻文件最簡(jiǎn)單的形式：XML/HTML Code復(fù)制內(nèi)容到剪貼板
videosrc= foo.mp4 width= 300 height= 200 controls Yourbrowserdoesnotsupportthe video element. /video
目前的 HTML5 規(guī)范草案還沒(méi)有指定瀏覽器應(yīng)該在 video 標(biāo)簽中支持哪種視頻格式。但是最常用的視頻格式是：Ogg：帶有 Thedora 視頻編碼器和 Vorbis 音頻編碼器的 Ogg 文件。
mpeg4：帶有 H.264 視頻編碼器和 AAC 音頻編碼器的 MPEG4 文件。
我們可以使用帶有媒體類型和其他屬性的 source 標(biāo)簽指定媒體文件。video 元素允許使用多個(gè) source 元素，瀏覽器會(huì)使用第一個(gè)認(rèn)可的格式：XML/HTML Code復(fù)制內(nèi)容到剪貼板
body videowidth= 300 height= 200 controlsautoplay sourcesrc= /html5/foo.ogg type= video/ogg / sourcesrc= /html5/foo.mp4 type= video/mp4 / Yourbrowserdoesnotsupportthe video element. /video /body /html
Video 屬性規(guī)范
HTML5 video 標(biāo)簽可以使用多個(gè)屬性控制外觀和感覺(jué)以及各種控制功能：

controls 如果指定這個(gè)屬性，就允許用戶控制視頻播放，包括音量控制，快進(jìn)，暫停或者恢復(fù)播放。
src 要嵌入的視頻 URL。可選，可以在 video 塊中使用 source 元素替代來(lái)指定要嵌入的視頻。

嵌入音頻
HTML5 支持的 audio 標(biāo)簽用于在如下所示的 HTML 或 XHTML 文檔中嵌入語(yǔ)音內(nèi)容。XML/HTML Code復(fù)制內(nèi)容到剪貼板
audiosrc= foo.wav controlsautoplay Yourbrowserdoesnotsupportthe audio element. /audio
當(dāng)前的 HTML 草案規(guī)范還沒(méi)有指定瀏覽器應(yīng)該在 audio 標(biāo)簽中支持哪種音頻格式。但是最常用的音頻格式是 ogg，mp3 和 wav。我們可以使用帶媒體類型以及其他屬性的的 source 標(biāo)簽指定媒體。Audio 元素允許使用多個(gè) source 元素，并且瀏覽器會(huì)使用第一個(gè)認(rèn)可的格式：XML/HTML Code復(fù)制內(nèi)容到剪貼板
audiocontrolsautoplay sourcesrc= /html5/audio.ogg type= audio/ogg / sourcesrc= /html5/audio.wav type= audio/wav / Yourbrowserdoesnotsupportthe audio element. /audio /body /html
Audio 屬性規(guī)范HTML5 audio 標(biāo)簽可以使用多個(gè)屬性來(lái)控制外觀，感受以及各種控制功能：

controls 如果指定這個(gè)屬性，表示允許用戶控制音頻播放，包括音量控制，快進(jìn)以及暫停/恢復(fù)播放。
src 要嵌入的音頻 URL。可選，可以在音頻塊里面使用 source 元素指定要嵌入的音頻來(lái)替代。

處理媒體事件
HTML5 audio 和 video 標(biāo)簽可以用多個(gè)屬性利用 JavaScript 控制各種控制功能：

functionPlayVideo(){ varv=document.getElementsByTagName( video )[0]; v.play(); } /script /head html body form videowidth= 300 height= 200 src= /html5/foo.mp4 Yourbrowserdoesnotsupportthe video element. /video inputtype= button onclick= PlayVideo(); value= Play / /form /body /html
配置服務(wù)器媒體類型
大多數(shù)服務(wù)器默認(rèn)都沒(méi)使用正確的 MIME 類型提供 Ogg 或 mp4 媒體，因此我們可能需要添加適當(dāng)?shù)呐渲谩?br>復(fù)制代碼代碼如下:AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：用HTML5制作煙火效果的教程

下一篇：總結(jié)html嵌套實(shí)例用法