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

巴特西

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

最新文章

热门文章