SOURCE

condocument.getElementById('fullscreen');

<div class="videoPlayer" id="videoPlayer">
  <video>
    <track kind="captions" autoPlay />
  </video>
  <div class="controls">
    <div>
      <div class="progressBar">
        <div class="timeBar"></div>
      </div>
    </div>
    <div>
      <span class="current">
        00:00
      </span>
      /
      <span class="duration">
        00:00
      </span>
    </div>
    <div id="fullscreen" onClick="this.fullscreen">
      <span class="fill">
        全屏
      </span>
    </div>
  </div>
</div>

.videoPlayer {
  position: relative;
  background-color: #000000;
}

.controls {
  width: 100%;
  height: 2rem;
  line-height: 2rem;
  font-size: 0.8rem;
  color: white;
  display: block;
  position: absolute;
  bottom: 0;
  background-color: rgba(0, 0, 0, .55);
  display: flex;
}

.controls > * {
  flex: 1;
}

.controls > *:nth-child(1) {
  flex: 6;
}

.controls > *:nth-child(2) {
  flex: 2;
  text-align: center;
}

.controls .progressBar {
  margin: .75rem 5%;
  position: relative;
  width: 90%;
  height: .5rem;
  background-color: rgba(200, 200, 200, .55);
  border-radius: 10px;
}

.controls .timeBar {
  position: ab solute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: rgba(99, 110, 225, .85);
  border-radius: 10px;
}