HTML5自定义播放器（简式）

这是html5中自带的标签<video></video>,非常实用。使用这个标签有诸多好处（好处我就不多说了，详见谷歌、必应、百度）。

这个html5播放器的主体就是<video></video>标签的属性包括：

·src : 视频的URL

·poster : 视频封面，没有播放时显示的图片

·preload : 预加载

·autoplay : 自动播放

·loop : 循环播放

·controls ： 浏览器自带的控制条

·width : 视频宽度

·height : 视频高度

video标签配合上JS有很多操作方法和变形，有许多的大牛给过栗子，我就不献丑了，这里就开始制作这个简式的播放器。

效果图：

核心代码（非media方法）：

  1   <video loop id="video" preload style="width: 500px;">
  2     <!--音源-->
  3     <source src="img/九九八十一.webm">
  4     <span>您的浏览器不支持video标签，请换个浏览器试一下吧</span>
  5   </video>
  6   <div>
  7     <progress id="progress" value="0" max="100" style="width: 450px"></progress>
  8     <span>00:00</span>/<span>01:31</span>
  9   </div>
 10    <div>
 11      <button id="btn_play">播放</button>
 12      <button id="btn_pause">暂停</button>
 13      <button id="btn_muted">静音</button>
 14      <button id="btn_fullScreen">全屏</button>
 15      <input type="range" value='1' name="range" id="btn_volume" min="0" max="1" step='0.1'>
 16      <button id="btn_go">加速</button>
 17      <button id="btn_back">减速</button>
 18      <button id="go_five">快进5s</button>
 19      <button id="back_five">后退5s</button>
 20    </div>
 21 
 22    <script>
 23      var btn_play = document.getElementById('btn_play');
 24      var btn_pause = document.getElementById('btn_pause');
 25      var video = document.getElementById('video');
 26       //播放
 27        btn_play.disabled = false;
 28       btn_play.addEventListener('click', function