HTML5 中的视频音频使用详解

一、video

1.1 video 支持视频格式

• 常见的视频格式
  • 视频的组成部分：画面、音频、编码格式
  • 视频编码： H.264 、 Theora 、 VP8(google 开源)
• HTML5 支持的视频格式：
  • Ogg
    • 带有 Theora 视频编码+ Vorbis 音频编码的 Ogg 文件
      • 支持的浏览器: F 、 C 、 O
  • MEPG4
    • 带有 H.264 视频编码+ AAC 音频编码的 MPEG4 文件
    • 支持的浏览器: S 、 C
  • WebM
    • 带有 VP8 视频编码+ Vorbis 音频编码的 WebM 格式
    • 支持的浏览器: I 、 F 、 C 、 O
    • 劣势：视频少、转码器几乎没有，不好转码
• 想要 video 能自动填充慢父 div 的大小，只要给 video 标签加上 style="width= 100%; height=100%; object-fit: fill" 即可

1.2 标签原型

• 指定一种视频格式，不能播就提示

<video id="media" src="examp.mp4" width="500" 
poster="examp1.jpg" >您的浏览器不支持 video</video>

• 给定多种视频格式，浏览器根据自身支持程度选择播放哪一种
• 注意：多个 source 标签，浏览器会从第一个开始识别，如果第一个不被识别，则会继续识别第二个；如果第一个识别成功，则会直接播放第一种格式视频

<video controls = “controls”>

   <source src=”1.mp4” type=”video/mp4” />  //src 属性写到 source 标签中，要指定视频的 type 类型，例如 MP4 的即为 type=“video/mp4”

   <source src = “2.ogg” type=”video/ogg” />  //ogg 格式

   <source src=”3.webm” type=”video/webm” />   //webm 格式

</video>

1.3 重要的 video 标签属性

• API 属性

• 常用 API 属性
  • duration ：返回当前音频/视频的长度（以秒计）
  • paused ：设置或返回音频/视频是否暂停
  • currentTime ：设置或返回音频/视频中的当前播放位置（以秒计）
  • ended ：返回音频/视频的播放是否已结束

  1.4 Video API

1.4.1 Video 方法

• 常用方法
  • play() ：开始播放音频/视频
  • pause() ：暂停当前播放的音频/视频

1.4.2 网络状态

• 获取 video 对象

  Media = document.getElementById("media");

• Media.currentSrc;
  • 返回当前资源的 URL
• Media.src = value;
  • 返回或设置当前资源的 URL
• Media.canPlayType(type);
  • 是否能播放某种格式的资源
• Media.networkState;
  • 0.此元素未初始化
  • 1.正常但没有使用网络
  • 2.正在下载数据
  • 3.没有找到资源
• Media.load();
  • 重新加载 src 指定的资源
• Media.buffered;
  • 返回已缓冲区域，TimeRanges
• Media.preload;
  • none:不预载
  • metadata:预载资源信息
  • auto:

1.4.3 准备状态

• Media.readyState
• Media.seeking;
  • 是否正在 seeking

1.4.4 回放状态

• Media.currentTime = value;
  • 当前播放的位置，赋值可改变位置
• Media.startTime;
  • 一般为 0，如果为流媒体或者不从 0 开始的资源，则不为 0
• Media.duration;
  • 当前资源长度 流返回无限
• Media.paused;
  • 是否暂停
• Media.defaultPlaybackRate = value;
  • 默认的回放速度，可以设置
• Media.playbackRate = value;
  • 当前播放速度，设置后马上改变
• Media.played;
  • 返回已经播放的区域，TimeRanges，关于此对象见下文
• Media.seekable;
  • 返回可以 seek 的区域 TimeRanges
• Media.ended;
  • 是否结束
• Media.autoPlay;
  • 是否自动播放
• Media.loop;
  • 是否循环播放
• Media.play();
  • 播放
• Media.pause();
  • 暂停

1.4.5 视频控制

• Media.controls;//是否有默认控制条
• Media.volume = value; //音量
• Media.muted = value; //静音
• TimeRanges(区域) 对象
• TimeRanges.length; //区域段数
• TimeRanges.start(index) //第 index 段区域的开始位置
• TimeRanges.end(index) //第 index 段区域的结束位置

1.4.6 相关事件

• 首先绑定事件的话可以通过 js 中的 addEventListener 方法来绑定事件

• 常用事件
  • oncanplay ：当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时）。
  • ontimeupdate ： 当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本。
  • onended ：当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。

1.4.7 其他

• 全屏:
  • element.webkitRequestFullScreen(); ( webkit)
  • element.mozRequestFullScreen(); (Firefox )
  • element.requestFullscreen(); (W3C )
• 退出全屏：
  • document.webkitCancelFullScreen() ; (webkit )
  • document.mozCancelFullScreen() ; (Firefox)
  • document.exitFullscreen(); (W3C)

二、audio

2.1 audio 格式

• 常见的音频格式
  • 音频编码： ACC 、 MP3 、 Vorbis
• HTML5 支持的音频格式：
  • Ogg 免费 支持的浏览器: C 、 F 、 O
  • MP3 收费 支持的浏览器: I 、 C 、 S
  • Wav 收费 支持的浏览器: F 、 O 、 S

2.2 audio 标签中的一些常用属性

• 对于音乐格式的支持

• audio 可通过 new 来创建。也可以通过用 document 来获取

//通过 new 关键字来创建 Audio 对象
var Music = new Audio("test.mp3");

//通过 document 来获取已经存在的 Audio 对象
var Music = document.getElementById("audio");
//当然这里也可以使用 document.getElementsByClassName('className') 等其他的方法来获取。

2.3 api 所提供的对 audio 标签操作的一些属性和方法

2.4 常用的控制用的函数

2.5 audio 标签 API 中的常用事件

• 首先绑定事件的话可以通过 js 中的 addEventListener 方法来绑定事件

其实 video 的 api 和 audio 几乎一致。稍稍有点不同。所以基本上会了一个其他的也就都会了