h5视频播放器

2020-05-20 网页编程网 网页编程网

}
.title{
  width: 100%;
  height: 48px;
  line-height: 48px;
  background-color: grey;
  text-align: center;
  color: white;
  font-size: 22px;
}
.video{
  width: 100%;
  height: 636px;

}
.videoFile{
  width: 100%;
  height: 636px;  
}
.btn{
  margin-top:10px; 
  width: 100%;
  height: 46px;
}
.play{
  float: left;
  width: 30px;
  height:30px;
  background:url('play.png');
  background-size: cover;/*完全覆盖*/
}
.volume{
  float: left;
  width: 30px;
  height:30px;
  background:url('volume-min.png');
  background-size: cover;/*完全覆盖*/
}
.progress{
  float: left;
  width:800px;
  height:30px;
  background-color: gray; 
}
.openFile{
  float: left;
  width: 30px;
  height:30px;
  background:url('open.png');
  background-size: cover;/*完全覆盖*/
}
</style> 
</head> 
<body> 
<div class="player">
  <div class="title">爱就一个字.mp3</div>
  <div class="video">
    <video class="videoFile" src='1.mp4'></video>
  </div>
  <div class="btn">
    <div class="play"></div>
    <div class="volume"></div>
    <div class="progress"></div>
    <div class="openFile"></div>
  </div>
</div>
<script>
  /*1.获取元素；
  2.在js中监听点击事件；
  点击播放--当前视频状态-当视频播放时，暂停视频修改图片；当暂停时，是播放并修改图片。

*/
  var oPlay=document.querySelector(".play");
  var oVideo=document.querySelector(".videoFile");
  var oVlume=document.querySelector(".volume");
  var toggle='off';/*存状态，默认是暂停*/
  oPlay.onclick=function(){
    if(toggle=='off'){
      oVideo.play();
      oPlay.style.backgroundImage='url(pause.png)';
      toggle='on';
    }else{
      oVideo.pause();
      oPlay.style.backgroundImage='url(play.png)';
      toggle='off';
    }//if
  }//onClick
</script>
</body>

阅读原文

阅读 5066

123 显示电脑版