html视频播放器

H5为我们提供了<video>标签，controls属性就是视频控制台，显示了视频播放进度，控制音量、全屏等，极为方便。
但我们不能修改他的样式，要写出符合自己网站风格的样式就无法实现。
所以实现控制台代码就很重要。

该例中我们需要引入jquery库和font-awesome库

html

<figure>
  <figcaption>视频播放器</figcaption>
  <div class="player">
    <video id="video">
      <source src="assets/video/a.ogg" type="video/ogg">
      <source src="assets/video/a.mp4" type="video/mp4">
      <source src="assets/video/a.WebM" type="video/WebM">
    </video>
    
    <!-- 控制台 -->
    <section class="control">
      <!-- 播放/暂停 -->
      <a href="javascript:;" class="btn fa fa-play"></a>
      <!-- 进度条 -->
      <div class="progress" width="502">
        <div class="line"></div>
      </div>
      <!-- 时间 -->
      <div class="timer">