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

Posted 2023-03-07

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

【英文标题】：How do I programmatically bind in video player URLs in Nuxt/Vue?

【发布时间】：2021-10-13 00:28:26

【问题描述】：

我正在寻找如何以编程方式绑定视频播放器网址的想法。我理解使用 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
        ], 

【问题讨论】：

让我们continue this discussion in chat。

【参考方案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，但是现在它将是动态的。