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"/>
相关推荐
潼心1412o26 分钟前
C语言(长期更新)第15讲 指针详解(五):习题实战
c语言·开发语言
LFly_ice1 小时前
学习React-9-useSyncExternalStore
javascript·学习·react.js
Murphy_lx1 小时前
Lambda表达式
开发语言·c++
gnip1 小时前
js上下文
前端·javascript
中草药z1 小时前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
yangpipi-1 小时前
C++并发编程-23. 线程间切分任务的方法
开发语言·c++
不知名raver(学python版)2 小时前
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
前端·npm·node.js
醉方休2 小时前
React中使用DDD(领域驱动设计)
前端·react.js·前端框架
excel2 小时前
📖 小说网站的预导航实战:link 预加载 + fetch + 前进后退全支持
前端