Vue.js で Video.js を使って動画を再生する

install

$ npm install --save-dev video.js

Component 作成

videoPlayer.vue

<template>
    <video ref="videoPlayer" class="video-js"></video>
</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>

Component 使用

オプション情報についてはオプションガイドを参照してください

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

<script>
import VideoPlayer from "@/components/VideoPlayer.vue";
import 'video.js/dist/video-js.css';

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 を含める。