<li onclick="showVideo(1)"><label>第1講</label>怎樣記住新知識？</li>

<div class="video">
      <video x5-video-player-type="h5-page" x5-video-player-fullscreen="true" controls
          poster="" src="" x5-video-orientation="landscape|portrait"></video>
          <
 
span class="closevideo">關閉</span>
    </div>

// 播放視訊
    function showVideo (num) {
     
      $('.video').show();
      $('video').attr('poster', './images/school/banenr_poetry.png') // 載入時圖片
      $('video').attr('src', `./video/jiyifa_0${num}.mp4`) // 視訊位置
    }

$('.closevideo').click(() => {
      $(
 
'.video').hide();
    })

.video {
  display: none;
  position: fixed;
  top:3rem;
  left:0;
  z-index: 100;
  background: #000;
}
/*視訊播放*/
.video video {
  position: relative;
  width: 100%;
  height: auto; 
}
.closevideo {
  position: absolute;
  bottom: .2rem;
  left: .2rem;
  display: inline-block;
  font-size
 
: .24rem;
  color: #fff;  
}