js 播放器实现上传本地文件并播放

html代码做好后的样式图

<span><label for="inputFile" id="upload-file"><i class="fa fa-upload"></i></label><input type="file" name="" id="inputFile" style="position: absolute;clip: rect(0,0,0,0);"/></span>

上传本地视频文件的核心代码，<i class='fa fa-pause'></i> 需要引用fontAwesome,可以参考  http://www.suanliutudousi.com/2017/10/17/%E9%80%9A%E8%BF%87%E5%AD%97%E4%BD%93%E4%BB%A3%E6%9B%BF%E5%9B%BE%E7%89%87%E4%BC%98%E5%8C%96%EF%BC%8C%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8font-awesome%E5%AD%97%E4%BD%93%E5%9B%BE%E6%A0%87%EF%BC%9F/

base.addHandler(inputFile, "change", function() {
//自行封装的，可以改为其他的。
  var reader = new FileReader(),
    files = this.files[0];
  reader.readAsDataURL(files);
  reader.onload = function(event) {
    var res = event.target.result;
    player.src = res;//player为video标签
    player.load(); //加载
    //本地文件加载时，播放新文件 ，loadedmetadata加载数据源
    base.addHandler(player, "loadedmetadata", function() {
      if(player.paused) {
//若暂停，就播放，并修改默认图标
        player.play();
        btn.innerHTML = "<i class='fa fa-pause'></i>";
      }
    });
  }
});