如何以编程方式绑定 Nuxt/Vue 中的视频播放器 URL？

Question

我正在寻找如何以编程方式绑定视频播放器网址的想法。我理解使用 img 并执行 v-for 和 :src 的想法，但是我的视频的 url 被放入脚本的数据中。是否也可以绑定并使这些程序化？这是一个工作脚本的示例，但我只需手动将其替换为每个视频的组件。

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

<script>
export default {
  name: "index",
  data() {
    return {
      playerOptions: {
        sources: [{
            type: 'application/x-mpegurl',
            src: 'myvideo.m3u8'
        }],

上面的代码可以工作，但我需要为每个视频都有一个组件。然后在每个组件中放置相同的代码，但更改 m3u8 视频的 src 名称。理想情况下，我只想将 api 中的某些内容传递到 m3u8 的 src 并创建一个动态组件。问题是，我将如何制作这个动态组件？

我尝试了类似的方法，但无法在脚本中执行 :src。

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

<script>
export default {
  name: "index",
  data() {
    return {
      playerOptions: {
        sources: [{
            type: 'application/x-mpegurl',
            :src: video.url
        }], 

Answer 1

@tomdale 我不确定我是否正确理解了你的问题，但如果你想要一些动态的东西，你可能最好从你的 data() 属性中删除 playerOptions 并将其转换为计算属性。

它可能看起来像这样，

computed: {
    playerOptions() {
      return {
        sources: [{
          type: 'application/x-mpegurl',
          src: this.video.url
        }]
      }
    },
}

您的问题并未真正显示您从哪里获取 video 和 video.url 数据，但如果该组件正在处理视频数据集合，您可以执行类似的操作，

    playerOptions() {
      let sources = []
      let i = 0
      while (i < this.videos.length) {
        sources.push({
          type: 'application/x-mpegurl',
          src: this.videos[i].url
        })

        i++
      }

      return sources
    },

您可以像在data() 中一样引用playerOptions，即this.playerOptions，但是现在它将是动态的。