我将视频ID列表加载到我的小型Vue应用中。我使用npm包“ vue-youtube”:“ 1.3.4”。通过选择元素,我可以选择一个新的视频。我想禁用某些视频中的控件。 我的问题是:功能changeVideo中的参数控件已更改为0,我也可以在vue开发工具中看到它,但是当前视频仍在启用控件的情况下显示:(
<template>
<div>
<select
:value="currentVideo.videoId"
@input="changeVideo"
>
<option
v-for="option in options"
:value="option.value"
>
{{ option.label }}
</option>
</select>
<youtube
:video-id="currentVideo.videoId"
:player-vars="playerOptions"
ref="youtube"
/>
</div>
</template>
<script>
export default {
name: 'app',
components: {},
props: {
playlistId: {
type: String,
default: 'myid'
},
apiKey: {
type: String,
default: 'myapikey',
},
},
data() {
return {
api: {
url: 'https://www.googleapis.com/youtube/v3/playlistItems',
},
currentVideo: {},
playlist: [],
playerOptions: {
rel: 0,
autoplay: 0,
showinfo: 0,
controls: 1,
},
}
},
methods: {
async changeVideo(event) {
this.playerOptions.controls = 0
await this.player.stopVideo()
const selectedVideo = this.playlist.find(video => video.videoId ===
event.target.value)
this.currentVideo = {...selectedVideo}
await this.player.loadVideoById(this.currentVideo.videoId)
this.player.playVideo()
},
},
computed: {
player() {
return this.$refs.youtube.player || null
},
},
</script>
我的应用程序其他部分显然还有更多的逻辑(在mount()中获取视频,依此类推),但是它们可以正常工作。这些是我认为最相关的部分。