Vue3之使用vue-video-player

• 前端

1.使用npm下载vue-video-player

npm i vue-video-player -S

2.在入口文件main.js引入

import { createApp } from 'vue'
import App from './App.vue'

// 视频插件
import VideoPlayer from 'vue-video-player/src'
import 'video.js/dist/video-js.css' 
import 'vue-video-player/src/custom-theme.css'

const app = createApp(App);
app.use(VideoPlayer)
app.mount('#app')

在这里插入图片描述

3.创建video.vue文件，这个文件主要配置vue-video-player

  
  
    
  
///这是注掉的内容
<!--  

    <!– poster: 封面url –>
    <!– src: 视频url –>
    
  
  -->



import {reactive} from "vue";
//视频播放
const playerOptions=reactive(
    {
      playbackRates: [0.5, 1.0, 1.5, 2.0], //可选择的播放速度
      autoplay: false, //如果true,浏览器准备好时开始回放。
      muted: false, // 默认情况下将会消除任何音频。
      loop: true, // 视频一结束就重新开始。
      preload: 'auto', // 建议浏览器在

4、需要使用视频播放的地方就引入该文件

  
    
      
    
  



import VideoPlayer from './video-Play/video-player.vue'

一、以上代码原来报错

*vue-video-player 报错The media could not be loaded, either because the server or network failed or because the format is not supported*

原因：

我的src的路径即视频文件存放到本地了，路径直接写src: ‘videos/demo.mp4’而不用”/videos/demo.mp4″

若路径写不正确运行npm run build命令打包项目时错误一堆，惨痛教训

二、刚开始运行安装命令时，在入口文件引入报错，会显示找不到文件，在node_moudles里也找不到，后来又运行了，然后运行打包命令后发现引入不会报错了，后修改src路径后正常显示了

npm i vue-video-player -S


后来运行
npm install video.js @videojs-player/vue --save

参考文章：

https://blog.csdn.net/qq_42570449/article/details/121708044

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/aa1bfa060c.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐