回归前端学习的第13天——API（视频、音频）

HTML5视频和音频

<video controls>
  <source src="a.mp4" type="video/mp4">
  <source src="a.webm" type="video/webm">
  <p>不支持该视频格式. 点击有 <a href="rabbit320.mp4">视频</a> instead.</p>
</video>

注意：
若出现视频加载空白，如下图情况

此为video标签不支持我自己视频的编码格式 ，需要将视频编码格式转换成H264格式。

关于<video>标签所支持的视频格式和编码：

1. MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器

2. WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器

3. Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

浏览器支持的视频格式

浏览器支持的视频格式

HTMLMediaElement API

HTMLMediaElement 提供对于web页面中的音频和视频通过JavaScript处理的能力。

1.HTMLAudioElement 音频处理
2.HTMLVideoElement 视频处理

在通过JavaScript对于音频/视频进行控制时，首先要通过JavaScript先行获取到该音频/视频对象，然后 再进行相关的控制操作

autoplay
autoplay属性用于控制多媒体（指音频和视频 ）是否自动播放

//获取多媒体对象的autoplay属性
variable = HTMLMediaElement.autoplay
//设置
HTMLMediaElement.autoplay = bool value

volume
volume属性用于获取/设置媒体的音量，其值从0.0（表示静音）~1.0（表示最大音量）

//获取
variable = HTMLMediaElement.volume
//设置
HTMLMediaElement.volume = double value
 

paused
paused属性用于获取媒体对象是否正在暂停

boolean HTMLElement.paused

playbackRate
playbackRate属性用于获取/设置媒体的播放速度，1.0表示正常的播放速度；如果值小于1.0，则表示 比正常速度慢，否则将正常速度快

//获取
variable = HTMLMediaElement.playbackRate
 
//设置
HTMLMediaElement.playbackRate = double value
 

duration
duration属性用于获取媒体的总长度时间，单位为秒

variable = HTMLMediaElemet.duration

如果媒体不可用，返回值为0，如果媒体可用，但时间长度未知，返回值为NaN，如果媒体以stream(数据流)形式传输并且没有预定长度时，返回Inf

currentTime
currentTime属性用于获取/设置媒体当前播放时间，单位为秒

//获取媒体当前播放时间
variable = HTMLMediaElement.currentTime
//设置媒体当前播放时间
HTMLMediaElement.currentTime = double value

src
src属性用于获取/设置媒体对象的URL地址

//设置
HTMLMediaElement.src = string value
//获取
variable = HTMLMediaElement.src

方法

play()
play()方法于实现媒体的播放

HTMLMediaElement.play()

pause()
pause()方法用于实现媒体的暂停，其语法结构同play()方法

事件

play()

在媒体播放时触发

HTMLMediaElement.addEventListener('play',function(){
　　...
})
 pause()

在媒体暂停时触发：

HTMLMediaElement.addEventListener('pause',function(){
　　...
})

canplaythrough()
在媒体的readyState变成can_play_through时触发

HTMLMediaElement.addEventListener('canplaythrough',function(){
　　...
})
 timeupdate()

在媒体元素的currentTime属性发生变化的时候触发（实时显示当前播放事件）

HTMLMediaElement.addEventListener('timeupdate',function(){
　　...
})