Vue 原生video 进度条缓冲

如何实现？

要实现Vue原生video进度条缓冲功能，需要使用HTML5的progress标签。首先，需要在template里添加如下代码：

<video ref="videoPlayer" src="你的视频地址"></video>
<progress ref="progressBar" value="0" max="100"></progress>

然后在JavaScript中，需要给video标签添加事件监听，当video的loadedmetadata事件被触发时，获取视频总时长并将其赋值给progress的max属性：

this.$refs.videoPlayer.addEventListener('loadedmetadata', () => {
this.$refs.progressBar.max = Math.floor(this.$refs.videoPlayer.duration);
});

接着，需要添加timeupdate事件监听，每当视频播放时间改变时，更新progress的value属性和缓冲条的value属性：

this.$refs.videoPlayer.addEventListener('timeupdate', () => {
this.$refs.progressBar.value = Math.floor(this.$refs.videoPlayer.currentTime);
if (this.$refs.videoPlayer.buffered.length > 0) {
this.$refs.progressBar.buffer = Math.floor(this.$refs.videoPlayer.buffered.end(0));
}
});

最后，需要在CSS中设置progress元素的样式，以及缓冲条的样式：

progress[value]::-webkit-progress-value {
background-color: #333;
border-radius: 2px;
}
progress[value]::-webkit-progress-bar {
background-color: #ddd;
border-radius: 2px;
}
progress[value]::-webkit-progress-buffer {
background-color: #555;
}

这样就完成了Vue原生video进度条缓冲功能的实现。