Reproducción de vídeo Nuxt (pisando el foso)

Visualización de resultados:

siguiente video de muestra

1. Instale el complemento vue-video-player

① Ejecute el comando npm i vue-video-player o npm i [email protected] Este último instala directamente el complemento con el número de versión correspondiente
② Ejecute npm i después de la instalación
③ Se informará un error al instalar la versión que no corresponde
④ Preste atención a la versión instalada Si no es vue3.0, instale ("vue-video-player": "^5.0.2")
La siguiente es mi versión:

2. Cree una nueva carpeta video.js en el directorio de complementos

3. Introducir en video.js

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

4. Introducir el siguiente contenido en el archivo nuxt.config.js

css: ['video.js/dist/video-js.css']


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

5. Cree una nueva página de componentes de video en la carpeta de componentes

6. Agregue el siguiente código a la página

(Simplemente copie y pegue todas las páginas de los componentes y realice los ajustes según sus propias necesidades más adelante)

<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'
const video = require('../../static/img/v01.mp4')
export default {
    
    
  data() {
    
    
    return {
    
    
      playsinline: true,
      playerOptions: {
    
    
        // 播放器配置
        muted: true, // 是否静音
        language: 'zh-CN',// 语言
        // aspectRatio: '16:9',// 视频比例
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度可选列表
        controls: true,
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）。
        autoplay:true,// 是否等浏览器准备好后自动播放
        loop:true,// 结束后是否重新开始
        fluid: true,// 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [// 播放视频源
          {
    
    
             type: 'video/mp4',
             src:
            //  video
            'http://vjs.zencdn.net/v/oceans.mp4'
           }
        ],
        poster: '', // 封面图
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        controlBar: {
    
    
          //当前时间和持续时间的分隔符
          timeDivider: false,
          //显示持续时间
          durationDisplay: false,
          //是否显示剩余时间功能
          remainingTimeDisplay: false,
          //全屏按钮
          fullscreenToggle: false,
          //播放暂停按钮
          playToggle: false,
          //音量控制
          volumeMenuButton: false,
          //当前播放时间
          currentTimeDisplay: false,
          //点播流时，播放进度条，seek控制
          progressControl: false,
          //直播流时，显示LIVE
          liveDisplay: false,
          //播放速率，当前只有html5模式下才支持设置播放速率
          playbackRateMenuButton: false
        }

      }
    }
  },
  mounted() {
    
    
    console.log('this is current player instance object', this.myVideoPlayer)
    this.myVideoPlayer.play();// 这些都是让视频自动播放的
    
  },
  methods: {
    
    
    // 监听播放
    onPlayerPlay(player) {
    
    
      // console.log('player play!', player)
      this.myVideoPlayer.play();
    },
    // 监听暂停
    onPlayerPause(player) {
    
    
      // console.log('player pause!', player)
      this.myVideoPlayer.play();
    },
    // 监听停止
    onPlayerEnded(player) {
    
    
      // console.log('player ended!', player)
      this.myVideoPlayer.play();
    },
    // 监听加载完成
    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" >
//这俩样式是隐藏播放按钮的
.vjs-big-play-button,
.vjs-control-bar{
    
    
    display: none !important;
}
</style>

7. Uso de componentes

Llame a este nombre de componente directamente en la página. La

ruta nuxt se genera automáticamente. Puede encontrar este nombre de componente directamente en el archivo index.js en la carpeta de componentes en la carpeta .nuxt en el proyecto (los nombres de todos los componentes en la página se puede encontrar aquí)

Ejecute npm run dev para ver la página después de llamar

Nota:
si aún informa un error después de las operaciones anteriores, se recomienda eliminar el paquete de archivos node_modules y ejecutar npm i nuevamente (de lo contrario, su versión no es correcta)