一、video
1.1 video支持视频格式
常见的视频格式
- 视频的组成部分：画面、音频、编码格式
- 视频编码：H.264、Theora、VP8(google开源)
HTML5支持的视频格式：
1、Ogg
带有Theora视频编码+Vorbis音频编码的Ogg文件
支持的浏览器:F、C、O
2、MEPG4
带有H.264视频编码+AAC音频编码的MPEG4文件
支持的浏览器: S、C
3、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标签属性
| 属性(常用) | 值 | 功能描述 |
|---|---|---|
| controls | controls | 是否显示播放控件 |
| autoplay | autoplay | 设置是否打开浏览器后自动播放 |
| width | Pilex（像素） | 设置播放器的宽度 |
| height | Pilex（像素） | 设置播放器的高度 |
| loop | loop | 设置视频是否循环播放（即播放完后继续重新播放） |
| preload | preload | 设置是否等加载完再播放 |
| src | url | 设置要播放视频的url地址 |
| poster | imgurl | 设置播放器初始默认显示图片 |
| autobuffer | autobuffer | 设置为浏览器缓冲方式，不设置autoply才有效 |
API 属性
| 属性 | 描述 |
|---|---|
| audioTracks | 返回表示可用音轨的 AudioTrackList 对象 |
| buffered | 返回表示音频/视频已缓冲部分的 TimeRanges 对象 |
| controller | 返回表示音频/视频当前媒体控制器的 MediaController 对象 |
| crossOrigin | 设置或返回音频/视频的 CORS 设置 |
| currentSrc | 返回当前音频/视频的 URL |
| currentTime | 设置或返回音频/视频中的当前播放位置（以秒计） |
| defaultMuted | 设置或返回音频/视频默认是否静音 |
| defaultPlaybackRate | 设置或返回音频/视频的默认播放速度 |
| duration | 返回当前音频/视频的长度（以秒计） |
| ended | 返回音频/视频的播放是否已结束 |
| error | 返回表示音频/视频错误状态的 MediaError 对象 |
| mediaGroup | 设置或返回音频/视频所属的组合（用于连接多个音频/视频元素） |
| muted | 设置或返回音频/视频是否静音 |
| networkState | 返回音频/视频的当前网络状态 |
| paused | 设置或返回音频/视频是否暂停 |
| playbackRate | 设置或返回音频/视频播放的速度 |
| played | 返回表示音频/视频已播放部分的 TimeRanges 对象 |
| readyState | 返回音频/视频当前的就绪状态 |
| seekable | 返回表示音频/视频可寻址部分的 TimeRanges 对象 |
| seeking | 返回用户是否正在音频/视频中进行查找 |
| startDate | 返回表示当前时间偏移的 Date 对象 |
| textTracks | 返回表示可用文本轨道的 TextTrackList 对象 |
| videoTracks | 返回表示可用视频轨道的 VideoTrackList 对象 |
| volume | 设置或返回音频/视频的音量 |
- duration：返回当前音频/视频的长度（以秒计）
- paused：设置或返回音频/视频是否暂停
- currentTime：设置或返回音频/视频中的当前播放位置（以秒计）
- ended：返回音频/视频的播放是否已结束
1.4 Video API
1.4.1 Video 方法
| API | 事件说明 |
|---|---|
| play | video.play(); 播放视频 |
| pause | video.pause(); 暂停播放视频 |
| load | video.load(); 将全部属性回复默认值，视频恢复重新开始状态 |
| canPlayType | var support = videoid.canPlayType(‘video/mp4′); 判断浏览器是否支持当前类型的视频格式 返回值： 空字符串：不支持Maybe：可能支持Probably：完全支持 |
常用方法
- play()：开始播放音频/视频
- pause()：暂停当前播放的音频/视频
1.4.2网络状态
获取video对象
Media = document.getElementById("media");
1.Media.currentSrc;
返回当前资源的URL
2.Media.src = value;
返回或设置当前资源的URL
3.Media.canPlayType(type);
是否能播放某种格式的资源
4.Media.networkState;
0.此元素未初始化
1.正常但没有使用网络
2.正在下载数据
3.没有找到资源
5.Media.load();
重新加载src指定的资源
6.Media.buffered;
返回已缓冲区域，TimeRanges
7.Media.preload;
none:不预载
metadata:预载资源信息
auto:
1.4.3 准备状态
1.Media.readyState
2.Media.seeking;
是否正在seeking
1.4.4 回放状态
1.Media.currentTime = value;
当前播放的位置，赋值可改变位置
2.Media.startTime;
一般为0，如果为流媒体或者不从0开始的资源，则不为0
3.Media.duration;
当前资源长度 流返回无限
4.Media.paused;
是否暂停
5.Media.defaultPlaybackRate = value;
默认的回放速度，可以设置
6.Media.playbackRate = value;
当前播放速度，设置后马上改变
7.Media.played;
返回已经播放的区域，TimeRanges，关于此对象见下文
8.Media.seekable;
返回可以seek的区域 TimeRanges
9.Media.ended;
是否结束
10.Media.autoPlay;
是否自动播放
11.Media.loop;
是否循环播放
12.Media.play();
播放
13.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 相关事件
1.首先绑定事件的话可以通过js中的addEventListener方法来绑定事件
| 事件 | 说明 |
|---|---|
| loadstart | 客户端开始请求数据 |
| progress | 客户端正在请求数据 |
| suspend | 延迟下载 |
| abort | 客户端主动终止下载（不是因为错误引起） |
| loadstart | 客户端开始请求数据 |
| progress | 客户端正在请求数据 |
| error | 请求数据时遇到错误 |
| stalled | 网速失速 |
| play | play()和autoplay开始播放时触发 |
| pause | pause()触发 |
| loadedmetadata | 成功获取资源长度 |
| loadeddata | - |
| waiting | 等待数据，并非错误 |
| playing | 开始回放 |
| canplay | 可以播放，但中途可能因为加载而暂停 |
| canplaythrough | 可以播放，歌曲全部加载完毕 |
| seeking | 寻找中 |
| seeked | 寻找完毕 |
| timeupdate | 播放时间改变 |
| ended | 播放结束 |
| ratechange | 播放速率改变 |
| durationchange | 资源长度改变 |
| volumechange | 音量改变 |
2.常用事件
- oncanplay：当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时）。
- ontimeupdate： 当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本。
- onended：当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。
1.4.7 其他
1.全屏:
- element.webkitRequestFullScreen();( webkit)
- element.mozRequestFullScreen(); (Firefox )
- element.requestFullscreen(); (W3C )
2.退出全屏：
- document.webkitCancelFullScreen(); (webkit )
- document.mozCancelFullScreen(); (Firefox)
- document.exitFullscreen(); (W3C)
二、audio
2.1 audio格式
1.常见的音频格式
音频编码：ACC、MP3、Vorbis
2.HTML5支持的音频格式：
- Ogg 免费 支持的浏览器:C、F、O
- MP3 收费 支持的浏览器: I、C、S
- Wav 收费 支持的浏览器: F、O、S
2.2 audio标签中的一些常用属性
| 属性 | 属性值 | 注释 |
|---|---|---|
| src | url | 播放的音乐的url地址（火狐只支持ogg的音乐，而IE9只支持MP3格式的音乐。chrome貌似全支持） |
| preload | preload | 预加载（在页面被加载时进行加载或者说缓冲音频），如果使用了autoplay的话那么该属性失效。 |
| loop | loop | 循环播放 |
| controls | controls | 是否显示默认控制条（控制按钮） |
| autoplay | autoplay | 自动播放 |
对于音乐格式的支持
| 音频格式 | Chrome | Firefox | IE9 | Opera | Safari |
|---|---|---|---|---|---|
| OGG | 支持 | 支持 | 支持 | 不支持 | 不支持 |
| MP3 | 支持 | 不支持 | 支持 | 不支持 | 支持 |
| WAV | 不支持 | 支持 | 不支持 | 支持 | 不支持 |
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标签操作的一些属性和方法
| 属性 | 注释 |
|---|---|
| duration | 获取媒体文件的总时长，以s为单位，如果无法获取，返回NaN |
| paused | 如果媒体文件被暂停，那么paused属性返回true，反之则返回false |
| ended | 如果媒体文件播放完毕返回true |
| muted | 用来获取或设置静音状态。值为boolean |
| volume | 控制音量的属性值为0-1;0为音量最小，1为音量最大 |
| startTime | 返回起始播放时间 |
| error | 返回错误代码，为uull的时候为正常。否则可以通过Music.error.code来获取 |
| currentTime | 用来获取或控制当前播放的时间，单位为s。 |
| currentSrc | 以字符串形式返回正在播放或已加载的文件 |
2.4 常用的控制用的函数
| 函数 | 作用 |
|---|---|
| load() | 加载音频、视频软件 |
| play() | 加载并播放音频、视频文件或重新播放暂停的的音频、视频 |
| pause() | 暂停出于播放状态的音频、视频文件 |
| canPlayType(obj) | 测试是否支持给定的Mini类型的文件 |
2.5 audio标签API中的常用事件
首先绑定事件的话可以通过js中的addEventListener方法来绑定事件
| 事件名称 | 事件作用 |
|---|---|
| loadstart | 客户端开始请求数据 |
| progress | 客户端正在请求数据（或者说正在缓冲） |
| play | play()和autoplay播放时 |
| pause | pause()方法促发时 |
| ended | 当前播放结束 |
| timeupdate | 当前播放时间发生改变的时候。播放中常用的时间处理 |
| canplaythrough | 歌曲已经载入完全完成 |
| canplay | 缓冲至目前可播放状态。 |
其实video的api和audio几乎一致。稍稍有点不同。所以基本上会了一个其他的也就都会了
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。
