点击图片弹出视频播放窗口效果

使用CSS/js实现点击图片弹出视频播放窗口效果

       

         本人菜鸡大学生一个，如有错误请见谅。拿我的实训期间的小组项目举例，我负责的是模仿魅族官网的服务页面；里面有一部分就是点击图片然后页面跳转到视频播放页面，但是我懒【主要是出现了bug我不会解决，还是我菜的问题，就换了下面的方法来解决，里面还有一些不完善的部分请见谅，主要是分享从网上学习到的方法来这个效果。

参考网址：https://blog.csdn.net/AK852369/article/details/99680374

首先是效果图：

 

 点击其中的播放图片，就会弹出视频窗口【请忽视我弄的这么丑的样式】， 点击右上方的叉就可以关闭视频窗口。

 

代码部分

HTML部分

我写了一左一右两个图片都能点击弹出视频，在这里就只放一个，CSS部分也请忽略另一个。

<div class="video-p">
<div class="video1">  
    <div class="img-play" > 
        <img src="image/播放.png" id="playv1"> 
      <div id="videobox1">
        <span id="closex1">x</span>
        <video width="500" height="300" controls="" style="margin:20px">
          <source src="video/video_care.mp4" type="video/mp4">
        </video>
      </div>
    </div>
    <div class="caption1">
      <span style="font-size: 16px">魅族服务15周年</span>
    </br>
    <span style="font-size:12px">这是我们</span>
  </div>
</div>
</div>

css部分  

/*视频播放*/
.video-p{
  width:100%;
  height:250px;
  margin-top: 10px;
  background-color: #e9eeee;
  display:flex; 
  justify-content: space-around;
}
.video1,.video2{
  width:615px;
  height:160px;
}
.img-play{
  float: left;
  margin-top: 50px;
  padding-left: 150px;
  /*width: 50%*/
}
.img-play:hover{ 
  cursor: pointer; 
}
.caption{
  float: right;
  margin-top: 65px;
  padding-right: 200px;
}
.caption1{
  float:right;
  margin-top: 65px;
  padding-right: 265px;
  /*width: 50%*/
}
.caption span,.caption1 span{
  color: #fff;
}
.video1{
  background-image: url(../image/v1.jpg);
}
.video2{
  background-image: url(../image/v2.jpg);
}
#videobox,#videobox1{
  width: 550px; 
  height: 340px; 
  background-color: #fff;
  border: 1px solid #ddd; 
  position: fixed; 
  top: 50%; 
  margin-top: -250px; 
  left: 50%; margin-left: -250px; 
  z-index: 999; 
  display: none;
}
#closex,#closex1{
  position: absolute; 
  right: 0; 
  top: 0; 
  z-index: 1000; 
  display: block; 
  width: 20px; 
  line-height: 20px; 
  text-align: center; 
  cursor: pointer;
}

js部分

<script type="text/javascript">
  var playv = document.getElementById('playv');
var videobox = document.getElementById('videobox');
var closex  = document.getElementById('closex');
playv.onclick = function()
{
  videobox.style.display = 'block';
}
closex.onclick = function()
{
  videobox.style.display = 'none';
}
</script>

以上就是我的全部分享，请忽略我的样式问题，本人第一次写博客，如有错误请见谅。