video controls

Video标签中的controls属性用于显示视频播放器的控制条，包括播放/暂停按钮、音量控制和进度条等。使用controls属性将自动显示默认的控制条。

在PC电脑上，当使用controls属性时，通常会显示三个点，用于打开更多控制选项。不过，如果你希望自定义控制条的显示内容，可以使用controlslist属性进行设置。在Vue.js中，可以通过在video标签上添加controlslist属性来实现，如下所示：

<video ref="video" controls :src="url" controlslist="nodownload nofullscreen noremoteplayback noplaybackrate" disablePictureInPicture></video>

这样设置后，控制条上的下载按钮（download）、全屏按钮（fullscreen）、远程播放按钮（remote playback）和调节播放速率的按钮（playback rate）将不再显示。

当然，除了使用video标签的自带控件属性，我们也可以自定义视频控制条。在实际开发中，我们通常会使用JavaScript来实现自定义控制条的功能。下面是一个示例代码，用于通过点击按钮来控制视频的播放和暂停：

<video id="video" src="video.mp4"></video>
<button id="playBtn">播放/暂停</button>

<script>
var video = document.querySelector("video");
var playBtn = document.getElementById("playBtn");

playBtn.onclick = function(){
  if(video.paused){
    video.play();
    playBtn.src = "img/pause.png";
  }else{
    video.pause();
    playBtn.src = "img/on.png";
  }
}
</script>

这段代码首先获取video元素和playBtn元素，然后通过给playBtn绑定点击事件来实现播放和暂停的功能。点击按钮时，会判断视频的状态，如果视频是暂停状态，则调用video.play()方法播放视频并修改按钮的显示图标；如果视频正在播放，则调用video.pause()方法暂停视频并修改按钮的显示图标。通过这样的方式，可以实现自定义的视频控制条。

希望对你有所帮助！如果还有其他问题，请随时提问。