当前位置：首页 > VUE

vue实现视频id

2026-01-17 11:24:03VUE

Vue 中实现视频 ID 管理

在 Vue 中管理视频 ID 通常涉及动态绑定、状态管理和 API 交互。以下是几种常见场景的实现方法：

动态绑定视频 ID 到播放器

通过 v-bind 或 :src 动态绑定视频 ID 到播放器组件（如 <video> 或第三方播放器）：

<template>
  <video :src="`https://example.com/videos/${videoId}.mp4`" controls></video>
</template>

<script>
export default {
  data() {
    return {
      videoId: 'abc123' // 默认视频 ID
    }
  }
}
</script>

从路由参数获取视频 ID

通过 Vue Router 的 $route.params 获取 URL 中的视频 ID：

// 路由配置
{
  path: '/video/:id',
  component: VideoPlayer
}

<template>
  <div>{{ $route.params.id }}</div>
</template>

通过 API 请求视频数据

结合 axios 从后端获取视频信息：

export default {
  data() {
    return {
      videoData: null
    }
  },
  async created() {
    const response = await axios.get(`/api/videos/${this.$route.params.id}`);
    this.videoData = response.data;
  }
}

使用 Vuex 集中管理状态

在大型应用中通过 Vuex 管理视频 ID 状态：

// store.js
export default new Vuex.Store({
  state: {
    currentVideoId: null
  },
  mutations: {
    setVideoId(state, id) {
      state.currentVideoId = id;
    }
  }
});

组件中调用：

this.$store.commit('setVideoId', 'newVideoId');

第三方播放器集成示例

以 Video.js 为例的动态 ID 集成：

vue实现视频id

<template>
  <video ref="videoPlayer" class="video-js"></video>
</template>

<script>
import videojs from 'video.js';

export default {
  props: ['videoId'],
  mounted() {
    this.player = videojs(this.$refs.videoPlayer, {
      sources: [{
        src: `https://path/to/${this.videoId}.mp4`,
        type: 'video/mp4'
      }]
    });
  },
  beforeDestroy() {
    if (this.player) this.player.dispose();
  }
}
</script>