网页播放视频，video标签小结

目前网站使用的video 标签：

<div class="video-wrap">
  <video width="100%" id="video_151424066_video" preload="metatdata" poster="//commondata.yunnan.cn/video/ynsp.jpg" x5-playsinline="" playsinline="" webkit-playsinline=""><source src="//news.yunnan.cn/video/003/014/656/00301465600_vw00000000000001_b6cdcdcf.mp4" type="video/mp4"></video>
  <div class="play-btn" data-vid="video_151424066_video"></div>
</div>

.video-wrap {
  position: relative;
}
.play-btn {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  background: rgba(0,0,0,.6);
  border-radius: 50%;
}
.play-btn:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-left-width: 20px;
  border-left-color: #fff;
  border-width: 10px 0 10px 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

$('.play-btn').click(function(){
  var id = $(this).attr('data-vid');
  var vid = document.getElementById(id);
  $('#' + id).attr('controls', 'controls');
  $(this).remove();
  vid.play();
});

一个video标签就搞定的事情为啥多了这么多代码？

主要是为了兼容iOS和android手机不同的样式，单个video标签在不同系统中显示不一致，将默认样式都取消掉

两个注意的点：video标签里面没有加controls="controls"属性，preload=“metadata”，不加controls是为了不显示按钮，让视频纯粹显示为poster的图片，preload用metadata是因为如果用autoload在pc上会不显示poster。