相关简介

HTML5 规定了一种通过 video 元素来包含视频的标准方法。
当前，video 元素支持三种视频格式：

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

格式	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

很带感，如果需要正式化，还需要做浏览器适配相关的解决。不过我这里不考虑，先做出来像个东西了再说。

video标签的属性

autoplay=“autoplay”    如果出现该属性，则视频在就绪后马上播放。
controls="controls"     如果出现该属性，则向用户显示控件，比如播放按钮。
height="pixels"    设置视频播放器的高度。
width="pixels"    设置视频播放器的宽度。
loop="loop"    如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload="preload"    如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src="url"    要播放的视频的 URL。

controls属性学习

功能：向用户显示控件，也就是说播放器的显示控件可设置不显示
下面我们看看文档中的原话：

controls 属性规定浏览器应该为视频提供播放控件。
如果设置了该属性，则规定不存在作者设置的脚本控件。
浏览器控件应该包括：
播放/暂停/定位/音量/全屏/切换/字幕（如果可用）/音轨（如果可用）

来做一个对比案例

添加controls的video

<video  width="320" height="240" controls>
  <source src="http://www.html5videoplayer.net/videos/madagascar3.mp4" type="video/mp4">
</video>

不添加controls的video

<video  width="320" height="240">
  <source src="http://www.html5videoplayer.net/videos/madagascar3.mp4" type="video/mp4">
</video>

很显然，不使用controls属性，为定制播放器提供了一种可能。话不多说，就来用css定制看看。

下面用到video标签的一些方法和属性，这里给出链接地址：
文档地址1
文档地址2
文档地址3
文档地址4

下面摘抄一些会用到的方法和属性：

video的部分方法

方法	描述	案例
load()	重新加载音频/视频元素。	document.getElementById("video").load(); 不更改来源是重新播放; 更改视频来源，就是切换
play()	开始播放音频/视频。	document.getElementById("video").play();
pause()	暂停当前播放的音频/视频。	document.getElementById("video").pause();

video的部分属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	如果出现该属性，视频的音频输出为静音。
poster	URL	规定视频正在下载时显示的图像，直到用户点击播放按钮。
preload	auto metadata none	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。
src	URL	要播放的视频的URL。
width	pixels	设置视频播放器的宽度。

接下来就开始吧

给出操作的html的代码结构：

<link rel="stylesheet" href="./style.css"/>

<div id="weizu-wrap">
    <video id="weizu">
        <source src="http://www.html5videoplayer.net/videos/madagascar3.mp4" type="video/mp4">
    </video>
</div>

<!--在body后-->
<script src="./main.js"></script>

对应的css文件如下：

*{
    margin:0;
    padding:0;
    border:0;
}

div#weizu-wrap{
    width:680px;
    position:relative;
    margin:50px auto;
    border:1px solid red;
}
div#weizu-wrap video#weizu{
    width:100%;
}

之所以不设置控件高度，是因为想外层div的高度随着视频的高度自适应就可以了，单控制宽度一个维度就可以了。

百度了一下，找了一个更加适合的用法，然后CSS改版了：
对应的css文件如下：

*{
    margin:0;
    padding:0;
    border:0;
}

div#weizu-wrap{
    width:680px;
    height: 400px;
    position:relative;
    margin:50px auto;
    border:1px solid red;
}
div#weizu-wrap video#weizu{
    width: 680px;
    height: 400px;
    object-fit:fill;  /*拉伸视频，填充整个设置的区域的*/
}