HTML5 video 和 audio

HTML5 video 和 audio

 

video

用于在HTML或者XHTML文档中嵌入视频内容

使用 video 元素至少要提供两种视频格式的文件：OGG 和 MP4

1. OGG：采用 Theora 视频格式和 Vorbis 音频解码器 （目前比较主流的视频格式）
2. MPEG-4：采用 H.264 视频格式和 AAC 音频解码器 (手机端的视频格式)
3. WebM：采用 VP8 视频和 Ogg Vorbis (目前唯一 一个支持超高清视频格式)
   • 该视频格式出自 Google 公司

video 元素中可以使用 source 子元素来向浏览器提供备选视频格式，注意 source 元素是单标签

作用：实现各个浏览器的兼容性

<video>
    <source src="xxx.mp4">
    <source src="xxx.ogg">
    <source src="xxx.webm">
</video>

video 元素的属性

• controls：用于显示浏览器所提供的视频控件按钮
• autoplay：设置这个属性以后，视频会自动播放
• poster：该属性指定一个 URL（相对URL / 绝对URL），用于在视频播放之前显示一张图片，视频开始播放后图片自动消失
• preload：预加载，该属性可以设置三个值
  1. none：不缓存视频，减少不必要的流量
  2. metadata：只加载除视频之外的信息（宽和高）
  3. auto：默认值，要求浏览器尽可能快地下载视频
• loop：设置这个属性后，视频将会自动循环播放

<video autoplay controls poster="xxx.png" preload="auto" loop></video>

HTML5 新加入的 API

事件名称

• progress

• pause：视频暂停时触发

  var media = document.getElementById('media');
  media.addEventListener('pause', function(){
  alert('暂停');
  }, false);

• play：视频开始播放时触发

  var media = document.getElementById('media');
  media.addEventListener('play', function(){
  alert('开始播放');
  }, false);

• ended：视频到达末尾时触发

  var media = document.getElementById('media');
  media.addEventListener('ended', function(){
  alert('播放完毕');
  }, false);

• canplay：视频能够播放时就会触发

HTML5 新增的媒体处理方法

• play（）：播放媒体文件
• pause（）：暂停播放
• load（）：加载视频

HTML5 新增的针对视频元素处理属性

• ended：视频结束播放，值为true
• paused：视频处于暂停或没播放状态，值为true
• currentTime：获取或者设置视频播放的位置
• duration：视频的时长

audio

audio 元素可以实现在 HTML 页面中嵌入音频内容，该元素的属性可以设置是否自动播放、预加载及循环播放等

audio 元素提供了播放、暂停和音量控件来控制音频

使用 audio 元素提供三种音频格式的文件：mp3、Ogg 和 Wav

• MP3：采用 mpeg 音频解码器
• Ogg：采用 ogg 音频解码器
• Wav：采用 wav 音频解码器