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"/>
相关推荐
mCell1 天前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip1 天前
Node.js 子进程:child_process
前端·javascript
excel1 天前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel1 天前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼1 天前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript