HTML5视频和音频常见的格式,HTML5中视频音频的使用详解

一、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 标签原型

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

poster="examp1.jpg" >您的浏览器不支持video

给定多种视频格式，浏览器根据自身支持程度选择播放哪一种

注意：多个source标签，浏览器会从第一个开始识别，如果第一个不被识别，则会继续识别第二个；如果第一个识别成功，则会直接播放第一种格式视频

//src属性写到source标签中，要指定视频的type类型，例如MP4的即为type=“video/mp4”

//ogg格式

//webm格式

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

设置或返回音频/视频的音量

常用API属性

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几乎一致。稍稍有点不同。所以基本上会了一个其他的也就都会了

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。