视频播放插件vue3-video-play

###vue3-video-play的github链接
github地址： vue3-video-play
1.下载

npm i vue3-video-play --save
1

2.组建内引用或全局引用

全局引入-main.js

import { createApp } from "vue";
import App from "./App.vue";
let app = createApp(App);

import vue3videoPlay from "vue3-video-play"; // 引入组件
import "vue3-video-play/dist/style.css"; // 引入css
app.use(vue3videoPlay);
app.mount("#app");
1
2
3
4
5
6
7
8

组件内引入

<template>
  <videoPlay
      v-bind="options"
      @timeupdate="onTimeUpdate"
      @loadstart="onLoadStart"
  />
</template>
1
2
3
4
5
6
7

import "vue3-video-play/dist/style.css";
import { videoPlay } from "vue3-video-play";

// 视频播放的options
let options=reactive({
  width: "100%", //播放器高度
  height: "100%", //播放器高度
  color: "#409eff", //主题色
  title: "", //视频名称
  src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
  muted: false, //静音
  webFullScreen: false,
  speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
  autoPlay: false, //自动播放
  loop: false, //循环播放
  mirror: false, //镜像画面
  ligthOff: false, //关灯模式
  volume: 0.3, //默认音量大小
  control: true, //是否显示控制
  currentTime:0,//跳转到固定播放时间
  controlBtns: [
    "audioTrack",
    "quality",
    "speedRate",
    "volume",
    "setting",
    "pip",
    "pageFullScreen",
    "fullScreen",
  ], //显示所有按钮,
})
// 更新播放时间
const onTimeUpdate=(ev)=>{
//播放实时更新播放时间并将时间传递给后端
}

// 客户端开始请求数据
const onLoadStart=(ev)=>{
//重新打开该视频获取最后一次的播放时间，并赋值给ev.target.currentTime继续上次退出时观看
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40