方式一: 使用 track标签

参考1:https://blog.csdn.net/weixin_42321819/article/details/112442773
参考2:https://blog.csdn.net/foren_whb/article/details/80810552

template标签中

<div ref="wrapperRef" class="video-container w-full box-border bg-black p-20px min-h-400px"><video ref="videoRef" class="my-video  pos-relative w-full h-400px" controls><source :src="video_1" type="video/mp4"><track src="/src/assets/video/video_1.vtt" srclang="en" kind="subtitles" label="English" default></video>
</div>

css样式修改

/* 直接给字幕标签加样式是无效的，必须以下面的方法给样式。*/
/* 由于google chrome和firefox的字幕默认样式是黑色背景，因此需要样式调整 */
<style lang="scss">video {width: 100%;display: block;}video::cue {background-color: transparent;color: #fff;font-size: 16px;background-color: rgba(0, 0, 0