點擊圖片彈出視頻播放窗口效果

使用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>

以上就是我的全部分享，請忽略我的樣式問題，本人第一次寫博客，如有錯誤請見諒。