一、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 标签原型
指定一种视频格式,不能播就提示
给定多种视频格式,浏览器根据自身支持程度选择播放哪一种
注意:多个source标签,浏览器会从第一个开始识别,如果第一个不被识别,则会继续识别第二个;如果第一个识别成功,则会直接播放第一种格式视频
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几乎一致。稍稍有点不同。所以基本上会了一个其他的也就都会了
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对潘少俊衡的支持。
版权声明
本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:/web/html5/77039.html