在vue3+vite中给 Video视频 添加字幕_vue video自定义字幕

Video视频 添加字幕

• • 方式一: 使用 track标签
  • • template标签中
    • css样式修改
  • 方式二:直接读取.vtt文件

方式一: 使用 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