HTML5中视频音频的使用详解

常见的视频格式

• 视频的组成部分：画面、音频、编码格式
• 视频编码：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即可

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

<video id=media src=examp.mp4 width=500 poster=examp1.jpg >您的浏览器不支持video</video>

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

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

API 属性

• duration：返回当前音频/视频的长度（以秒计）
• paused：设置或返回音频/视频是否暂停
• currentTime：设置或返回音频/视频中的当前播放位置（以秒计）
• ended：返回音频/视频的播放是否已结束

1.4.1 Video 方法

常用方法

• 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方法来绑定事件

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)

1.常见的音频格式

音频编码：ACC、MP3、Vorbis

2.HTML5支持的音频格式：

• Ogg 免费 支持的浏览器:C、F、O
• MP3 收费 支持的浏览器: I、C、S
• Wav 收费 支持的浏览器: F、O、S

对于音乐格式的支持

audio可通过new来创建。也可以通过用document来获取

//通过new关键字来创建Audio对象var Music = new Audio(test.mp3);//通过document来获取已经存在的Audio对象var Music = document.getElementById(audio);//当然这里也可以使用document.getElementsByClassName('className')等其他的方法来获取。

首先绑定事件的话可以通过js中的addEventListener方法来绑定事件

其实video的api和audio几乎一致。稍稍有点不同。所以基本上会了一个其他的也就都会了

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