Video.js 没有在 Vue 中获得更新的源代码

问题描述

我正在尝试使用 Video.js 嵌入 YouTube 视频。

我使用 Django REST Framework 设置了 Vue，并且我正确地获取了我的嵌入代码，但是当我创建 Video.js 播放器时，源是“未定义的”，即使它被绑定也不会更新。 如果我对 YouTube 地址进行硬编码，而不是绑定，则播放器会加载。

App.vue

<template>
  <div id="app">
    <Video :embedCode="video.embedCode" />
  </div>
</template>


<script>
import Video from "./components/Video";
import axios from 'axios';

export default {
  name: 'App',components: {
    Video
  },data() {
    return {
      video: [],};
  },methods: {
    loadVideo: function() {
      axios.get('/api/video/1').then(
        response => {
          this.video = response.data;
        }
      );
    },},created() {
    this.loadVideo();
  },}
</script>

Video.vue

<template>
    <div>
        <video-player :embedCode="embedCode" />
    </div>
</template>

<script>
import VideoPlayer from "./VideoPlayer";

    export default {
        name: "Video",props: {
            text:String,id:Number,title:String,category:Number,description:String,embedCode:String,views:Number,components: {
            VideoPlayer
        },}
</script>

VideoPlayer.vue

<template>
    <div>
        <video ref="videoPlayer" class="video-js">
            <source :src="videoURL" type="video/youtube" />
        </video>
    </div>
</template>

<script>
require('videojs-youtube')
import videojs from 'video.js';

export default {
    name: "VideoPlayer",props: {
        embedCode:String,computed: {
        videoURL: function() {
            return "https://www.youtube.com/watch?v=" + this.embedCode;
        }
    },mounted() {
        this.player = videojs(this.$refs.videoPlayer)
    },beforeDestroy() {
        if (this.player) {
            this.player.dispose()
        }
    },}
</script>

为什么会这样？ 谢谢大家

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）