<div class="video">
  <video id="ten_video" width="100%" height="100%" x-webkit-airplay="true" webkit-playsinline="true" preload="auto" src="http://121.14.123.11/vhot2.qqvideo.tc.qq.com/i01579n5ikw.mp4?vkey=B4D915AA268D5B24697668EAB4B26666718E0AC27064D83319FFAF2BF236AD97A8A000358544BA915F64681BEBA4B6472831AF898016585FE58ED15A1BBBB92DD1071EA114D19FF04FDE702F57C2269429357F82EFA35F51&amp;br=60&amp;platform=2&amp;fmt=mp4&amp;level=10&amp;sdtfrom=v5010"></video>
</div>
<div class="box">
      Hello Live Blur!
  </div>
<div class="btn">Play video</div>

<script>
var video = document.querySelector('#ten_video');
  document.querySelector('.btn').onclick = function(){
      if( video.paused){
        video.play()
      }else{
        video.pause()
      }
  }
</script>

body{
    height: 800px;
    background: url(http://i.gtimg.cn/qqlive/images/20150730/1.jpg) 0 0 no-repeat ;
    -webkit-background-size: cover;
    background-size: cover;
    font-family: sans-serif;
  }
.box{
  position: fixed;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 90%;
  height: 100px;
  line-height: 100px;
  font-size: 20px;
  margin: auto;
  text-align: center;
  color: #fff;
  -webkit-transform: translate(-50%,-50%);
  -webkit-backdrop-filter: blur(10px);
}
.video{
  position: fixed;
  z-index: 1;
  width: 320px;
  height: 249px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
}
.btn{
    position: fixed;
    z-index: 5;
    bottom: 10px;
    left: 50%;
    margin-left: -90px;
    width: 180px;
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    text-align: center;
}