观看视频时，通常可以通过控制视屏下方的播放控件来调节视频的播放效果，接下来，制作一个包含视频播放控件的视频播放页面。本案例只需完成页面展示效果即可，按钮功能需通过引入JavaScript代码来实现。 练习目标 Ø 视频的插入方法。 Ø 复习盒子宽与高的使用方法。 Ø 复习导航栏的设置。 具体实现步骤如下： a) 具体实现步骤如下： b) 先设定一个大盒子，内部嵌套视频及播放控件。 c) 通过video元素插入视频。 d) 控件结构由无序列表定义，并设置li左浮动。 e) 定义文字样式等。

HTML代码：

<div class="container">
  <video src="your-video-url.mp4"></video>
  <ul class="controls">
    <li><button id="playpause">播放/暂停</button></li>
    <li><button id="stop">停止</button></li>
    <li><button id="mute">静音</button></li>
    <li><button id="volinc">音量 +</button></li>
    <li><button id="voldec">音量 -</button></li>
    <li><button id="fs">全屏</button></li>
  </ul>
</div>

CSS代码：

.container {
  position: relative;
  width: 640px;
  height: 360px;
  margin: 0 auto;
}

video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.controls {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.controls li {
  display: inline-block;
  margin: 0 5px;
}

.controls button {
  font-size: 16px;
  background: #fff;
  border: none;
  padding: 10px;
  cursor: pointer;
}

.controls button:hover {
  background: #f2f2f2;
}

JavaScript代码：

var video = document.querySelector('video');
var playpause = document.getElementById('playpause');
var stop = document.getElementById('stop');
var mute = document.getElementById('mute');
var volinc = document.getElementById('volinc');
var voldec = document.getElementById('voldec');
var fs = document.getElementById('fs');

playpause.addEventListener('click', function() {
  if (video.paused || video.ended) {
    video.play();
    playpause.innerHTML = '暂停';
  } else {
    video.pause();
    playpause.innerHTML = '播放';
  }
});

stop.addEventListener('click', function() {
  video.currentTime = 0;
  video.pause();
  playpause.innerHTML = '播放';
});

mute.addEventListener('click', function() {
  video.muted = !video.muted;
  if (video.muted) {
    mute.innerHTML = '取消静音';
  } else {
    mute.innerHTML = '静音';
  }
});

volinc.addEventListener('click', function() {
  alterVolume('+');
});

voldec.addEventListener('click', function() {
  alterVolume('-');
});

function alterVolume(dir) {
  var currentVolume = Math.floor(video.volume * 10) / 10;
  if (dir === '+') {
    if (currentVolume < 1) video.volume += 0.1;
  }
  else if (dir === '-') {
    if (currentVolume > 0) video.volume -= 0.1;
  }
}

fs.addEventListener('click', function() {
  handleFullscreen();
});

function handleFullscreen() {
  if (video.requestFullscreen) {
    video.requestFullscreen();
  } else if (video.webkitRequestFullscreen) {
    video.webkitRequestFullscreen();
  } else if (video.mozRequestFullScreen) {
    video.mozRequestFullScreen();
  }
}