1. API介紹
多媒體API是HTML5非常重要的特性之一，用戶可以直接通過代碼<video src="xyz.ogv" type=video/ogg"></video> 來插入一個video，而在傳統的HTML4中需要寫<object type="video/ogg" data="xyz.ogv"><param name="src" value="xyz.ogv"></object>一長串代碼。通常所指的HTML5多媒體API是Audio 和 Video，目前瀏覽器支持情況以及支持相應的codec如下圖所示：
2. Video API介紹
一個典型的HTML5 video API代碼如下：<video src="movie.ogg" width="320" height="240" controls="controls“></video>
在HTML5裏面是怎麼實現對video文件的加載和控制的呢，HTML通過一個類似Zip文件的方式來管理video文件，如下圖所示。
一個video文件管理元素包含了audio tracks, video tracks, 和額外的metadata。 Audio tracks 和video tracks是用來實時控制多媒體文件播放的。Tracks的控制屬性主要有：
元數據是用來保存相應的歌手，藝術家，屬性等信息。
•3. 多媒體 API實例
一個Audio播放，暫停控制的例子：<!DOCTYPE html>
<html>
<link rel="stylesheet" href="styles.css">
<title>Audio cue</title>
<audio id="clickSound">
<source src="johann_sebastian_bach_air.ogg">
<source src="johann_sebastian_bach_air.mp3">
</audio>
<button id="toggle" οnclick="toggleSound()">Play</button>
<script type="text/javascript">
function toggleSound() {
var music = document.getElementById("clickSound");
var toggle = document.getElementById("toggle");
if (music.paused) {
music.play();
toggle.innerHTML = "Pause";
}
else {
music.pause();
toggle.innerHTML ="Play";
}
}
</script>
</html>具體代碼和源文件下載地址： 下載
一個鼠標放到video上面即暫停的例子：
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="styles.css">
<title>Mouseover Video</title>
<video id="movies" οnmοuseοver="this.play()" οnmοuseοut="this.pause()" autobuffer="true"
width="400px" height="300px">
<source src="Intermission-Walk-in.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="Intermission-Walk-in_512kb.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
<h1>Point at the video to play it!</h1>
</html>更加複雜的：定時video截屏的例子，使用到了frames。
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="styles.css">
<title>Video Timeline</title>
<video id="movies" autoplay οncanplay="startVideo()" οnended="stopTimeline()" autobuffer="true"
width="400px" height="300px">
<source src="Intermission-Walk-in.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="Intermission-Walk-in_512kb.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
<canvas id="timeline" width="400px" height="300px">
<script type="text/javascript">
// # of milliseconds between timeline frame updates
var updateInterval = 5000;
// size of the timeline frames
var frameWidth = 100;
var frameHeight = 75;
// number of timeline frames
var frameRows = 4;
var frameColumns = 4;
var frameGrid = frameRows * frameColumns;
// current frame
var frameCount = 0;
// to cancel the timer at end of play
var intervalId;
var videoStarted = false;
function startVideo() {
// only set up the timer the first time the
// video is started
if (videoStarted)
return;
videoStarted = true;
// calculate an initial frame, then create
// additional frames on a regular timer
updateFrame();
intervalId = setInterval(updateFrame, updateInterval);
// set up a handler to seek the video when a frame
// is clicked
var timeline = document.getElementById("timeline");
timeline.onclick = function(evt) {
var offX = evt.layerX - timeline.offsetLeft;
var offY = evt.layerY - timeline.offsetTop;
// calculate which frame in the grid was clicked
// from a zero-based index
var clickedFrame = Math.floor(offY / frameHeight) * frameRows;
clickedFrame += Math.floor(offX / frameWidth);
// find the actual frame since the video started
var seekedFrame = (((Math.floor(frameCount / frameGrid)) *
frameGrid) + clickedFrame);
// if the user clicked ahead of the current frame
// then assume it was the last round of frames
if (clickedFrame > (frameCount % 16))
seekedFrame -= frameGrid;
// can't seek before the video
if (seekedFrame < 0)
return;
// seek the video to that frame (in seconds)
var video = document.getElementById("movies");
video.currentTime = seekedFrame * updateInterval / 1000;
// then set the frame count to our destination
frameCount = seekedFrame;
}
}
// paint a representation of the video frame into our canvas
function updateFrame() {
var video = document.getElementById("movies");
var timeline = document.getElementById("timeline");
var ctx = timeline.getContext("2d");
// calculate out the current position based on frame
// count, then draw the image there using the video
// as a source
var framePosition = frameCount % frameGrid;
var frameX = (framePosition % frameColumns) * frameWidth;
var frameY = (Math.floor(framePosition / frameRows)) * frameHeight;
ctx.drawImage(video, 0, 0, 400, 300, frameX, frameY, frameWidth, frameHeight);
frameCount++;
}
// stop gathering the timeline frames
function stopTimeline() {
clearInterval(intervalId);
}
</script>
</html>參考文章： Pro HTML5 Programming 具體代碼和源文件下載地址： 下載