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" 这个是约定的。

4）配置nuxt.config.js文件

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

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

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