網頁

▼

用HTML5玩影片

現在玩IT的人,工具越來越容易了。一個client site的HTML5可以如此強,幾乎快取代FLASH  Action Script,自己也來玩玩看。

http://5b21.comyr.com/HTML-Pro/av/videoTimeline.html








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

at