HTML5多媒体API简介
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" onclick="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" onmouseover="this.play()" onmouseout="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 oncanplay="startVideo()" onended="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 具体代码和源文件下载地址： 下载