Question

我将这个vue组件放入了轨道。

<template>
 <div class="hello">
   <h1>THIS IS VUE<h1/>

<video id="videok" class="video-js vjs-default-skin vjs-big-play-centered" 
 controls preload="auto" width="1500" height="700"
 poster="../../../assets/images/logo.png"
 data-setup='{"example_option":true}'>
<source src="../../../assets/videos/vid.mp4" type="video/mp4" />

</video>

</div>

</template>

<script lang="ts">

import { Component, Prop, Vue } from 'vue-property-decorator';
import videojs from 'video.js';


@Component
export default class VideoVue extends Vue {

 protected player: any;

 mounted() {

   this.player = videojs("videok");

}

}

</script>

<style scoped lang="css">
@import '../../src/video.js/dist/video-js.css';

</style>

我称这个组件如下（来自.html.erb文件）

<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'hello_vue' %>

“ THIS IS VUE”呈现得很好，但是我遇到了这个错误。

安装的挂钩中出现错误：“ TypeError：提供的元素或ID不正确有效。（videojs）”

我注意到document.getElementById('videok')在触发null时是mounted()。如果我执行vue create ""new project"并粘贴此组件的代码，则效果很好。

Answer 1

我查阅了他们的文档，在这里看到了一个非常不同的示例：https://docs.videojs.com/tutorial-vue.html

它只是实例化已安装的Video.js播放器，并在beforeDestroy上销毁它。

<template>
    <div>
        <video ref="videoPlayer" class="video-js"></video>
    </div>
</template>

<script>
import videojs from 'video.js';

export default {
    name: "VideoPlayer",
    props: {
        options: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {
        return {
            player: null
        }
    },
    mounted() {
        this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
            console.log('onPlayerReady', this);
        })
    },
    beforeDestroy() {
        if (this.player) {
            this.player.dispose()
        }
    }
}
</script>

然后您可以像这样使用它：（有关选项信息，请参阅选项指南）

<template>
  <div>
        <video-player :options="videoOptions"/>
    </div>
</template>

<script>
import VideoPlayer from "@/components/VideoPlayer.vue";

export default {
    name: "VideoExample",
    components: {
        VideoPlayer
    },
    data() {
        return {
            videoOptions: {
                autoplay: true,
                controls: true,
                sources: [
                    {
                        src:
                            "/path/to/video.mp4",
                          type: "video/mp4"
                    }
                ]
            }
        };
    }
};

别忘了包含位于video.js / dist / video-js.css的Video.js CSS。

在Rails中使用Vue组件（带有video.js）时出现问题

1 个答案: