HTML5程序设计 音频和视频

浏览器支持性检测

 var hasVideo = !!(document.createElement('video').canPlayType);
  alert(hasVideo);

也可以在audio元素或video元素中放入备选内容，如果浏览器不支持该元素，这些备选内容就会显示在元素对应的位置。

<video src="video.webm" controls>
        Your Browser does not support HTML5 video.
    </video>

包含Audio元素的HTML界面

<audio controls src="Source/johann_sebastian_bach_air.ogg">
        An audio clip form Johann Sebastian Bach
    </audio>

代码中的controls特性告诉浏览器显示通用的用户控件，包括开始、停止、跳播以及音量控制。如果不指定controls特性，用户将无法播放页面上的音频。

声明多个source

在指明src的时候，我们可以声明多个src，用作备用。如果浏览器不支持播放第一种格式的文件，它会自动选择播放第二种格式。

<audio controls>
        <source src="Source/johann_sebastian_bach_air.ogg" />
        <source src="Source/johann_sebastian_bach_air.mp3" />
        An audio clip form Johann Sebastian Bach
    </audio>

注意来源列表的排放顺序，要按照用户体验由高到低或者服务器消耗由低到高列出。

使用自动播放特性

  <audio autoplay controls>
        <source src="Source/johann_sebastian_bach_air.ogg" />
        <source src="Source/johann_sebastian_bach_air.mp3" />
        An audio clip form Johann Sebastian Bach
    </audio>

 注意并不是每种设备都支持自动播放，IOS就不支持。

用脚本控制播放

  <audio id="clickSound" controls>
        <source src="Source/johann_sebastian_bach_air.ogg" />
        <source src="Source/johann_sebastian_bach_air.mp3" />
        An audio clip form Johann Sebastian Bach
    </audio>
    <button id="toggle" onclick="toggleSound()">Paly</button>
    <script type="text/javascript">
        function toggleSound() {
            var music = document.getElementById("clickSound");
            var goggle = document.getElementById("toggle");
            if (music.paused) {
                music.play();
                toggle.innerHTML = "Pause";
            }
            else {
                music.pause();
                toggle.innerHTML = "Paly";
            }
        }
    </script>

鼠标悬停播放视频

 <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>

综合应用：创建视频时序查看器

<!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>

 

posted @ 2013-04-13 20:35  Gyoung  阅读(1758)  评论(0)  编辑  收藏  举报