如何在next /Vue中以编程方式绑定视频播放器url ?

Question

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

你将能够以同样的方式引用playerOptions，当它在data()时，即this.playerOptions，但现在它将是动态的。