HTML5_音视频标签 <audio> 和 <video>

HTML5_音视频标签 <audio> 和 <video>

audio 和 video 都是 inline行内元素

 

如果浏览器支持，则不显示标签文本

IE8 不支持 audio video 标签

http://s8.qhimg.com/share/audio/piano1/a4.mp3

http://pic.ibaotu.com/00/60/75/01J888piCPNw.mp4

http://img.ksbbs.com/asset/Mon_1703/eb048d7839442d0.mp4

 

• 浏览器对于资源的格式，支持不一
• 做以下兼容，浏览器会选择最优格式运行

•         <audio controls>
              <source src="./audio/IDon'tWannaLiveForever.mp3" type="audio/mpeg"/>
              <source src="./audio/IDon'tWannaLiveForever.ogg" type="audio/ogg" codecs="vorbis"/>
              <source src="./audio/IDon'tWannaLiveForever.acc" type="audio/acc" codecs="aac"/>
              您的浏览器不支持音视频，建议下载<a href="./audio/IDon'tWannaLiveForever.mp3">手动下载</a>
          </audio>
      
          <video id="my_video" controls>
              <source src="./video/CapitalCities-KangarooCourt.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
              <source src="./video/CapitalCities-KangarooCourt.ogg" type='video/ogg; codecs="theora, vorbis"'/>
              <source src="./video/CapitalCities-KangarooCourt.webm" type='video/webm; codecs="vp8, vorbis"'/>
              您的浏览器不支持音视频，建议下载<a href="./video/CapitalCities-KangarooCourt.mp4">手动下载</a>
          </video>

• video 的属性
• 320;

单位 px 可写可不写

• height: 480px;

音视频 即使设置的是正方形，也会按照宽高比例进行显示

• poster: "./img/1.jpg";

海报帧，在播放前或者跳帧前显示

• autoplay

有些高版本浏览器为了节约内存，已经禁止

• loop: "loop";

开启循环播放

• muted: "muted";
• preload: ;

none;    提示该资源不需要缓存

metadata;    提示用户不需要查看该视频
auto;    不管用户是否需要，都会加载整个视频
"";    等同于 auto;

• 常用 js 事件

onloadedmetadata    当音频元数据加载完毕时触发。
ontimeupdate    播放过程中实时触发。
onvolumechange    音量改变时触发

• 视频:

onabort    在播放被终止时触发,例如, 当播放中的视频重新开始播放时会触发这个事件。

oncanplay    在媒体数据已经有足够的数据（至少播放数帧）可供播放时触发。这个事件对应 CAN_PLAY的readyState。
 
oncanplaythrough    在媒体的 readyState 变为 CAN_PLAY_THROUGH 时触发，表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕。注意：手动设置 currentTime 会使得 firefox 触发一次 canplaythrough 事件，其他浏览器或许不会如此。

ondurationchange    元信息已载入或已改变，表明媒体的长度发生了改变。例如，在媒体已被加载足够的长度从而得知总长度时会触发这个事件。

onemptied    媒体被清空（初始化）时触发。

onended    播放结束时触发。

onerror    在发生错误时触发。元素的error属性会包含更多信息。参阅 Error handling 获得详细信息。

onloadeddata    媒体的第一帧已经加载完毕。

onloadedmetadata    媒体的元数据已经加载完毕，现在所有的属性包含了它们应有的有效信息。

onloadstart    在媒体开始加载时触发。

onmozaudioavailable    当音频数据缓存并交给音频层处理时

onpause    播放暂停时触发。

onplay       在媒体回放被暂停后再次开始时触发。即，在一次暂停事件后恢复媒体回放。

onplaying    在媒体开始播放时触发（不论是初次播放、在暂停后恢复、或是在结束后重新开始）。

onprogress       告知媒体相关部分的下载进度时周期性地触发。有关媒体当前已下载总计的信息可以在元素的buffered属性中获取到。

onratechange    在回放速率变化时触发。

onseeked    在跳跃操作完成时触发。

onseeking     在跳跃操作开始时触发。

onstalled     在尝试获取媒体数据，但数据不可用时触发。

onsuspend     在媒体资源加载终止时触发，这可能是因为下载已完成或因为其他原因暂停。

ontimeupdate    元素的currentTime属性表示的时间已经改变。

onvolumechange       在音频音量改变时触发（既可以是 volume 属性改变，也可以是 muted 属性改变）.。

onwaiting       在一个待执行的操作（如回放）因等待另一个操作（如跳跃或下载）被延迟时触发

• 音频:

onabort       在播放被终止时触发,例如, 当播放中的视频重新开始播放时会触发这个事件。

oncanplay       在媒体数据已经有足够的数据（至少播放数帧）可供播放时触发。这个事件对应 CAN_PLAY 的 readyState。

oncanplaythrough    在媒体的 readyState 变为 CAN_PLAY_THROUGH 时触发，表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕。注意：手动设置 currentTime 会使得firefox触发一次 canplaythrough 事件，其他浏览器或许不会如此。 

ondurationchange       元信息已载入或已改变，表明媒体的长度发生了改变。例如，在媒体已被加载足够的长度从而得知总长度时会触发这个事件。

onemptied    媒体被清空（初始化）时触发。

onended       播放结束时触发。

onerror    在发生错误时触发。元素的 error 属性会包含更多信息。参阅 Error handling 获得详细信息。

onloadeddata       媒体的第一帧已经加载完毕。

onloadedmetadata       媒体的元数据已经加载完毕，现在所有的属性包含了它们应有的有效信息。

onloadstart       在媒体开始加载时触发。

onmozaudioavailable       当音频数据缓存并交给音频层处理时

onpause       播放暂停时触发。

onplay       在媒体回放被暂停后再次开始时触发。即，在一次暂停事件后恢复媒体回放。

onplaying       在媒体开始播放时触发（不论是初次播放、在暂停后恢复、或是在结束后重新开始）。

onprogress       告知媒体相关部分的下载进度时周期性地触发。有关媒体当前已下载总计的信息可以在元素的 buffered 属性中获取到。

ratechange       在回放速率变化时触发。

onseeked       在跳跃操作完成时触发。

onseeking       在跳跃操作开始时触发。

onstalled       在尝试获取媒体数据，但数据不可用时触发。

onsuspend       在媒体资源加载终止时触发，这可能是因为下载已完成或因为其他原因暂停。

ontimeupdate       元素的 currentTime 属性表示的时间已经改变。

onvolumechange       在音频音量改变时触发（既可以是 volume 属性改变，也可以是 muted 属性改变）.。

onwaiting       在一个待执行的操作（如回放）因等待另一个操作（如跳跃或下载）被延迟时触发

• 常用 js 控制函数

myVideo.play()    媒体播放

myVideo.pause()    媒体暂停

myVideo.load()    重新加载媒体

• 常用的 js 属性

myVideo.duration;

myVideo.currentTime;        可读可写

myVideo.volume;    /* 0-1 的值，静音的时候为 0，音量满格时为 1 */

myVideo.muted;    /* 返回当前音量状态，true 表示静音 */

myVideo.paused;    /* true 表示视频暂停了 */

myVideo.ended;    /* true 表示视频播放到最后了 */

myVideo.error          媒体发生错误的时候，返回错误代码 (只读)

myVideo.currentSrc     以字符串的形式返回媒体地址(只读)

• 视频多的部分:

myVideo.poster  :   视频播放前的预览图片(读写)

myVideo.width、myVideo.height  :   设置视频的尺寸(读写)

myVideo.videoWidth、 videoHeight  :   视频的实际尺寸(只读)

 

 

• 主流视频格式文件格式 (容器格式)

MPEG-4    通常以 .mp4 为扩展名
Flash视频    通常以 .flv 为扩展名
Ogg    通常以 .ogv 为扩展名
WebM    通常以 .webm 为扩展名

频视频交错    通常以 .avi 为扩展名

• 主流音频格式文件格式 (容器格式)

MPEG-3        .mp3
Acc 音频         .acc
Ogg 音频       .ogg

• .avi 和 .mp4

仅仅是容器的格式
只是决定怎么将视频存储起来，
而不关心存储的内容
包含了音频轨道，视频轨道和其他一些元数据

• 元数据

包含了视频的封面，标题，子标题，字幕等相关信息

编解码器
一组算法，用来对一段特定的音频/视频进行编码和解码
原始媒体文件体积巨大，
如果不进行编码，那么数据量非常惊人
如果不进行解码，就无法将编码后的数据重组为原始的媒体数据

• 视频编解码器

H.264
VP8
Ogg Theora

• 音频编解码器

AAC
MPEG-3
Ogg Vorbis

• 浏览器对于容器和编解码器支持的情况

Browser                        MP4(H.264 + AAC)         WebM(VP8 + Vorbis )        Ogg(Theora + Vorbis)
Internet Explorer 9                    YES                      NO                       NO
Firefox 4.0                                NO                       YES                      YES
Google Chrome                       YES                      YES                      YES
Apple Safari 5                          YES                      NO                       NO
Opera 10.6                               NO                       YES                      YES

http://www.html5videoplayer.net/html5video/html5-video-browser-compatibility/
目前还没有一种编解码和容器的组合能应用于所有的浏览器中！！！

• H.264： 别名 MPEG-4 的第十部分,由 MPEG 研发并于 2003 年标准化

它的目的支持一切设备，无论是低带宽低 cpu ，还是高带宽高 cpu 或者是两者之间。
要做到这一点，H.264 标准被分成不同的几种配置。高配置使用了更多特性，
这会导致在解码过程中更加消耗 CPU ，但视频文件本身会更小，视频效果也更好

苹果 iphone 手机 基本配置 (BaseLine)
正常的电视机支持 基本配置 (BaseLine) 和 主配置 (Main) 两种
正常的电脑支持 基本配置 (BaseLine) 和 主配置 (Main) 高级配置 (high) 三种

• 处理视频的一个流程:  (tools_resource)

把压缩文件 ffmpeg.zip 放到 software 文件夹中，解压到当前文件夹，进入 bin，逐次双击运行
将 bin 加入系统环境变量
在命令行中进入 .mp4 文件所在的文件夹

• 格式转化

用 FFmpeg 制作MP4 视频
ffmpeg -i test.mp4 -c:v libx264 -s 1280x720 -b:v 1500k -profile:v high -level 3.1 -c:a aac -ac 2 -b:a 160k -movflags faststart OUTPUT.mp4

用 FFmpeg 制作 WebM 视频
ffmpeg -i test.mp4 -c:v libvpx -s 1280x720 -b:v 1500k -c:a libvorbis -ac 2 -b:a 160k OUTPUT.webm

FFmpeg 制作 Ogg 视频
ffmpeg -i test.mp4 -c:v libtheora -s 1280x720 -b:v 1500k -c:a libvorbis -ac 2 -b:a 160k OUTPUT.ogv

FFmpeg 制作Mp3音频
ffmpeg -i test.mp3 -c:a libmp3lame -ac 2 -b:a 160k OUTPUT.mp3

FFmpeg 制作Ogg音频
ffmpeg -i test.mp3 -c:a libvorbis -ac 2 -b:a 160k OUTPUT.ogg
ffmpeg -i IDon'tWannaLiveForever.mp3 -c:a libvorbis -ac 2 -b:a 160k IDon'tWannaLiveForever.ogg


FFmpeg 制作ACC音频
ffmpeg -i test.mp3 -c:a aac -ac 2 -b:a 160k OUTPUT.aac

• 1. 制作一个 Ogg 容器中使用 Theora 视频和 Vorbis 音频的版本

2. 制作另外一个版本，使用 WebM 视频容器（VP8 + Vorbis）
3. 再制作一个版本，使用 MP4 视频容器，并使用 H.264 基本配置的视频和 ACC 低配的音频
4. 链接上面 3 个文件到同一个 video 元素，并向后兼容基于 Flash 的视频播放器

 

• 自定义播放器
• 行内元素底部缝隙
• 调整基线 vertical-align: ;

 

• 元素的 width、height，随着屏幕窗口大小改变
• window.onresize = function(){};

 

• 元素设置宽高

1. 设置 width、height

2. 定位

• #process_box {
      position: absolute;
      top: 0px;
      bottom: 0px;
      left: 55px;
      right: 230px;
  }

3. 浮动，让子元素撑开

 

• 功能函数    ----addClass()，removeClass()
• addClass()

• function addClass(ele, className){
      var reg = new RegExp("\b"+className+"\b");
      if(!reg.test(ele.className)){
          /* 如果元素 ele 不包含 className */
          ele.className += " "+className;
      };
  };

• removeClass()

• function removeClass(ele, className){
      if(ele.className){
          var reg = new RegExp("\b"+className+"\b");
          var classes = ele.className;
          ele.className = classes.replace(reg, "");
          if(/^s*$/g.test(ele.className)){
              ele.removeAttribute("class");
          };
      }else{
          ele.removeAttribute("class");
      }
  };

• toggleClass()

• function toggleClass(ele, className){
      if(ele.className){
          var reg = new RegExp("\b"+className+"\b");
          if(!reg.test(ele.className)){
              /* 如果元素 ele 不包含 className */
              ele.className += " "+className;
          }else{
              var classes = ele.className;
              ele.className = classes.replace(reg, "");
              
              if(/^s*$/g.test(ele.className)){
                  /* 如果元素的 class 为空, 则清除 class 属性 */
                  ele.removeAttribute("class");
              };
          };
      }else{
          /* 如果元素的 className 属性不存在, 则清除 class 属性 */
          ele.removeAttribute("class");
      };
  };

 

• 将视频的 currentTime 设置为 0

 

• 封装功能函数
• 模仿 jQuery 源码

• (function(w){
      w.$ = {};
      
      // callBack 将内部组件的 move 状态暴露在了外部的业务逻辑
      w.$.drag = function(ele, callBack){
          ele.onmousedown = function(e){
              e = e || window.event;
          };
      };
  })(window);

 

• 对象.属性()

• var callBack = {
      move:function(){
          console.log("Runing!");
      }
  };
  
  callBack.move();
  callBack["move"]();    // 调用，推荐使用
  
  callBack.stop = "Stop Now!";    // 动态添加属性，推荐使用 
  callBack["stop"] = "Stop Now!";

 

• 功能函数    ----将 秒 转为 时:分:秒

• funtion str2HMS(seconds){
      seconds = parseInt(seconds);
  
      var s = toZero( Math.floor(seconds%60) );
      var m = toZero( Math.floor(seconds%3600/60) );
      var h = toZero( Math.floor(seconds/3600) );
  
      return h+":"+m+":"+s;
  };
  
  function toZero(num){
      if(num<10){
          num = "0"+num;
      }else{
          num = ""+num;
      };
  };