在nuxt中使用vue-video-player

一、安装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

<video-player
  class="confVideo vjs-custom-skin video-player"
  ref="videoPlayer"
  :options="playerOptions"
  :playsinline="true"
  customEventName="customstatechangedeventname"
  @ready="playerReadied"
  @loadeddata="onPlayerLoadeddata($event)"
  @canplay="onPlayerCanplay($event)"
  @canplaythrough="onPlayerCanplaythrough($event)"
  @play="onPlayerPlay($event)"
  @playing="onPlayerPlaying($event)"
  @timeupdate="onPlayerTimeupdate($event)"
  @pause="onPlayerPause($event)"
  @waiting="onPlayerWaiting($event)"
  @ended="onPlayerEnded($event)"
  @statechanged="playerStateChanged($event)"
  >
</video-player>

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

<div
  v-video-player:myVideoPlayer="playerOptions"
  class="confVideo vjs-custom-skin video-player"
  ref="videoPlayer"
  :playsinline="true"
  customEventName="customstatechangedeventname"
  @ready="playerReadied"
  @loadeddata="onPlayerLoadeddata($event)"
  @canplay="onPlayerCanplay($event)"
  @canplaythrough="onPlayerCanplaythrough($event)"
  @play="onPlayerPlay($event)"
  @playing="onPlayerPlaying($event)"
  @timeupdate="onPlayerTimeupdate($event)"
  @pause="onPlayerPause($event)"
  @waiting="onPlayerWaiting($event)"
  @ended="onPlayerEnded($event)"
  @statechanged="playerStateChanged($event)"
></div>

script

<script>
  export default {
    mounted() {
      console.log('当前videojs对象, this.myVideoPlayer)
    }
    // Omit the same parts as in the following component sample code
    // ...
  }
</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', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
  muted: true, // 默认情况下将会消除任何音频。
  language: 'zh-CN',
  // aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
  fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
  hls: true, //启用hls？
  flash: {
    hls: { withCredentials: false },
    swf: '/videojs/video-js.swf'
  },
  html5: { hls: { withCredentials: false } },
  sources: [
    {
      type: 'video/mp4', // 资源格式写法：'video/mp4'
      src: '/video/1.mp4' // 本地资源地址，注意：本地资源存放在public文件夹中，本文视频资源路径public/video/1.mp4
    }，
    {
      // withCredentials: true，
      type: 'application/x-mpegURL', // hls
      src: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8' // url地址
    }，
    {
      type:'rtmp/flv',//rtmp
      src:'rtmp://live.hkstv.hk.lxdns.com/live/hks'//rtmp
    },
    {
      type: 'rtmp/flv',//rtmp
      src: `rtmp://58.200.131.2:1935/livetv/hunantv`
    },
    {
      type: 'rtmp/mp4', // 资源格式写法：'video/mp4'
      src: 'rtmp://' // url地址
    }
  ],
  poster: 'path', // 你的封面地址
  // width: document.documentElement.clientWidth,
  // height: this.fileAreaHeight, // 设置高度，fluid需要设置成flase
  // 配置控制栏
  controlBar: {
    volumePanel: {
      inline: false //音量调节是否水平
    },
    currentTimeDisplay: true, //当前播放位置
    timeDivider: false, // 时间分割线
    durationDisplay: false, // 总时间
    progressControl: true, // 进度条
    remainingTimeDisplay: false, // 剩余时间
    fullscreenToggle: true // 全屏按钮
  }
},

参考文章

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