vue3-video-play 导入 以及解决报错

复制代码
npm install vue3-video-play --save
# 或者
yarn add vue3-video-play

import Vue3VideoPlay from 'vue3-video-play';
import 'vue3-video-play/dist/style.css';
app.use(Vue3VideoPlay)

<template>
  <div id="main-container-part">
    <div class="all-box">考试中心页面
<!--      <vue3-video-play :src="audioFilePath1"></vue3-video-play>-->
      <!--      <longzeVideoPlay :src="audioFilePath1" :autoplay="autoplay" />-->
      <vue3VideoPlay v-bind="options"
                     poster="https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.jpg"
                     @play="onPlay"
                     @pause="onPause"
                     @timeupdate="onTimeupdate"
                     @canplay="onCanplay"
                     @ended="onVideoEnded"/>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref, reactive, onMounted} from 'vue'
import audioFilePath1 from './video1.mp4'

const videoSrc = ref('/');
const autoplay = ref(true);
const options = reactive({
  // width: '500px', //播放器高度
  // height: '260px', //播放器高度
  color: "#409eff", //主题色
  currentTime: 60,
  speed: false, //关闭进度条拖动
  title: '', //视频名称
  src: audioFilePath1, //视频源
  speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速

})
const onPlay = (ev:any) => {
  console.log('播放')
}
const onPause = (ev:any) => {
  console.log(ev, '暂停')
}

// const onTimeupdate = (ev:any) => {
//   console.log(ev, '时间更新')
// }
const onCanplay = (ev:any) => {
  console.log(ev, '可以播放')
}
const onVideoEnded = () => {
  console.log('视频播放已完成!');
  // 在这里执行你想要的操作
};
</script>

<style lang="scss" scoped>
.all-box {
  //background-color: #67c23a;
  width: 100%;
  height: 100%;
  height: 100%;
  min-height: 62vh;
}
</style>

如果报错没有引入vue3-video-play

修改node-modules文件

复制代码
npm i longze-vue3-video-player



import longzeVideoPlay from "longze-vue3-video-player"; // 引入组件
import "longze-vue3-video-player/dist/style.css"; // 引入css


app.use(longzeVideoPlay)

   <longzeVideoPlay  v-bind="options"
                          @play="onPlay"
                          @pause="onPause"
                          @timeupdate="onTimeupdate"
                          @canplay="onCanplay"
                          @ended="onVideoEnded"/>
相关推荐
10年前端老司机2 分钟前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
Sylvia-girl1 小时前
Java——抽象类
java·开发语言
Yana.nice4 小时前
Bash函数详解
开发语言·chrome·bash
阿芯爱编程4 小时前
2025前端面试题
前端·面试
前端小趴菜055 小时前
React - createPortal
前端·vue.js·react.js
tomorrow.hello5 小时前
Java并发测试工具
java·开发语言·测试工具
晓13136 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
老胖闲聊6 小时前
Python I/O 库【输入输出】全面详解
开发语言·python
菜包eo6 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴7 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript