第一种:vue3-video-play
1、安装方式
(1)npm安装方式
npm install vue3-video-play --save
(2)yarn安装方式
yarn add vue3-video-play --save
2、页面引入
import 'vue3-video-play/dist/style.css';
import VideoPlay from 'vue3-video-play';
3、示例代码
<template>
<VideoPlay v-bind="options" width="100%" height="650px"/>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import 'vue3-video-play/dist/style.css';
import VideoPlay from 'vue3-video-play';
// 视频配置项
const options = reactive({
src: '', //视频源
muted: false, //静音 自动播放会自己静音
webFullScreen: false,
speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
autoPlay: true, //自动播放
loop: false, //循环播放
mirror: false, //镜像画面
ligthOff: false, //关灯模式
volume: 0.3, //默认音量大小
control: true, //是否显示控制器
poster: '',
type: 'm3u8',
});
// 调用接口
getVideo()
// 模拟接口获取视频源
async function getVideo() {
const res = await getVideoInfo();
options.src = res.data;
}
</script>
<style scoped>
</style>
vue3-video-play 支持video原生所有Attributes video原生属性 使用方式和props属性使用一致
名称 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
width | 播放器宽度 | string | - | 800px |
height | 播放器高度 | string | - | 450px |
color | 播放器主色调 | string | - | #409eff |
4、效果图
第二种:chimee-player 官方文档
1、引入依赖
npm install chimee-player --save
2、示例代码
<template>
<div id="wrapper"></div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import ChimeePlayer from 'chimee-player';
// 调用接口
getVideo()
// 模拟接口获取视频源
async function getVideo() {
const res = await getVideoInfo();
new ChimeePlayer ({
wrapper: '#wrapper', // video dom容器
src: res.data,
box: 'hls', // 视频编码flv、native和hls
isLive: false, // 类型
autoplay: true, // 自动播放
controls: false, // 控制器
muted: true // 静音
});
}
</script>
<style scoped>
</style>