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播放，暂停控制的例子：

 

 

[html] view plaincopy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <link rel="stylesheet" href="styles.css">  
  4.   <title>Audio cue</title>  
  5.   
  6.   <audio id="clickSound">  
  7.     <source src="johann_sebastian_bach_air.ogg">  
  8.     <source src="johann_sebastian_bach_air.mp3">  
  9.   </audio>  
  10.   
  11.   <button id="toggle" onclick="toggleSound()">Play</button>  
  12.   
  13.   <script type="text/javascript">  
  14.     function toggleSound() {  
  15.         var music = document.getElementById("clickSound");  
  16.         var toggle = document.getElementById("toggle");  
  17.   
  18.         if (music.paused) {  
  19.           music.play();  
  20.           toggle.innerHTML = "Pause";  
  21.         }  
  22.         else {  
  23.           music.pause();  
  24.           toggle.innerHTML ="Play";  
  25.         }  
  26.     }  
  27.   </script>  
  28.   
  29. </html>  


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

 

 

一个鼠标放到video上面即暂停的例子：

 

[html] view plaincopy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <link rel="stylesheet" href="styles.css">  
  4.   <title>Mouseover Video</title>  
  5.   
  6.   <video id="movies" onmouseover="this.play()" onmouseout="this.pause()" autobuffer="true"  
  7.     width="400px" height="300px">  
  8.     <source src="Intermission-Walk-in.ogv" type='video/ogg; codecs="theora, vorbis"'>  
  9.     <source src="Intermission-Walk-in_512kb.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>  
  10.   </video>  
  11.   
  12.   <h1>Point at the video to play it!</h1>  
  13. </html>  


更加复杂的：定时video截屏的例子，使用到了frames。

 

 

[html] view plaincopy
 
    1. <!DOCTYPE html>  
    2. <html>  
    3.   <link rel="stylesheet" href="styles.css">  
    4.   <title>Video Timeline</title>  
    5.   
    6.   <video id="movies" autoplay oncanplay="startVideo()" onended="stopTimeline()" autobuffer="true"  
    7.     width="400px" height="300px">  
    8.     <source src="Intermission-Walk-in.ogv" type='video/ogg; codecs="theora, vorbis"'>  
    9.     <source src="Intermission-Walk-in_512kb.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>  
    10.   </video>  
    11.   
    12.   <canvas id="timeline" width="400px" height="300px">  
    13.   
    14.   <script type="text/javascript">  
    15.   
    16.     // # of milliseconds between timeline frame updates  
    17.     var updateInterval = 5000;  
    18.   
    19.     // size of the timeline frames  
    20.     var frameWidth = 100;  
    21.     var frameHeight = 75;  
    22.   
    23.     // number of timeline frames  
    24.     var frameRows = 4;  
    25.     var frameColumns = 4;  
    26.     var frameGrid = frameRows * frameColumns;  
    27.   
    28.     // current frame  
    29.     var frameCount = 0;  
    30.   
    31.     // to cancel the timer at end of play  
    32.     var intervalId;  
    33.   
    34.     var videoStarted = false;  
    35.   
    36.     function startVideo() {  
    37.   
    38.         // only set up the timer the first time the  
    39.         // video is started  
    40.         if (videoStarted)  
    41.           return;  
    42.   
    43.         videoStarted = true;  
    44.   
    45.         // calculate an initial frame, then create  
    46.         // additional frames on a regular timer  
    47.         updateFrame();  
    48.         intervalId = setInterval(updateFrame, updateInterval);  
    49.   
    50.         // set up a handler to seek the video when a frame  
    51.         // is clicked  
    52.         var timeline = document.getElementById("timeline");  
    53.         timeline.onclick = function(evt) {  
    54.             var offX = evt.layerX - timeline.offsetLeft;  
    55.             var offY = evt.layerY - timeline.offsetTop;  
    56.   
    57.             // calculate which frame in the grid was clicked  
    58.             // from a zero-based index  
    59.             var clickedFrame = Math.floor(offY / frameHeight) * frameRows;  
    60.             clickedFrame += Math.floor(offX / frameWidth);  
    61.   
    62.             // find the actual frame since the video started  
    63.             var seekedFrame = (((Math.floor(frameCount / frameGrid)) *  
    64.                                 frameGrid) + clickedFrame);  
    65.   
    66.             // if the user clicked ahead of the current frame  
    67.             // then assume it was the last round of frames  
    68.             if (clickedFrame > (frameCount % 16))  
    69.                 seekedFrame -= frameGrid;  
    70.   
    71.             // can't seek before the video  
    72.             if (seekedFrame < 0)  
    73.               return;  
    74.   
    75.             // seek the video to that frame (in seconds)  
    76.             var video = document.getElementById("movies");  
    77.             video.currentTime = seekedFrame * updateInterval / 1000;  
    78.   
    79.             // then set the frame count to our destination  
    80.             frameCount = seekedFrame;  
    81.         }  
    82.     }  
    83.   
    84.     // paint a representation of the video frame into our canvas  
    85.     function updateFrame() {  
    86.         var video = document.getElementById("movies");  
    87.         var timeline = document.getElementById("timeline");  
    88.   
    89.         var ctx = timeline.getContext("2d");  
    90.   
    91.         // calculate out the current position based on frame  
    92.         // count, then draw the image there using the video  
    93.         // as a source  
    94.         var framePosition = frameCount % frameGrid;  
    95.         var frameX = (framePosition % frameColumns) * frameWidth;  
    96.         var frameY = (Math.floor(framePosition / frameRows)) * frameHeight;  
    97.         ctx.drawImage(video, 0, 0, 400, 300, frameX, frameY, frameWidth, frameHeight);  
    98.   
    99.         frameCount++;  
    100.     }  
    101.   
    102.     // stop gathering the timeline frames  
    103.     function stopTimeline() {  
    104.         clearInterval(intervalId);  
    105.     }  
    106.   
    107.   </script>  
    108.   
    109. </html>  
posted @ 2015-12-20 10:42  WTWLV  阅读(403)  评论(0)    收藏  举报