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