转载

html5 音频和视频（audio And video）

1、音频和视频

Web 上的视频

直到现在，仍然不存在一项旨在网页上显示视频的标准。

今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

视频格式

当前，video 元素支持三种视频格式：

格式 IE Firefox Opera Chrome Safari

Ogg No 3.5+ 10.5+ 5.0+ No

MPEG4 9.0+ No No 5.0+ 3.0+

WebM No 4.0+ 10.6+ 6.0+ No

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

Web 上的音频

直到现在，仍然不存在一项旨在网页上播放音频的标准。

今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。

HTML5 规定了一种通过 audio 元素来包含音频的标准方法。

audio 元素能够播放声音文件或者音频流。

音频格式

当前，audio 元素支持三种音频格式：

IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0

Ogg Vorbis √ √ √

MP3 √ √ √

Wav √ √ √

简单的video元素创建

<video src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" controls>         您的浏览器不支持video元素 </video>

视频默认的大小是300*150controls：显示视频的默认的控件

video标签的使用（带字幕文件）

<video src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg">          <!--此处添加字幕文件-->         <track label="English" kind="subtitles" srclang="en" src="./test.vtt" default>         您的浏览器不支持html5 video     </video>

<!--字幕文件的格式如下：--> <pre>  WEBVTT  1  00:00:00.240 --> 00:00:04.130  大家好 最近 Visual Studio 2013 做了一些更新  2  00:00:04.140 --> 00:00:08.110  那我们今天请到 twMVC 的 Dino  来为我们介绍这个更新里面关于 SASS Editor 的部分  3  00:00:18.120 --> 00:00:19.280 </pre>

audio元素创建

<audio controls src="http://www.w3school.com.cn/i/song.mp3"> </audio>

controls:显示通用的用户控件，包括开始，停止，跳播，以及音量控制

audio source元素

<audio controls>         <source src="http://www.w3school.com.cn/i/song.mp3">         <source src="http://www.w3school.com.cn/i/song.ogg">     </audio>

source提供多个音频元素，供浏览器自身播放能力自动选择，如果支持的不知一种，浏览器会选择第一个来源。

媒体的控制自动播放

<audio autoplay controls>         <source src="http://www.w3school.com.cn/i/song.mp3">         您的浏览器不支持audio     </audio>

autoplay:设置音频自动播放

2、可脚本话的视频和音频

判断浏览器支持情况

  //    判断浏览器是否支持audio或者video元素最简单的办法是用脚本动态创建它，然后检测特定的函数是否存在         var hasVideo = !!(document.createElement('video').canPlayType);

js中控制音频或者视频的内置的方法

      load()        加载音频或者视频文件，为播放做准备。通常情况下不需要调用，除非是动态创建的的元素，用来在在播放前加载          play()        加载（如果还未加载完成）并播放音频或视频文件，除非音频或视频已经暂停在其他位置了，否则从头开始          pause()        暂停处于播放的视频或者音频文件          canPlayType(type)  试video元素是否支持给定MIME类型的文件

js中控制音频或者视频的内置只读属性

     duration    整个媒体文件的播放时长，以s为单位，如果无法获取时长返回NaN         paused        如果媒体文件当前被暂停，则返回true,如果还未开始播放也返回true         ended        如果媒体文件已经播放完毕。返回true         startTime    返回最早的播放起始时间，一般是0.0，除非是从缓冲过的文件，并且一部分已经不在缓冲区了！         error        在发生错误的时候返回的错误代码         currentSrc    以字符串的形式返回当前正在播放的或已经加载的文件，对应于浏览器就是source选择的文件

js中可被脚本修改并影响播放的部分媒体元素的特性

     autoplay        将媒体文件设置为创建后自动播放，或者查询是否已经设置autoplay         loop            如果媒体文件已经播放完毕后能重新播放则返回true,或者媒体将媒体文件设置为循环播放         currentTime        以s为单位返回从开始播放到现在所用的时间，在播放过程中，设置currentTime来进行搜索，并定位到媒体文件特定的位置         controls        显示或隐藏用户控制界面，或者查询用户控制界面当前是否可见         volume            在0.0到1.0之前设置音频音量的值，或者查询当前音量的相对值         muted            为音频文件设置静音或者消除静音，或者检测当前是否为静音         autobuffer        通知播放器在媒体文件开始播放前是否进行缓冲加载，如果媒体文件设置autoplay,则忽略该属性

video元素的额外特性

    poster                    在视频加载完成之前，代表视频内容的图片的url地址，该属性可读可写，可以随意修改         width,height             取或设置显示的尺寸。如果设置的宽度与视频本身大小不匹配，可能导致四周会出现黑色区域         videoWidth,videoHeight   返回视频固有的宽度和高度，只读

3、html5通过canvas抓取视频（实例演示）

<!doctype html> <meta charset="utf-8"> <html>  <title></title>  <body>   <video id="movies" src="test.mp4" controls="controls" autobuffer="true" oncanplay="startVideo()" onended="stopTimeLine()" width="1920px" height="758px">   </video>   <canvas id="timeLine" width="1920px" height="758px">   </canvas>  </body>  <script>    var updataInterval = 100;//抓取帧的时间间隔   var frameWidth = 1920;//时序中帧的尺寸   var frameHeight = 758;   //时序中总的帧数   var frameRows = 4;   var frameColumns = 4;   var frameGrid = frameRows*frameColumns;
    //当前帧   var frameCount = 0;   //播放完取消计时器   var intervalid;   var videoStart = false;   //添加updateFrame函数   function updateFrame(){    var video = document.getElementById('movies');    console.log(video.videoWidth);    console.log(video.videoHeight);    var timeline = document.getElementById('timeLine');    var cxt = timeline.getContext('2d');    //根据帧数计算出当前播放的播放的位置    //然后以视频为输入参数绘制图像    var framePos = frameCount%frameGrid;    var frameX = (framePos%frameColumns)*frameWidth;    var frameY = (framePos%frameRows)*frameHeight;    cxt.drawImage(video,0,0,1920,758,frameX,frameY,frameWidth,frameHeight);    frameCount++;   }   function startVideo(){    if(videoStart){     return;    }    videoStart = true;    updateFrame();    intervalId = setInterval(updateFrame,updataInterval);   }   //处理用户输入   var timeLine = document.getElementById('timeLine');   timeLine.onclick = function(evt){    var offX = evt.layerX - timeLine.offsetLeft;    var offY = evt.layerY - timeLine.offsetTop;    var clickedFrame = Math.floor(offY/frameHeight)*frameRows;     clickedFrame += Math.floor(offX/frameWidth);     var seekedFramed = (((Math.floor(frameCount/frameGrid)*frameGrid)) + clickedFrame);    if(clickedFrame > (frameCount%16)){     seekedFramed = frameGrid;    }    if(seekedFramed < 0){     return;    }    var video =  document.getElementById('movies');    video.currentTime = seekedFramed*updataInterval/1000;    frameCount = seekedFramed;   }   function stopTimeLine(){    clearInterval(intervalId);   }  </script> </html>