vue

vue中集成video.js

这是一个基于vue的播放案例。

它是在mounted实例化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 css,位于video.js/dist/video-js.css


上一篇:videojs(常用函数示例) 下一篇:webpack(构建工具)