vue 使用video-players插件安装不上解决如下

本文介绍了如何从项目中删除vue-video-player及其相关依赖,包括vue-router、videojs-contrib-hls等,并指导如何正确导入和配置插件如axios。还提到了在遇到下载问题时的解决方法和启动开发环境的设置技巧。
摘要由CSDN通过智能技术生成

        

删除项目里node_modules下的vue-video-player

以及package.json里的"vue-video-player": "",

卸载

npm uninstall vue-video-player

安装

npm install --save vue-video-player@5.0.1  --force

路径问题可以试试下面这个

npm install --save vue-router@3.5.0  --force

还有下面的也装下

npm install --save videojs-contrib-hls --force

npm install --save dplayer --force

下载插件

npm install -save axios --force

main.js加入

第一个是下载插件

import axios from 'axios'

require('video.js/dist/video-js.css');
require('vue-video-player/src/custom-theme.css');
import hls from 'videojs-contrib-hls';
import VideoPlayer from 'vue-video-player';

Vue.use(hls);
Vue.use(VideoPlayer);

下载插件如不行可在相应页面引入

const axios = require('axios');

我不加就可以下载

若还是下载报错,axios加上this,即this.axios.get(…)

我不加就可以下载

启动
$env:NODE_OPTIONS="--openssl-legacy-provider"
npm run dev

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue-video-player 是一个用于 Vue.js 应用程序的轻量级视频播放插件,它简化了在 Vue 组件中集成视频播放功能的过程。这个插件允许您快速添加视频播放器,并提供了各种自定义选项和事件处理,以满足不同场景的需求。 以下是使用 Vue-video-player 的基本步骤: 1. 安装插件使用 npm 或者 yarn 来安装: ```bash npm install vue-video-player # 或者 yarn add vue-video-player ``` 2. 引入并注册插件: 在 main.js 或者其他 Vue 实例的配置文件中,导入并注册插件: ```javascript import VueVideoPlayer from 'vue-video-player' Vue.use(VueVideoPlayer) ``` 3. 在组件中使用视频播放器: 在你的 Vue 组件模板中,创建一个 `<vue-video-player>` 元素,设置 `url` 属性为视频源,可选地提供其他属性,如播放器样式、控制条、预加载等: ```html <vue-video-player url="path/to/your/video.mp4" :controls="true" :preload="auto" :poster="海报图片地址" ></vue-video-player> ``` 你可以使用 `:options` 或 `v-bind="$attrs"` 来传递更多的自定义配置,如自定义事件监听等。 4. 事件处理: 视频播放器会触发一些内置事件,如 `play`, `pause`, `ended`, 等,你可以在组件内监听这些事件并执行相应的操作: ```html <vue-video-player @play="onPlay" @pause="onPause"></vue-video-player> ``` ```javascript methods: { onPlay() { console.log('Video started playing'); }, onPause() { console.log('Video paused'); } } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值