HTML5播放video或者audio

眾所周知，在HTML5誕生之前網頁上要播放一段視訊基本都是依靠flash外掛，而HTML5誕生了<video>和<audio>標籤，使得在HTML5上播放視訊或者音訊就像顯示圖片那麼輕鬆，就像顯示圖片用的 <img src=””>一樣，現在嵌入視訊音訊只要<video src=””>或<audio src=””>。

我這裡舉了一個例子，這裡只使用了HTML5最常見的<video><audio>的API。

HTML顯示了<video>這個控制元件的用法。

<!DOCTYPE html>
<head>
<meta charset=“UTF-8”>
<title>HTML5 Media DEMO</title>
<script type=“text/javascript” src=“js/media.js”></script>
</head>
<body>
<h2>HTML5 media 演示</h2>
<!– 指定一個video元素用於播放視訊–>
<!– autoplay 表明一旦頁面載入則自動播放這段媒體 –>
<!– loop表明自動迴圈播放這段媒體 –>
<!– width 和 height是播放視訊的螢幕大小 –>
<video id=“video” width=“400” height=“300” autoplay loop>
</video>
<br/>
視訊地址：<input type=“text” id=“videoUrl”/>
<input id=“playButton” type=“button” onclick=“playOrPauseVideo()” value=” 播放”/>
<!– 這一小塊區域專門用於顯示已經播放時間和總時間，單位（秒），由javascript來負責指定這個區間的內容 –>
<span id=“time”></span>
</body>

然後javascript就負責響應點選事件，以及更新時間區域（已經播放時間/總時間）的資訊，非常淺顯易懂。

/**
* This file is confidential by Charles.Wang
* Copyright belongs to Charles.wang
* You can make contact with Charles.Wang (charles_wang888@126.com)
*/
function playOrPauseVideo(){
//從文字框中取得使用者輸入的視訊url
var videoUrl= document.getElementById(“videoUrl”).value;
console.log(“videoUrl: “+videoUrl);
//取得video控制元件
var video = document.getElementById(“video”);
//為video控制元件繫結事件處理函式,這些事件都是HTML5的已經定義好的事件，最後一個引數boolean型表示事件是否要”冒泡”
//這裡對應“更新時間”的事件，然後在<span id=”time”>中顯示時間相關資訊
video.addEventListener(“timeupdate” , function (){
//取得要顯示time的區域
var timeDisplay=document.getElementById(“time”);
//用秒為單位來顯示當前的播放進度,currentTime和
timeDisplay.innerHTML=Math.floor(video.currentTime)+“/”+Math.floor(video.duration)+“(秒)”;
},
false
);
//這裡因為要考慮到暫停和繼續兩種狀態，所以必須先判斷媒體的當前狀態
//如果video當時是暫停狀態（這是HTML5 audio(video)的內建屬性）
if (video.paused){
//暫停分2種情況，一種是播放舊媒體的結束的停止，一種是已經開始播放一段時間後的暫停
//對於舊的媒體結束的情況，那麼判斷條件就是使用者輸入的地址不同於當前地址（因為使用者選擇播放新媒體）
if(videoUrl != video.src){
//那麼吧當前video的src屬性配置為使用者所輸入的地址
video.src=videoUrl;
//然後讓媒體重新裝載媒體進行播放,這個load()方法也是video自帶的方法
video.load();
}
//如果是播放了一段時間的暫停，那麼很簡單，只要播放之就可以了，不需要任何改變，這時候video的parsed屬性被自動設定為false
else{
video.play();
}
document.getElementById(“playButton”).value=“暫停”;
}
else{
video.pause();
document.getElementById(“playButton”).value=“播放”;
}
}

然後我們就可以輸入要播放的視訊了，這裡我選擇的是mp4，它會被Chrome所支援（注意，不是所有的媒體格式都被支援，比如我開始用的wmv格式就不被支援），為了讓瀏覽器支援這段播放，必須在瀏覽器裡面進行配置：

開啟Google Chrome瀏覽器，輸入chrome://flags,找到並且啟用“對 <video> 元素啟用 Media Source API。”，如下圖所示：

然後在頁面上，就可以盡情的輸入URL並且欣賞視訊了，注意，如果要看本地儲存的視訊，必須用file:/// 協議：

本文轉自 charles_wang888 51CTO部落格，原文連結：http://blog.51cto.com/supercharles888/856384，如需轉載請自行聯絡原作者

HTML5播放video或者audio

相關文章