H5视频/音频

Posted 2020-09-23

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属性

属性(常用)	值	功能描述
controls	controls	是否显示播放控件
autoplay	autoplay	设置是否打开浏览器后自动播放
width	Pilex（像素）	设置播放器的宽度
height	Pilex（像素）	设置播放器的高度
loop	loop	设置视频是否循环播放（即播放完后继续重新播放）
preload	preload	设置是否等加载完再播放
src	url	设置要播放视频的url地址
poster	imgurl	设置播放器初始默认显示图片
autobuffer	autobuffer	设置为浏览器缓冲方式，不设置autoply才有效

---

1.3 Video 方法 

API	事件说明
play	video.play(); 播放视频
pause	video.pause(); 暂停播放视频
load	video.load(); 将全部属性回复默认值，视频恢复重新开始状态
canPlayType	var support = videoid.canPlayType(‘video/mp4′);  判断浏览器是否支持当前类型的视频格式 返回值：         空字符串：不支持Maybe：可能支持Probably：完全支持

 

---

 

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]

---

 

html5 video 外挂字幕英文简称webVTT【video text track 网络视频文本轨道】，是一个以.vtt结尾的纯文本文件，里面会包含以下几种视频信息：

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