移动Web应用程序开发 HTML5篇 (四) 多媒体API

红薯 发布于 2012/02/27 22:25
阅读 1K+
收藏 11

介绍

本系列博客将主要介绍如今大红大紫的移动Web应用程序开发最重要的三个工具:HTML5,JavaScript, CSS3。

本篇是HTML5介绍的第四篇,主要介绍HTML5的多媒体API。

相关文章:

移动Web应用程序开发 HTML5篇 (一) HTML5简介

移动Web应用程序开发 HTML5篇 (二) 新功能介绍和测试

移动Web应用程序开发 HTML5篇 (三) Canvas 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>

具体代码和源文件下载地址:下载

文章出处:http://software.intel.com/zh-cn/blogs/2012/02/27/web-html5-api/

加载中
返回顶部
顶部