# 一、video

# 1.1 video支持视频格式

• 常见的视频格式

  • 视频的组成部分：画面、音频、编码格式
  • 视频编码：H.264、Theora、VP8(google开源)

• HTML5支持的视频格式：

  • Ogg
    • 带有Theora视频编码+Vorbis音频编码的Ogg文件
    • 支持的浏览器:F、C、O
  • MEPG4
    • 带有H.264视频编码+AAC音频编码的MPEG4文件
    • 支持的浏览器: S、C
  • 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	Preview 一、video 1.1 video支持视频格式 1.2 标签原型 1.3 重要的video标签属性 1.4 Video API 1.4.1 Video 方法 1.4.2网络状态 1.4.3 准备状态 1.4.4 回放状态 1.4.5 视频控制 1.4.6 相关事件 1.4.7 其他 二、audio 2.1 audio格式 2.2 audio标签中的一些常用属性 2.3 api所提供的对audio标签操作的一些属性和方法 2.4 常用的控制用的函数 2.5 audio标签API中的常用事件 ← JavaScript作用域分析总结JavaScript及jQuery中的各种宽高属性图解 →