vue3-video-play的使用_vue3videoplayer

vue3-video-play 具体使用方式

npm安装

npm i vue3-video-play --save
1

SPA 单页面使用示例

<script setup>
import { reactive, toRefs, onBeforeMount, onMounted } from "vue";
import 'vue3-video-play/dist/style.css'
import {videoPlay} from 'vue3-video-play'
const data = reactive({
  options: {
    width: "800px", //播放器高度
    height: "450px", //播放器高度
    color: "#409eff", //主题色
    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, //是否显示控制器
    title: "", //视频名称
    src: "https://yun.66dm.net/SBDM/SummerTimeRendering23.m3u8", //视频源
    poster: "", //封面
    type: "m3u8", //视频类型
  },
});
onBeforeMount(() => {
  console.log("2.组件挂载页面之前执行----onBeforeMount");
});
onMounted(() => {
  console.log("3.-组件挂载到页面之后执行-------onMounted");
});
const onPlay = (ev) => {
  console.log("播放", ev);
};
const onPause = (ev) => {
  console.log(ev, "暂停");
};
const onTimeupdate = (ev) => {
  console.log(ev, "时间更新");
};
const onCanplay = (ev) => {
  console.log(ev, "可以播放");
};

const { options } = { ...toRefs(data) };
</script>

<template>
  <div>
    <videoPlay v-bind="options" @play="onPlay" @pause="onPause" @timeupdate="onTimeupdate" @canplay="onCanplay" />
  </div>
</template>
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
41
42
43
44
45
46
47
48
49
50
51

可选属性

可选事件