一、安装vue-video-player
npm install vue-video-player
二、安装vue-loader
npm install vue-loader
三、在plugins目录下创建video.js文件
import Vue from 'vue';
const VueVideoPlayer= require('vue-video-player/dist/ssr');
const hls = require('videojs-contrib-hls');
import 'vue-video-player/src/custom-theme.css';
import Video from 'video.js';
import 'video.js/dist/video-js.css';
import zhCN from './video-zh-CN.json';
import 'videojs-flash';
const SWF_URL=require('videojs-swf/dist/video-js.swf');
Video.options.flash.swf = SWF_URL; // 设置flash路径，Video.js会在不支持html5的浏览中使用flash播放视频文件
Video.addLanguage('zh-CN', zhCN);// 添加中文支持
Vue.use(hls);
Vue.use(VueVideoPlayer);
四、在plugins目录下创建video-zh-CH.json文件
拷贝node_modules/video/dist/lang/zh-CH.js中的json数据到video-zh-CH.json
注意拷贝的是json数据。不要拷贝其他数据
五、配置nuxt.config.js
plugins: [
{src: "@/plugins/video", ssr: false},
],
build: {
extend(config, {isDev, isClient}) {
config.module.rules.push({
test: /\.swf$/,
loader: "url-loader",
options:{
limit: 10000
}
});
}
}
六、SPA使用
template
script
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
export default {
components: {
videoPlayer
},
mounted() {
console.log('当前videojs对象', this.player)
},
computed: {
player() {
return this.$refs.videoPlayer.player
}
},
}
七、SSR使用
template
script
data
playerOptions: {
techOrder: ['html5', 'flash'], // 兼容顺序,使用flash播放，可以播放flv格式的文件
playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
autoplay: false, // 如果true,浏览器准备好时开始回放
notSupportedMessage: '此视频暂无法播放!', // 无法播放时显示的信息
sourceOrder: true,
loop: false, // 导致视频一结束就重新开始。
// preload: 'auto', // 建议浏览器在参考文章
【Nuxt】四、vue-video-player使用