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

你可能感兴趣的:(HTML5视频和音频常见的格式)