HTML5裡引入的新標記<audio>和<video>實現了HTML對視頻播放和音頻播放的原生支持,有了這種原生的HTML5視頻播放器/音頻播放器,能將視頻/音頻嵌入到了網頁中。 如何嵌入視頻和音頻 在網頁裡嵌入HTML5音頻播放器和視頻播放器的方法非常簡單: - <video src="http://www.netyea.com/~j/theora_testsuite/320x240.ogg" controls autoplay loop>
- Your browser does not support the <code>video</code> element.
- </video>
複製代碼
上面這個例子顯示瞭如何播放一個視頻文件,並露出視頻播放控制按鈕。 下面這個例子是在HTML網頁裡嵌入音頻audio的方法: - <audio controls autoplay loop src="/test/audio.ogg">
- <p>Your browser does not support the <code>audio</code> element.</p>
- </audio>
複製代碼
這裡的src屬性裡可以填入一個音頻/視頻的URL,也可以是一個本地的文件。 - <audio src="audio.ogg" controls autoplay loop>
- <p>Your browser does not support the <code>audio</code> element </p>
- </audio>
複製代碼
下面是<audio>和<video>兩個標記上控制屬性的含義:
- controls : 顯示標準的HTML5 視頻/音頻播放器控制條、控制按鈕。
- autoplay : 讓文件自動播放。
- loop : 讓文件循環播放。
- <audio src="audio.mp3" preload="auto" controls></audio>
複製代碼
這裡的preload屬性是用來緩存大體積文件的。它有三個可選值:
- "none" 不緩存
- "auto" 緩存
- "metadata" 只緩存文件元信息
為了能夠兼容各種瀏覽器對不同媒體類型的支持,我們可以用多個<source>元素來提供多個不同的媒體類型。例如: - <video controls>
- <source src="foo.ogg" type="video/ogg">
- <source src="foo.mp4" type="video/mp4">
- Your browser does not support the <code>video</code> element.
- </video>
複製代碼
支持Ogg格式視頻流的瀏覽器可以播放Ogg文件。如果不支持,可以播放MPEG-4文件。查看各種瀏覽器對各種媒體類型的支持情況,請 查看這裡。 我們還可以指定播放使用的解碼器(codecs); 這樣就可以更精確的讓瀏覽器如何播放提供的視頻: - <video controls>
- <source src="foo.ogg" type="video/ogg; codecs=dirac, speex">
- Your browser does not support the <code>video</code> element.
- </video>
複製代碼
上面,我們指定了這個視頻需要使用Dirac 和Speex 解碼器。如果瀏覽器支持Ogg 格式,但沒有指定的解碼器,那麼,視頻將不會被加載。 如果沒有提供type屬性,則瀏覽器會向服務器詢問媒體類型,看看是否支持;如果不支持,瀏覽器將會去檢查下一個source屬性。
用JavaScript控制視頻/音頻播放 一旦視頻文件正確的嵌入到了HTML網頁裡,我們就可以使用JavaScript裡控制它的部分,獲取它的播放信息。比如,用JavaScript啟動視頻播放: - var v = document.getElementsByTagName("video")[0];
- v.play();
複製代碼
用JavaScript可控制HTML5視頻播放器實現播放、暫停、快進,快退、音量等。 - <audio id="demo" src="audio.mp3"></audio>
- <div>
- <button onclick="document.getElementById('demo').play()">播放</button>
- <button onclick="document.getElementById('demo').pause()">暂停</button>
- <button onclick="document.getElementById('demo').volume+=0.1">降低音量</button>
- <button onclick="document.getElementById('demo').volume-=0.1">提高音量</button>
- </div>
複製代碼
停止下載視頻文件 雖然我們可以使用pause()方法裡讓視頻文件停止播放,但瀏覽器並未停止下載媒體文件,除非它達到了一定的緩存量。 下面是讓瀏覽器如何停止下載視頻文件的方法: - var mediaElement = document.getElementById("myMediaElementID");
- mediaElement.pause();
- mediaElement.src='';
- //或
- mediaElement.removeAttribute("src");
複製代碼
通過刪除src屬性(或者設置為空值),這樣就能停止文件的網絡下載。
設定播放的時間點定位 我們可以指定視頻從某時某分某秒開始播放,這是通過設置currentTime屬性來實現。 我們可以通過seekable屬性來獲得視頻有效的播放時間範圍。它會返回一個TimeRanges對象,能夠告訴你有效的開始時間和結束時間。 - var mediaElement = document.getElementById('mediaElementID');
- mediaElement.seekable.start(0); //返回開始時間(秒)
- mediaElement.seekable.end(0); //返回結束時間(秒)
- mediaElement.currentTime = 122; //定位到第122秒播放
- mediaElement.played.end(0); //返回已經播放的時間長度(秒)
複製代碼
設定播放範圍 當在網頁裡嵌入視頻/音頻文件時,<audio>或<video>元素允許我們提供一些額外的信息來指定播放哪一時間段。實現的方法是在媒體文件後面跟隨(“#”)格式的信息。 它的具體語法是這樣的: 時間的表示方法可以使用秒數,也可以提供一個”時:分:秒“ 格式的時間(例如2:05:01)。
指定視頻從10秒開始播放,到20秒處結束。 http://www.netyea.com/video.ogg#t=,10.5 指定視頻從頭開始播放到10.5 秒處。 http://www.netyea.com/video.ogg#t=,02:00:00 指定視頻播放2小時。 http://www.netyea.com/video.ogg#t=60 指定視頻從第60秒開始播放,播放到結束。
如要加圖片預覽 - <video id="movie" preload controls loop poster="poster.png" width="640" height="360">
- <source src="aaa.mp4" type="video/mp4" />
- <source src="aaa.ogv" type="video/ogg" />
- <source src="aaa.webm" type="video/web" />
- 您的瀏覽器不支援HTML 5影片播放標籤<video>格式。
- Your browser doesn't support the <video> tag.
- </video>
複製代碼 標籤解釋
|