vue的nuxt框架中使用vue-video-player

  一、基本需求：使用nuxt框架，需要在移动端网页中播放视频。
  二、文中解决的基本问题：
      1、vue-video-player在nuxt中怎么使用。
      2、由于为了适配移动端，使用了postcss-px2rem插件，如何解决vue-video-player的样式与postcss-px2rem插件的冲突。
      3、如何播放m3u8的视频。
  三、解决方案：
      1、vue-video-player在nuxt中的使用：
        1) npm i vue-video-player --save
        2) 编写插件： 在plugins目录下新建 videoPlayer.js文件

 import Vue from 'vue'
 const VueVideoPlayer = require('vue-video-player/dist/ssr')
 Vue.use(VueVideoPlayer)

　　3）创建组件： 在components文件下新建VueVideo.vue文件，注意class="video-player-box" 这个是约定的。

<template>
  <section class="vueVideo">
    <div
      v-video-player:myVideoPlayer="playerOptions"
      class="video-player-box"
      :playsinline="playsinline"
      @play="onPlayerPlay($event)"
      @pause="onPlayerPause($event)"
      @ended="onPlayerEnded($event)"
      @loadeddata="onPlayerLoadeddata($event)"
      @waiting="onPlayerWaiting($event)"
      @playing="onPlayerPlaying($event)"
      @timeupdate="onPlayerTimeupdate($event)"
      @canplay="onPlayerCanplay($event)"
      @canplaythrough="onPlayerCanplaythrough($event)"
      @ready="playerReadied"
      @statechanged="playerStateChanged($event)"
    ></div>
  </section>
</template>

<script>
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
export default {
  data() {
    return {
      playsinline: true,
      playerOptions: {
        // 播放器配置
        muted: false, // 是否静音
        language: 'zh-CN',
        // aspectRatio: '16:9',
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        controls: true,
        preload: 'auto', // 视频预加载
        fluid: true,
        sources: [
          {
             type: 'video/mp4',
             src:
               'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm'
           }
        ],
        poster: '/imgs/choice/avator.png', // 封面图
        notSupportedMessage: '此视频暂无法播放，请稍后再试'
      }
    }
  },
  mounted() {
    console.log('this is current player instance object', this.myVideoPlayer)
  },
  methods: {
    // 监听播放
    onPlayerPlay(player) {
      // console.log('player play!', player)
    },
    // 监听暂停
    onPlayerPause(player) {
      // console.log('player pause!', player)
    },
    // 监听停止
    onPlayerEnded(player) {
      // console.log('player ended!', player)
    },
    // 监听加载完成
    onPlayerLoadeddata(player) {
      // console.log('player Loadeddata!', player)
    },
    // 监听视频缓存等待
    onPlayerWaiting(player) {
      // console.log('player Waiting!', player)
    },
    // 监听视频暂停后播放
    onPlayerPlaying(player) {
      // console.log('player Playing!', player)
    },
    // 监听视频播放时长更新
    onPlayerTimeupdate(player) {
      // console.log('player Timeupdate!', player.currentTime())
    },
    onPlayerCanplay(player) {
      console.log('player Canplay!', player)
    },
    onPlayerCanplaythrough(player) {
      // console.log('player Canplaythrough!', player)
    },
    // 监听状态改变
    playerStateChanged(playerCurrentState) {
      // console.log('player current update state', playerCurrentState)
    },
    // 监听播放器准备就绪
    playerReadied(player) {
      // console.log('example 01: the player is readied', player)
    }
  }
}
</script>

<style lang="scss" scoped></style>

　　4）配置nuxt.config.js文件

css: [
    'video.js/dist/video-js.css',
  ],
plugins: [{ src: '~plugins/videoPlayer.js', ssr: false }],

　　5）调用组件（只写了关键代码）

<template>
  <div>
    <VueVideo></VueVideo>
  </div>
</template>

import VueVideo from '~/components/VueVideo'

components: {
    VueVideo
  },

  2、解决适配问题：

    postcss-px2rem插件主要是用来适配各种大小的移动端设备，将px转换成rem。但是他会影响到node_modules中的插件的样式。所以，将postcss-px2rem插件换成postcss-px2rem-exclude插件，postcss-px2rem-exclude的好处是可以排除那些不需要要进行单位转化的文件。

1)安装

　　npm uninstall postcss-px2rem

　　npm i postcss-px2rem-exclude -D

2）配置

npm i postcss-px2rem-exclude的官方文档

module.exports = {
  'plugins': {
    'postcss-px2rem-exclude': {
      remUnit: 75,
      exclude: /node_modules|folder_name/i
    }
  }
}

在我的nuxt中的配置是：在nuxt.config.js文件中

  build: {
    /*
     ** You can extend webpack config here
     */
    postcss: [
      require('postcss-px2rem-exclude')({
        remUnit: 75,
        exclude: /video.js/i
      })
    ]
  }

这样postcss-px2rem-exclude就会吧node_modules/video.js文件夹下面的样式排除掉。从而video的样式不会受到postcss-px2rem-exclude的影响。

3、播放m3u8视频

1）先安装videojs-contrib-hls插件

npm i videojs-contrib-hls  --save

2)修改之前的videoPlayer.js文件

import Vue from 'vue'
const VueVideoPlayer = require('vue-video-player/dist/ssr')
// 若是只是想播放普通视频，则不需要videojs-contrib-hls
const hls = require('videojs-contrib-hls')
Vue.use(hls)
Vue.use(VueVideoPlayer)

3）修改VueVideo.vue文件，可换成直播流，这是CCTV1的直播流。

sources: [
          // {
          //   type: 'video/mp4',
          //   src:
          //     'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm'
          // }
          // 直播流
          {
            type: 'application/x-mpegURL/video/mp4',
            src: 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8'
          }
        ]

 

最后，十分感谢以下博文，文章参考：

https://blog.csdn.net/wtyzky/article/details/103859955

https://blog.csdn.net/qq_41980461/article/details/104773632?depth_1-utm_source=distribute.pc_relevant_right.none-task-blog-BlogCommendFromBaidu-5&utm_source=distribute.pc_relevant_right.none-task-blog-BlogCommendFromBaidu-5