HTML5多媒体API简介

来源：互联网发布：js怎么创建list集合编辑：程序博客网时间：2024/05/21 06:44

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 具体代码和源文件下载地址：下载