html5之音频、视频(video&audio)

音频&视频

　　本篇为本人的学习笔记。

　　在Html5之前，浏览器对于视频和音频的处理并没有一个标准。因此在网页中看到的视频，都是通过第三插件的方式嵌入的，如：QuickTime、RealPlayer、Flash。浏览器自行整合了这些插件，用户意识不到他们的存在。时至今日，flash已停止更新濒临淘汰，许多浏览器已放弃整合这类插件，html5中的video、audio标签已大行其道。

补充资料

容器的概念

　　大多数人会认为视频文件就是 .avi .mp4,但事实上 avi和mp4仅仅是容器的格式，它只决定怎么将视频存储起来，而不关心存储的内容，有点类似于.zip。实际上，不管是音频文件或视频文件，都只是一个容器文件。这点类似于压缩了一组文件的ZIP文件。

　　视频文件（视频容器）包含了音频轨道、视频轨道和其他一些元数据。视频播放的时候，音频轨道和视频轨道是绑定在一起的，元数据包含了视频的封面、标题、子标题、字幕等相关信息。

主流的视频文件格式(容器格式) MPEG-4 Flash视频 Ogg WebM 音频视频交错
扩展名 通常以.mp4为扩展名 通常以.flv为扩展名 通常以.ogv为扩展名 通常以.webm为扩展名 通常以.avi为扩展名
主流的音频文件格式 MPEG-3 Acc音频 Ogg音频
  .mp3 .acc .ogg

编解码器

 　　音频和视频编码/解码是一组算法，用来对一段特定音频或视频进行解码和编码，以便音频和视频能够播放。原始的媒体文件体积非常巨大，如果不对其进行编码，那么数据量是非常惊人的，在互联网上传播则要耗费无法忍受的时间；如果不对其进行解码，就无法将编码后的数据重组为原始的媒体数据。

视频编解码器 H.264 VP8 Ogg Theora
音频编解码器 AAC MPEG-3 Ogg Theora

　　H.264：别名 MPEG-4的第十部分,由MPEG研发并于2003年标准化，它的目的支持一切设备，无论是低带宽低cpu，还是高带宽高cpu 或者是两者之间。要做到这一点，H.264标准被分成不同的几种配置。高配置使用了更多特性，这会导致在解码过程中更加消耗CPU，但视频文件本身会更小，视频效果也更好 。各种设备支持配置如下：

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


　　现在的视频编解码器会使用各种技巧减少从一帧到另一帧过程中传递的信息数量，它们不会存储每一帧的所有信息，而只是存储两帧之间的差异信息。编码器分为有损和无损，无损视频文件一般太大，在网页中没有优势，故本文重点研究有损编解码器。有损编解码器中，信息在编码过程中丢失是无法避免的，反复的对视频编码会导致其画面不均匀。

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

点击此处查看浏览器对于容器和编解码器支持的情况

 目前还没有一种编解码和容器的组合能应用于所有的浏览器中

处理视频的流程

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

格式转换（使用FFmpeg）

见FFmpeg的使用

音视频的attribute和property

video标签的attribute

  • width：视频显示区域的宽度，单位是CSS像素
  • height：视频展示区域的高度，单位是CSS像素
  • poster：一个海报帧的URL，用于在用户播放或者跳帧之前展示
  • src：要嵌到页面的视频的URL
  • controls：显示或隐藏用户控制界面
  • autoplay：媒体是否自动播放
  • loop：媒体是否循环播放
  • muted：是否静音
  • preload：该属性旨在告诉浏览器作者认为达到最佳的用户体验的方式是什么
    • none --- 作者认为用户不需要查看该视频，服务器也想要最小化访问流量，即提示浏览器该视频不需要缓存。　　
    • metadata(默认值) --- 尽管作者认为用户不需要查看该视频，不过应抓取元数据（比如：视频时长）。　　
    • auto --- 如果需要的话，可以下载整个视频，即使用户并不一定会用它。
    • 空字符串 --- 代指 auto 值。　　

audio标签的attribute

  • src：要嵌到页面的视频的URL
  • controls：显示或隐藏用户控制界面
  • autoplay：媒体是否自动播放
  • loop：媒体是否循环播放
  • muted：是否静音
  • preload：同video的preload属性

 音视频相关的js属性(property)

video&audio相关的js属性

  • duration：媒体总时间(只读)，使用时需要延迟或配合loadeddata事件一起使用
  • currentTime：开始播放到现在所用的时间(可读写)
  • muted：是否静音(可读写,相比于volume优先级要高)，使用时需注意，muted和volume属性不是同步的
  • volume：0.0-1.0的音量相对值(可读写)。
  • paused：媒体是否暂停(只读)
  • ended：媒体是否播放完毕(只读)
  • error：媒体发生错误的时候，返回错误代码 (只读)
  • currentSrc： 以字符串的形式返回媒体地址(只读)，使用时需要延迟或配合loadeddata事件一起使用

video相关的js属性

  • poster：视频播放前的预览图片(读写)
  • width / height：设置视频的尺寸(读写)
  • videoWidth / videoHeight：视频的实际尺寸(只读)，使用时需要延迟或配合loadeddata事件一起使用

音视频标签的函数及事件

js相关函数

  • play()：媒体播放
  • pause()：媒体暂停
  • load()： 重新加载媒体，当video(audio)标签中的source标签的src属性改变时，需要用此函数重新加载才可生效。

js相关事件

video

事件名称 描述
abort 在播放被终止时触发,例如, 当播放中的视频重新开始播放时会触发这个事件。
canplay 在媒体数据已经有足够的数据（至少播放数帧）可供播放时触发。这个事件对应CAN_PLAY的readyState。
canplaythrough 在媒体的readyState变为CAN_PLAY_THROUGH时触发，表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕。注意：手动设置currentTime会使得firefox触发一次canplaythrough事件，其他浏览器或许不会如此。
durationchange 元信息已载入或已改变，表明媒体的长度发生了改变。例如，在媒体已被加载足够的长度从而得知总长度时会触发这个事件。
emptied 媒体被清空（初始化）时触发。
ended 播放结束时触发。
error 在发生错误时触发。元素的error属性会包含更多信息。参阅Error handling获得详细信息。
loadeddata 媒体的第一帧已经加载完毕。
loadedmetadata 媒体的元数据已经加载完毕，现在所有的属性包含了它们应有的有效信息
loadstart 在媒体开始加载时触发。
mozaudioavailable 当音频数据缓存并交给音频层处理时
pause 播放暂停时触发。
play 在媒体回放被暂停后再次开始时触发。即，在一次暂停事件后恢复媒体回放。
playing 在媒体开始播放时触发（不论是初次播放、在暂停后恢复、或是在结束后重新开始）。
progress 告知媒体相关部分的下载进度时周期性地触发。有关媒体当前已下载总计的信息可以在元素的buffered属性中获取到。
ratechange 在回放速率变化时触发
seeked 在跳跃操作完成时触发。
seeking 在跳跃操作开始时触发。
stalled 在尝试获取媒体数据，但数据不可用时触发。
suspend 在媒体资源加载终止时触发，这可能是因为下载已完成或因为其他原因暂停。
timeupdate 元素的currentTime属性表示的时间已经改变。
volumechange 在音频音量改变时触发（既可以是volume属性改变，也可以是muted属性改变）.。
waiting 在一个待执行的操作（如回放）因等待另一个操作（如跳跃或下载）被延迟时触发

video退出全屏

  • 不同的浏览器有不同的实现方法
// Webkit
element.webkitRequestFullScreen();//进入全屏
document.webkitCancelFullScreen();//退出全屏

// Firefox
element.mozRequestFullScreen();
document.mozCancelFullScreen();
 
// W3C 
element.requestFullscreen();
document.exitFullscreen();
  • 一w3c推荐的兼容写法
//进入全屏
function FullScreen() {
    var ele = document.documentElement;
    if (ele .requestFullscreen) {
        ele .requestFullscreen();
    } else if (ele .mozRequestFullScreen) {
        ele .mozRequestFullScreen();
    } else if (ele .webkitRequestFullScreen) {
        ele .webkitRequestFullScreen();
    }
}
//退出全屏
function exitFullscreen() {
    var de = document;
    if (de.exitFullscreen) {
        de.exitFullscreen();
    } else if (de.mozCancelFullScreen) {
        de.mozCancelFullScreen();
    } else if (de.webkitCancelFullScreen) {
        de.webkitCancelFullScreen();
    }
}

audio

事件名称 描述
abort 在播放被终止时触发,例如, 当播放中的音频重新开始播放时会触发这个事件
canplay 在媒体数据已经有足够的数据（至少播放数帧）可供播放时触发。这个事件对应CAN_PLAY的readyState
canplaythrough 在媒体的readyState变为CAN_PLAY_THROUGH时触发，表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕。注意：手动设置currentTime会使得firefox触发一次canplaythrough事件，其他浏览器或许不会如此。
durationchange 元信息已载入或已改变，表明媒体的长度发生了改变。例如，在媒体已被加载足够的长度从而得知总长度时会触发这个事件。
emptied 媒体被清空（初始化）时触发。
ended 播放结束时触发。
error 在发生错误时触发。元素的error属性会包含更多信息。参阅Error handling获得详细信息
loadeddata 媒体的第一帧已经加载完毕。
loadedmetadata 媒体的元数据已经加载完毕，现在所有的属性包含了它们应有的有效信息。
loadstart 在媒体开始加载时触发
mozaudioavailable 当音频数据缓存并交给音频层处理时
pause 播放暂停时触发。
play 在媒体回放被暂停后再次开始时触发。即，在一次暂停事件后恢复媒体回放。
playing 在媒体开始播放时触发（不论是初次播放、在暂停后恢复、或是在结束后重新开始）。
progress 告知媒体相关部分的下载进度时周期性地触发。有关媒体当前已下载总计的信息可以在元素的buffered属性中获取到。
ratechange 在回放速率变化时触发。
seeked 在跳跃操作完成时触发。
seeking 在跳跃操作开始时触发。
stalled 在尝试获取媒体数据，但数据不可用时触发。
suspend 在媒体资源加载终止时触发，这可能是因为下载已完成或因为其他原因暂停。
timeupdate 元素的currentTime属性表示的时间已经改变。
volumechange 在音频音量改变时触发（既可以是volume属性改变，也可以是muted属性改变）.。
waiting 在一个待执行的操作（如回放）因等待另一个操作（如跳跃或下载）被延迟时触发
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/zhanghua-zh/p/10305814.html