vue使用video.js
QiKS 人气:18一、下载video.js
npm install --save-dev video.js
二、在vue脚手架中引入video.js(main.js引入)
import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$video = Video //引入Video播放器
三、实例化了视频.js播放器,并在 上销毁了它
<template> <div> <video ref="videoPlayer" class="video-js"></video> </div> </template> <script> import videojs from 'video.js'; //不要忘记包括视频.js CSS,位于 .<code>video.js/dist/video-js.css</code> 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>
三、组件使用video.js
<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" } ] } }; } };
加载全部内容