整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
網(wǎng)頁中添加視頻、聲音、動畫等，可以增強用戶體驗。在HTML5之前，為網(wǎng)頁添加多媒體的唯一辦法，就是使用第三方的插件（如，Adobe Flash等）。
HTML5中，提供了對多媒體的原生支持，只需通過 video 元素，就可以向網(wǎng)頁嵌入視頻、電影或音頻資源，通過 audio 元素向網(wǎng)頁嵌入音頻資源，省時省力。
HTML中嵌入視頻和音頻代碼
在HTML5時代，在網(wǎng)頁中嵌入視頻非常簡單，只需要一個 video 元素，并設(shè)置它的 src 屬性，使其鏈接一個視頻地址就可以完全搞定了，這個太esay了
<video src="media/vedio.mp4"></video>
把這個網(wǎng)站在IE8中打開一看，網(wǎng)站上除了一片空白外，什么也沒有，這是為什么呢？
原來 video 是HTML5最新引入的元素，并不是所有瀏覽器都支持它，IE8及以下版本都無法識別 video 標簽。如果瀏覽器不識別 video標簽，則會忽略它，當做什么都沒有。這就是網(wǎng)站上一片空白的原因。
這個問題好解決，只需在 video 標簽之間放置文本信息，不支持 video 標簽的老瀏覽器，會顯示 video 標簽之間的文本信息，以提示用戶瀏覽器不支持 video，就這么簡單！
<video src="media/vedio.mp4">
你的瀏覽器已經(jīng)老掉牙了，不支持video，還不趕快使用現(xiàn)代瀏覽器O(∩_∩)O~！
</video>
在IE8上打開一看，確實顯示了提示文本，這下好多了，至少用戶知道自己的瀏覽器不能播放視頻，該換瀏覽器了。
下載了Opera瀏覽器的最新版本25.0，打開一看，怎么還是一片空白外！Opera瀏覽器明明是支持video標簽的，那又是為什么呢？
這個就得從視頻的編碼格式說起了。video 元素支持三種視頻格式：Ogg、MP4、WebM。
Ogg是帶有Theora視頻編碼和Vorbis音頻編碼的文件，后綴名為 .ogg；MP4是帶有H.264視頻編碼和AAC音頻編碼的MP4文件，后綴名為 .mp4；WebM是VP8視頻編碼和Vorbis音頻編碼的文件，后綴名為 .webm。
這個Opera瀏覽器呢，它可以支持ogg，但不支持mp4。由于Opera支持video標簽，故video標簽之間的文本信息沒有顯示出來，但它不支持ogg，所以就不進行播放，最終導致頁面出現(xiàn)一片空白。這下可怎么辦呢？
其實辦法有的是，我們可以從網(wǎng)上下載一副圖像，放到視頻播放窗口，如果視頻無法播放，就顯示這張圖片，是不是更好呢？從網(wǎng)上下載一張美女圖片，干脆叫beauty.jpg吧。那這個圖像怎么添加到視頻窗口呢？
video標簽有個poster 屬性，就是專門在視頻窗口放置圖片的。poster是一個video的占位符，無論什么情況下，只要視頻還沒有播放（視頻下載過程中、視頻不存在、不支持該視頻類型、用戶點擊播放按鈕前），就會顯示該圖像，可以看做是視頻播放之前插入的宣傳畫或海報。
<video src="media/vedio.mp4" poster = "img/beauty.jpg">
你的瀏覽器已經(jīng)老掉牙了，不支持video，還不趕快使用現(xiàn)代瀏覽器O(∩_∩)O~！
</video>
在Opera瀏覽器上刷新一下，真的有一個美女沖著自己微笑呢。雖然視頻沒有播放出來，這回心情卻是好多了。
那我可不能一天到晚只看美女呀，視頻還是還是要想辦法播放出來的。既然Opera瀏覽器不支持mp4，我們就換成需要ogg吧，這樣就肯定沒問題了。
我想了想，這個辦法不好，萬一某個瀏覽器只支持支持ogg，不支持mp4呢。這年頭，什么都缺，就是不缺點子，隨便在網(wǎng)上一搜，辦法就有了。
在 video 元素中添加 source 元素，就可以解決這個問題。在source 元素中，通過 src 屬性指定視頻的地址，通過 type 屬性指定視頻的類型，以幫助瀏覽器決定是否能播放該視頻。并且，在 video 元素中可以添加任意多個source 元素，讓不同的 source 元素鏈接到不同的視頻文件。
這樣的話，當瀏覽器發(fā)現(xiàn) video 元素時，首先會查看它本身是否定義了 src 屬性。如果沒有，就會檢查 source 元素。瀏覽器會逐個查看這些視頻源，直到找到一個可以播放的視頻。一旦找到，就會播放它并忽略其他的視頻源。我們干脆添加兩個source，一個是mp4，一個是ogg，這下視頻是一定能播放出來了。
<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瀏覽器上又刷新一下，只有美女沖著我微笑，視頻還是沒播放出來。唉，太粗心了，忘記添加播放視頻的控件了。
在video標簽中，通過添加controls 屬性來為視頻添加播放控件，方便用戶執(zhí)行播放、暫停操作和音量控制。
<video poster = "img/beauty.jpg" controls>
（此處略去500字…）
</video>
在Opera瀏覽器上又刷新一下，效果真的不一樣，這次不僅看到美女，還看到了視頻控件。用鼠標猛戳一下那個播放按鈕，哈哈，不錯，真的聽到美妙的旋律。我們的ogg文件，終于播放出來了，讓我們好好享受一下吧O(∩_∩)O。
聽了一會，忽然一想，不對呀，我剛才點了播放按鈕后，等了半天才聽到聲音。能不能我一點播放按鈕，就立即播放呢？
原來視頻也是需要下載緩存的，點擊播放按鈕后，首先緩存，然后才播放的。那能不能在頁面加載的同時就緩存呢。這樣，用戶點擊播放后，就不必等待了。
這當然可以，在video標簽中，通過添加preload屬性來為視頻添加預加載功能，在頁面加載的同時加載視頻。
<video poster = "img/beauty.jpg" controls preload>
（此處略去500字…）
</video>
關(guān)于 preload 屬性，稍微再啰嗦一點，就是可以把它設(shè)置為 metadata，讓瀏覽器僅僅預加載視頻的基本信息，如尺寸、時長、以及一些關(guān)鍵的幀。這樣的話，在開始播放之前，瀏覽器可以提前計算視頻的顯示尺寸。
既然一切都OK了！讓我們看看mp4是不是能正常播放。下載最新版的Google Chrome 38.0瀏覽器，打開網(wǎng)頁，猛戳一下播放按鈕。
等等~，等等~，不對，怎么只有聲音沒有畫面，明明是mp4格式的文件呀？使用暴風影音試了一下，是有畫面的呀！
辛辛苦苦又在網(wǎng)上搜了一番，花了整整586秒，終于找到了答案。mp4視頻需要h.264編碼格式才會有圖像的。
找了一個 h.264 編碼格式的 mp4 試了一下，不錯，確實有圖像了！看了半天，原來是一部老外的電影，嘰里咕嚕一陣，一句話也沒聽懂。那O(∩_∩)O~，能否提供中文字幕呢，這樣就不必費老大勁去聽了！
HTML5中，通過在video元素添加track元素為視頻添加字幕。字幕文件有兩種格式：WebVTT和TTML。WebVTT是Web視頻文本軌跡（Web Video Text Track），是UTF-8編碼格式的文本文件；TTML是時序文本標記語言（Timed Text Markup Language），是XML格式的文件。兩種文件的具體格式，已經(jīng)超出我們的討論范圍。
video元素支持添加多個track元素，不同的track元素鏈接到不同的字幕文件。用戶可以在各個字幕間進行切換。
<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="簡體中文">
</video>
track元素中，src屬性指定字幕文件的URL；srclang屬性字幕文件的語言類型，若kind 屬性值是 "subtitles" 時，該屬性必需的；label 屬性指定字幕標簽，每個字幕元素必需設(shè)置一個唯一不重復的標簽，切換字幕時，會顯示標簽的名稱；kind指定字幕內(nèi)容類型，只能是subtitles、captions、descriptions、chapters、metadata 之一；default屬性指定是否是默認字幕，如果一個都沒指定，將不會自動顯示字幕。
除了字幕外，我還希望對視頻進行過多的控制，比如讓視頻自動播放、循環(huán)播放、默認靜音，以及視頻窗口的尺寸等等，這些都能做到嗎？
這已經(jīng)不是什么事了，video 元素已經(jīng)提供了相關(guān)屬性，根據(jù)需要設(shè)置相應的屬性就可以了。這些屬性及含義見表 23：
HTML中嵌入視頻和音頻代碼
哦，原來這么簡單呀！那就到此為止吧，網(wǎng)頁中嵌入視頻的全部代碼都在這里，就打包給你吧！
<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="簡體中文">
你的瀏覽器已經(jīng)老掉牙了，不支持video，還不趕快使用現(xiàn)代瀏覽器O(∩_∩)O~！
</video>
睜大眼睛一看，卻只有7行代碼。然而，就這區(qū)區(qū)7行代碼，可把他折磨得夠嗆。
看著這一切都全部搞定，他仰望著天空，長長呼了一口氣，顯得是那么的放松，那么的愜意。此時，他閉上眼睛，在自己的夢幻世界里遨游！
有了在網(wǎng)頁中嵌入視頻的經(jīng)歷，要在網(wǎng)頁中嵌入音頻，那簡直就是小菜一碟了。只要把vedio元素換成 audio 元素，就全部搞定。
但需要了解的是，audio 所支持的音頻格式只有Ogg Vorbis、mp3 和 wav。還要知道，由于音頻沒有畫面，也就沒有 width、height、poster 屬性，而其他屬性都支持，并且跟視頻的含義相同。
網(wǎng)頁中嵌入音頻的代碼如下：
<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>
Audio 對象
Audio 對象HTML5中新增的。。
Audio 對象代表著 HTML <audio> 元素。
訪問 Audio 對象
你可以使用getElementById()來訪問 <audio> 元素：
var x = document.getElementById("myAudio");嘗試一下
創(chuàng)建 Audio 對象
你可以使用document.createElement()方法創(chuàng)建 <audio> 元素:
var x = document.createElement("AUDIO");
Audio 對象屬性
| 屬性 | 描述 |
|---|---|
| audioTracks | 返回表示可用音頻軌道的 AudioTrackList 對象 |
| autoplay | 設(shè)置或返回是否在加載完成后隨即播放音頻 |
| buffered | 返回表示音頻已緩沖部分的 TimeRanges 對象 |
| controller | 返回表示音頻當前媒體控制器的 MediaController 對象 |
| controls | 設(shè)置或返回音頻是否顯示控件（比如播放/暫停等） |
| crossOrigin | 設(shè)置或返回音頻的 CORS 設(shè)置 |
| currentSrc | 回當前音頻的 URL |
| currentTime | 設(shè)置或返回音頻中的當前播放位置（以秒計） |
| defaultMuted | 設(shè)置或返回音頻默認是否靜音 |
| defaultPlaybackRate | 設(shè)置或返回音頻的默認播放速度 |
| duration | 返回當前音頻的長度（以秒計） |
| ended | 返回音頻的播放是否已結(jié)束 |
| error | 返回表示音頻錯誤狀態(tài)的 MediaError 對象 |
| loop | 設(shè)置或返回音頻是否應在結(jié)束時重新播放 |
| mediaGroup | 設(shè)置或返回音頻所屬的組合（用于連接多個音頻元素） |
| muted | 設(shè)置或返回音頻是否靜音 |
| networkState | 返回音頻的當前網(wǎng)絡狀態(tài) |
| paused | 設(shè)置或返回音頻是否暫停 |
| playbackRate | 設(shè)置或返回音頻播放的速度 |
| played | 返回表示音頻已播放部分的 TimeRanges 對象 |
| preload | 設(shè)置或返回音頻是否應該在頁面加載后進行加載 |
| readyState | 返回音頻當前的就緒狀態(tài) |
| seekable | 返回表示音頻可尋址部分的 TimeRanges 對象 |
| seeking | 返回用戶是否正在音頻中進行查找 |
| src | 設(shè)置或返回音頻元素的當前來源 |
| textTracks | 返回表示可用文本軌道的 TextTrackList 對象 |
| volume | 設(shè)置或返回音頻的音量 |
Audio 對象方法
| 方法 | 描述 |
|---|---|
| addTextTrack() | 在音頻中添加一個新的文本軌道 |
| canPlayType() | 檢查瀏覽器是否可以播放指定的音頻類型 |
| fastSeek() | 在音頻播放器中指定播放時間。 |
| getStartDate() | 返回一個新的Date對象，表示當前時間軸偏移量 |
| load() | 重新加載音頻元素 |
| play() | 開始播放音頻 |
| pause() | 暫停當前播放的音頻 |
標準屬性和事件
Canvas 對象同樣支持標準 屬性 和 事件。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
TML 音頻/視頻 DOM 參考手冊
HTML5 DOM 為 <audio> 和 <video> 元素提供了方法、屬性和事件。
這些方法、屬性和事件允許您使用 JavaScript 來操作 <audio> 和 <video> 元素。
HTML 音頻/視頻 方法
| 方法 | 描述 |
|---|---|
| addTextTrack() | 向音頻/視頻添加新的文本軌道。 |
| canPlayType() | 檢測瀏覽器是否能播放指定的音頻/視頻類型。 |
| load() | 重新加載音頻/視頻元素。 |
| play() | 開始播放音頻/視頻。 |
| pause() | 暫停當前播放的音頻/視頻。 |
HTML 音頻/視頻屬性
| 屬性 | 描述 |
|---|---|
| audioTracks | 返回表示可用音頻軌道的 AudioTrackList 對象。 |
| autoplay | 設(shè)置或返回是否在加載完成后隨即播放音頻/視頻。 |
| buffered | 返回表示音頻/視頻已緩沖部分的 TimeRanges 對象。 |
| controller | 返回表示音頻/視頻當前媒體控制器的 MediaController 對象。 |
| controls | 設(shè)置或返回音頻/視頻是否顯示控件（比如播放/暫停等）。 |
| crossOrigin | 設(shè)置或返回音頻/視頻的 CORS 設(shè)置。 |
| currentSrc | 返回當前音頻/視頻的 URL。 |
| currentTime | 設(shè)置或返回音頻/視頻中的當前播放位置（以秒計）。 |
| defaultMuted | 設(shè)置或返回音頻/視頻默認是否靜音。 |
| defaultPlaybackRate | 設(shè)置或返回音頻/視頻的默認播放速度。 |
| duration | 返回當前音頻/視頻的長度（以秒計）。 |
| ended | 返回音頻/視頻的播放是否已結(jié)束。 |
| error | 返回表示音頻/視頻錯誤狀態(tài)的 MediaError 對象。 |
| loop | 設(shè)置或返回音頻/視頻是否應在結(jié)束時重新播放。 |
| mediaGroup | 設(shè)置或返回音頻/視頻所屬的組合（用于連接多個音頻/視頻元素）。 |
| muted | 設(shè)置或返回音頻/視頻是否靜音。 |
| networkState | 返回音頻/視頻的當前網(wǎng)絡狀態(tài)。 |
| paused | 設(shè)置或返回音頻/視頻是否暫停。 |
| playbackRate | 設(shè)置或返回音頻/視頻播放的速度。 |
| played | 返回表示音頻/視頻已播放部分的 TimeRanges 對象。 |
| preload | 設(shè)置或返回音頻/視頻是否應該在頁面加載后進行加載。 |
| readyState | 返回音頻/視頻當前的就緒狀態(tài)。 |
| seekable | 返回表示音頻/視頻可尋址部分的 TimeRanges 對象。 |
| seeking | 返回用戶是否正在音頻/視頻中進行查找。 |
| src | 設(shè)置或返回音頻/視頻元素的當前來源。 |
| startDate | 返回表示當前時間偏移的 Date 對象。 |
| textTracks | 返回表示可用文本軌道的 TextTrackList 對象。 |
| videoTracks | 返回表示可用視頻軌道的 VideoTrackList 對象。 |
| volume | 設(shè)置或返回音頻/視頻的音量。 |
HTML 音頻/視頻事件
| 事件 | 描述 |
|---|---|
| abort | 當音頻/視頻的加載已放棄時觸發(fā)。 |
| canplay | 當瀏覽器可以開始播放音頻/視頻時觸發(fā)。 |
| canplaythrough | 當瀏覽器可在不因緩沖而停頓的情況下進行播放時觸發(fā)。 |
| durationchange | 當音頻/視頻的時長已更改時觸發(fā)。 |
| emptied | 當目前的播放列表為空時觸發(fā)。 |
| ended | 當目前的播放列表已結(jié)束時觸發(fā)。 |
| error | 當在音頻/視頻加載期間發(fā)生錯誤時觸發(fā)。 |
| loadeddata | 當瀏覽器已加載音頻/視頻的當前幀時觸發(fā)。 |
| loadedmetadata | 當瀏覽器已加載音頻/視頻的元數(shù)據(jù)時觸發(fā)。 |
| loadstart | 當瀏覽器開始查找音頻/視頻時觸發(fā)。 |
| pause | 當音頻/視頻已暫停時觸發(fā)。 |
| play | 當音頻/視頻已開始或不再暫停時觸發(fā)。 |
| playing | 當音頻/視頻在因緩沖而暫停或停止后已就緒時觸發(fā)。 |
| progress | 當瀏覽器正在下載音頻/視頻時觸發(fā)。 |
| ratechange | 當音頻/視頻的播放速度已更改時觸發(fā)。 |
| seeked | 當用戶已移動/跳躍到音頻/視頻中的新位置時觸發(fā)。 |
| seeking | 當用戶開始移動/跳躍到音頻/視頻中的新位置時觸發(fā)。 |
| stalled | 當瀏覽器嘗試獲取媒體數(shù)據(jù)，但數(shù)據(jù)不可用時觸發(fā)。 |
| suspend | 當瀏覽器刻意不獲取媒體數(shù)據(jù)時觸發(fā)。 |
| timeupdate | 當目前的播放位置已更改時觸發(fā)。 |
| volumechange | 當音量已更改時觸發(fā)。 |
| waiting | 當視頻由于需要緩沖下一幀而停止時觸發(fā)。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
