当前位置：首页 > VUE

vue实现字幕

2026-02-10 15:59:06VUE

Vue实现字幕的基本方法

在Vue中实现字幕功能可以通过多种方式完成，以下是几种常见的方法：

使用v-for动态渲染字幕列表

<template>
  <div class="subtitle-container">
    <div v-for="(line, index) in subtitles" :key="index" class="subtitle-line">
      {{ line.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      subtitles: [
        { time: 0, text: "第一句字幕" },
        { time: 3, text: "第二句字幕" },
        { time: 6, text: "第三句字幕" }
      ]
    }
  }
}
</script>

<style>
.subtitle-container {
  position: fixed;
  bottom: 20%;
  width: 100%;
  text-align: center;
}
.subtitle-line {
  color: white;
  background-color: rgba(0,0,0,0.5);
  padding: 8px 16px;
  border-radius: 4px;
  margin: 4px auto;
  display: inline-block;
}
</style>

实现时间轴同步的字幕

对于视频播放场景，需要根据当前播放时间显示对应字幕：

export default {
  data() {
    return {
      currentTime: 0,
      subtitles: [
        { start: 0, end: 3, text: "开场字幕" },
        { start: 3, end: 6, text: "剧情发展" },
        { start: 6, end: 9, text: "高潮部分" }
      ]
    }
  },
  computed: {
    currentSubtitle() {
      return this.subtitles.find(sub => 
        this.currentTime >= sub.start && this.currentTime < sub.end
      )
    }
  }
}

使用CSS动画实现滚动字幕

实现横向滚动的新闻条式字幕效果：

vue实现字幕

<template>
  <div class="marquee">
    <div class="marquee-content" :style="marqueeStyle">
      {{ marqueeText }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      marqueeText: "这是一条滚动播放的字幕信息，可以用于公告或提示...",
      duration: 15,
      width: 0
    }
  },
  mounted() {
    this.width = this.$el.offsetWidth
  },
  computed: {
    marqueeStyle() {
      return {
        animation: `marquee ${this.duration}s linear infinite`,
        width: `${this.marqueeText.length * 0.6}em`
      }
    }
  }
}
</script>

<style>
.marquee {
  overflow: hidden;
  white-space: nowrap;
}
.marquee-content {
  display: inline-block;
  padding-left: 100%;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
</style>

实现卡拉OK式高亮字幕

逐字高亮的字幕效果：

<template>
  <div class="karaoke-subtitle">
    <span 
      v-for="(char, index) in text" 
      :key="index"
      :class="{ 'highlight': index < highlightCount }"
    >
      {{ char }}
    </span>
  </div>
</template>

<script>
export default {
  props: ['text', 'progress'],
  computed: {
    highlightCount() {
      return Math.floor(this.text.length * this.progress)
    }
  }
}
</script>

<style>
.karaoke-subtitle {
  font-size: 24px;
}
.karaoke-subtitle span {
  color: #999;
}
.karaoke-subtitle span.highlight {
  color: #ff0;
  transition: color 0.3s;
}
</style>