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

介绍

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

本篇是HTML5介绍的第四篇,主要介绍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 具体代码和源文件下载地址: 下载

相关文章:



有关编译器优化的更完整信息,请参阅优化通知