nuxt视频播放（踩坑）

钟Bubble

于 2023-05-24 16:51:51 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签：音视频 javascript vue.js

本文链接：https://blog.youkuaiyun.com/BubbleABC/article/details/130849685

本文档详细介绍了如何在Nuxt.js项目中集成vue-video-player插件，包括安装插件、配置plugins目录、创建视频组件、在nuxt.config.js中引入、页面调用组件等步骤，并提醒了版本匹配的重要性以及遇到问题时的解决办法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

展示效果：

nuxt样例视频

1.安装vue-video-player插件

①执行命令 npm i vue-video-player 或者 npm i vue-video-player@5.0.2 后者直接安装对应版本号的插件
②安装完之后执行npm i
③安装不对应的版本会报错
④注意安装版本不是vue3.0的请安装（“vue-video-player”: “^5.0.2”）
以下是我的版本：
在这里插入图片描述

2，在plugins目录下新建video.js文件夹

在这里插入图片描述

3，在video.js里引入

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

在这里插入图片描述

4，在nuxt.config.js文件中引入以下内容

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


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

在这里插入图片描述

5,在components组件文件夹下新建一个视频组件页面

在这里插入图片描述

6，页面中添加以下代码

（组件页面全部复制粘贴就好了，后面根据自己的需求做调整）

<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)"
      @loadedd