# 一、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