如何在Nuxt/Vue中为视频播放器动态绑定URL并封装通用组件

错误原因说明 #

你之前的写法存在两个核心问题：

• : 是Vue模板的动态绑定专属语法，不能直接用于script内部的JS对象的键名，所以:src的写法完全不符合JS语法规范，会直接报错
• 要封装可复用的动态组件，需要用props接收外部传入的视频地址，而不是把地址写死在组件的data里

具体实现代码 #

1. 封装通用视频组件 components/CommonVideoPlayer.vue #

<template>
  <div class="player">
    <client-only>
      <video-player
        ref="videoPlayer"
        :options="playerOptions"
      />
    </client-only>
  </div>
</template>

<script>
export default {
  name: "CommonVideoPlayer",
  // 定义props接收外部传入的视频地址
  props: {
    videoUrl: {
      type: String,
      required: true,
      default: ''
    }
  },
  // 用计算属性动态生成播放器配置，视频地址变化时自动更新配置
  computed: {
    playerOptions() {
      return {
        sources: [{
          type: 'application/x-mpegurl',
          src: this.videoUrl
        }]
        // 你原有其他播放器配置可以继续补充在该处
      }
    }
  }
}
</script>

2. 父组件调用示例 #

不管是从API接口拿到的视频地址还是本地固定地址，都可以直接传值使用：

<template>
  <div>
    <!-- 单个视频播放场景 -->
    <CommonVideoPlayer :video-url="currentVideoUrl" />
    
    <!-- 多视频批量渲染场景，和img标签的v-for用法完全一致 -->
    <CommonVideoPlayer 
      v-for="video in videoList" 
      :key="video.id" 
      :video-url="video.m3u8Url" 
    />
  </div>
</template>

<script>
import CommonVideoPlayer from '~/components/CommonVideoPlayer.vue'
export default {
  components: { CommonVideoPlayer },
  data() {
    return {
      currentVideoUrl: '',
      videoList: []
    }
  },
  async mounted() {
    // 调用API获取视频地址
    const res = await fetch('/api/getVideoList').then(r => r.json())
    this.currentVideoUrl = res.currentVideo.m3u8
    this.videoList = res.videoList
  }
}
</script>

扩展优化说明 #

如果你使用的video-player组件支持动态更新src无需重渲染组件，还可以添加监听逻辑避免重复渲染消耗性能：

watch: {
  videoUrl(newUrl) {
    this.$refs.videoPlayer.src(newUrl)
    // 具体调用方法以你使用的video-player组件官方API为准
  }
}

内容的提问来源于stack exchange，提问作者tomdale