【Nuxt】四、vue-video-player使用

本文链接:【Nuxt】四、vue-video-player使用
相关文档:【Vue】插件:八、结合 vue-video-player、videojs-flash、videojs-contrib-hls使用videojs播放视频
相关文档:【JS&JQuery】videojs插件使用

video.js

|--项目
|--|--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);

video-zh-CN.json

|--项目
|--|--node_modules
|--|--|--video.js
|--|--|--|--dist
|--|--|--|--|--lang
|--|--|--|--|--|--zh-CN.js

将zh-CN.js中的 JSON 内容拷贝至video-zh-CN.json中

{
    "Play": "播放",
   ...
}

|--|--plugins
|--|--|--video.js
|--|--|--video-zh-CN.json

nuxt.config.js

plugins: [
    "@/plugins/video",
  ],
 build: {
    transpile: [/^element-ui/],
    /*
     ** You can extend webpack config here
     */
    postcss: [
      require("postcss-px2rem")({
        remUnit: 100
      })
    ],
    extend(config, {isDev, isClient}) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: "pre",
          test: /\.(js|vue)$/,
          loader: "eslint-loader",
          exclude: /(node_modules)/
        });
        config.devtool = "eval-source-map";
      }
      config.module.rules.push({
        test: /\.swf$/,
        loader: "url-loader",
        options:{
          limit: 10000
        }
      });
    }
  }

template

第1种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
      }
    },
}

第2种SSR

template

script

script

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', // 建议浏览器在