1

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

1 回答 1

0

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

它可能看起来像这样，

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
    },

您将能够引用playerOptions您在 中时的相同方式data()，即this.playerOptions，但是现在它将是动态的。

于 2021-10-13T01:37:04.457 回答