video

1.1 标签原型

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

• <video id="media" src="123.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.2 video属性

1.3 Video 方法

1.4 视频控制

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

1.5 其他

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

html5 video 外挂字幕[webVTT]

1. 字幕subtitles > 关于对话的转译或者翻译
2. 标题captions > 类似于标题，但是还包括音响效果和其他音频信息。
3. 说明description > 预期为一个单独的文本文件，通过屏幕阅读器描述视频
4. 章节chapters > 旨在帮助用户浏览整个视频
5. 元数据metadata > 默认不打算展示给观众的、和视频有关的信息和内容。但是你可以使用Javascript来访问。

WebVTT内容

这里有一个标准的示例：

WEBVTT

1
00:00:13.000 --> 00:00:16.100
这里是字幕

2
00:00:16.100 --> 00:00:20.100
这里是第二行字幕

webvtt文件中的每一项为一个cue，每一个cue以箭头分割的开始时间和结束时间，cue对应的文本在下一行，每一个cue可以有一个id, cue的时间格式为 hours:minutes:seconds:milliseconds，必须严格遵守，时分秒必须为两位数字，不足的以0填补，毫秒必须是三位数字。

这个里有个.vtt文件的格式校验器https://quuz.org/webvtt/?spm=5176.100239.blogcont4269.7.kKaynO

audio

2.1 HTML5 音频

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

2.2标签创建

audio元素创建

<audio controls src="123.mp3">
</audio>

audio source元素

<audio controls>
        <source src="123.mp3">
        <source src="123.ogg">
    </audio>

2.2 audio 属性

• autoplay 自动播放
• controls 向用户显示播放控件
• loop 循环
• preload 是否等加载完再播放
• src 要播放的音频的 URL