HTML5多媒体API简介

最新推荐文章于 2024-08-15 00:50:59 发布

MeAndJack

最新推荐文章于 2024-08-15 00:50:59 发布

阅读量6.5k

点赞数 1

分类专栏： HTML5 文章标签： html5 video stylesheet function audio api

本文链接：https://blog.csdn.net/temotemo/article/details/7493447

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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