vue3+vite 使用liveplayer加载视频

vue3+vite 使用liveplayer加载视频

官网: https://www.liveqing.com/docs/manuals/LivePlayer.html

• 支持WebRTC/MP4播放;
• 支持m3u8/HLS播放;
• 支持HTTP-FLV/WS-FLV/RTMP播放;
• 支持直播和点播播放;
• 支持播放器快照截图;
• 支持点播多清晰度播放;
• 支持全屏或比例显示;
• 自动检测IE浏览器兼容播放;
• 支持自定义叠加层;

• 安装

npm install @liveqing/liveplayer-v3@3.7.35
# 安装 rollup-plugin-copy 插件,用于复制依赖到public下
npm install rollup-plugin-copy@3.5.0

• 配置vite.config.js

import copy from 'rollup-plugin-copy';export default defineConfig({plugins: [vue(),copy({targets: [{ src: 'node_modules/@liveqing/liveplayer-v3/dist/component/liveplayer-lib.min.js', dest: 'public/js' }],}),],
});

• 在index.html中引入 liveplayer-lib.min.js

 <script src="/js/liveplayer-lib.min.js"></script>

• 创建组件SDVideoPlayer.vue

<template><LivePlayerref="livePlayerRef":videoUrl="url":videoTitle="videoTitle":poster="poster":controls="controls":loop="loop":fluent="fluent":autoplay="autoplay":live="live":stretch="stretch":alt="alt":muted="muted":aspect="aspect":timeout="timeout":showCustomButton="showCustomButton":hideBigPlayButton="hideBigPlayButton":hideSnapshotButton="hideSnapshotButton":hideFullscreenButton="hideFullscreenButton":hideFluentButton="hideFluentButton":hideStretchButton="hideStretchButton":resolution="resolution":resolutiondefault="resolutiondefault":playbackRates="playbackRates":playbackRate="playbackRate":hasaudio="hasaudio":hasvideo="hasvideo":customButtons="customButtons":autofocus="autofocus":dblclickFullscreen="dblclickFullscreen":language="language":waterMark="waterMark":digitalZoom="digitalZoom"@message="handleMessage"@error="handleError"@ended="handleEnded"@timeupdate="handleTimeupdate"@pause="handlePause"@play="handlePlay"@fullscreen="handleFullscreen"@snapOutside="handleSnapOutside"@snapInside="handleSnapInside"@customButtons="handleCustomButtons"@canplay="handleCanplay"@volumechange="handleVolumechange"></LivePlayer>
</template><script setup>
import LivePlayer from '@liveqing/liveplayer-v3';
import { ref, defineProps, defineEmits } from 'vue';const livePlayerRef = ref(null);const props = defineProps({/*** 视频地址*/url: {type: String,default: '',},/*** 视频右上角显示的标题*/videoTitle: {type: String,default: '',},/*** 视频封面图片*/poster: {type: String,default: '',},/*** 自动播放*/autoplay: {type: Boolean,default: true,},/*** 显示播放器控制栏*/controls: {type: Boolean,default: true,},/*** 是否循环播放*/loop: {type: Boolean,default: false,},/*** 是否直播, 标识要不要显示进度条*/live: {type: Boolean,default: false,},/*** 视频流地址没有指定情况下, 视频所在区域显示的文字,相当于 html img 标签的 alt 属性*/alt: {type: String,default: '无信号',},/*** 是否静音*/muted: {type: Boolean,default: true,},/*** 视频显示区域的宽高比,fullscreen 即是全屏展示*/aspect: {type: String,default: '16:9',},/***  流畅模式*/fluent: {type: Boolean,default: true,},/***  是否拉伸*/stretch: {type: Boolean,default: false,},/***  m3u8 加载超时(秒)*/timeout: {type: Number,default: 20,},/***  是否在工具栏显示自定义按钮(极速/流畅, 拉伸/标准)*/showCustomButton: {type: Boolean,default: true,},/***  是否隐藏起播状态下的大播放按钮*/hideBigPlayButton: {type: Boolean,default: false,},/***  是否隐藏 快照 按钮*/hideSnapshotButton: {type: Boolean,default: false,},/***  是否隐藏 全屏 按钮*/hideFullscreenButton: {type: Boolean,default: false,},/***  是否隐藏 极速/流畅 按钮*/hideFluentButton: {type: Boolean,default: false,},/***  是否隐藏 拉伸/标准 按钮*/hideStretchButton: {type: Boolean,default: false,},/***  HLS点播流播放时使用：需已有对应清晰度的HLS流，供选择的清晰度配置,*  如 "yh,fhd,hd,sd" (说明：*  yh:原始分辨率，*  fhd:超清，*  hd:高清，*  sd:标清,*  不配置则不启用,*  需要提供多清晰度源，比如原画源是test.m3u8, 则hd源即为test_hd.m3u8)*/resolution: {type: String,default: '',},/***  HLS点播流播放时使用：默认播放的清晰度*/resolutiondefault: {type: String,default: 'hd',},/***  HLS点播流播放时使用：倍速列表*/playbackRates: {type: Array,default: [0.5, 1, 2, 3],},/***  HLS点播流播放时使用：默认倍速*/playbackRate: {type: Number,default: 1,},/***  HTTP-FLV播放时使用: 是否有音频，传递该属性用于处理只有音频或只有视频的源, Boolean 默认不配置自动判断*/hasaudio: {type: Boolean,},/***  HTTP-FLV播放时使用: 是否有视频，传递该属性用于处理只有音频或只有视频的源, Boolean 默认不配置自动判断*/hasvideo: {type: Boolean,},/***  v2.5.1  自定义工具栏按钮, 配置模板(按钮名称[:class名称]), 多个用英文逗号分隔,*  示例：custom-buttons="对讲,配置:vjs-icon-cog"*/customButtons: {type: String,default: '',},/***  v2.5.2  是否自动获取焦点*/autofocus: {type: Boolean,default: false,},/***  v2.5.3  是否双击全屏*/dblclickFullscreen: {type: Boolean,default: true,},/***  v2.6.2  语言(zh-CN/en) 默认不配置自动判断*/language: {type: String,},/***  v2.7.12  水印文字*/waterMark: {type: String,default: '',},/***  v2.7.29  电子放大*/digitalZoom: {type: Boolean,default: false,},
});const handleSubmit = () => {emits('add', 111);
};const emits = defineEmits(['message','error','ended','timeupdate','pause','play','fullscreen','snapOutside','snapInside','customButtons','canplay',
]);
/////////////////////////////// 事件 ///////////////////////////////
/*** m3u8 加载失败时触发通知消息, 参数: { type: '', message: ''}*/
function handleMessage(obj) {emits('message', obj);
}
/*** 播放器出错回调, 参数: Error Object*/
function handleError(obj) {this.$emit('error', obj);
}
/*** 播放结束, 参数: 无*/
function handleEnded() {this.$emit('ended');
}
/*** 进度更新, 参数: 当前时间进度*/
function handleTimeupdate(obj) {this.$emit('timeupdate', obj);
}
/*** 暂停, 参数: 当前时间进度*/
function handlePause(obj) {this.$emit('pause', obj);
}
/*** 播放, 参数: 当前时间进度*/
function handlePlay(obj) {this.$emit('play', obj);
}
/*** 全屏状态改变, 参数：true/false*/
function handleFullscreen(obj) {this.$emit('fullscreen', obj);
}
/*** 外部快照回调, 参数: 快照 Base64 数据*/
function handleSnapOutside(obj) {this.$emit('snapOutside', obj);
}
/*** 内部快照回调, 由控制栏快照按钮触发, 参数: 快照 Base64 数据*/
function handleSnapInside(obj) {this.$emit('snapInside', obj);
}
/*** v2.5.1 自定义按钮点击回调, 参数：名称*/
function handleCustomButtons(obj) {this.$emit('customButtons', obj);
}
/*** v2.7.32 可播放, 参数：时长（秒）*/
function handleCanplay(obj) {this.$emit('canplay', obj);
}
/*** v2.7.32 音量改变回调, 参数：音量（0~1），静音状态*/
function handleVolumechange(obj) {this.$emit('volumechange', obj);
}
/////////////////////////////// 方法 ///////////////////////////////
/*** 播放*/
function play() {livePlayerRef.value.play();
}
/*** 暂停*/
function pause() {livePlayerRef.value.pause();
}
/*** 获取暂停状态*/
function paused() {livePlayerRef.value.paused();
}
/***  获取当前播放时间进度, 同步返回播放时间进度数据*/
function getCurrentTime() {livePlayerRef.value.getCurrentTime();
}
/***  v2.2.5 设置当前播放时间进度, 即 seek*/
function setCurrentTime() {livePlayerRef.value.setCurrentTime();
}
/***  外部 API 方式获取快照, 快照获取成功后, 触发 snapOutside Event*/
function snap() {livePlayerRef.value.snap();
}
/***  获取静音状态*/
function getMuted() {livePlayerRef.value.getMuted();
}
/***  设置静音状态*/
function setMuted() {livePlayerRef.value.setMuted();
}
/***  v1.7.6 获取全屏状态*/
function isFullscreen() {livePlayerRef.value.isFullscreen();
}
/*** v1.7.6 触发全屏, 需要放置到交互事件回调中调用*/
function requestFullscreen() {livePlayerRef.value.requestFullscreen();
}
/*** v2.1.9 退出全屏, 需要放置到交互事件回调中调用*/
function exitFullscreen() {livePlayerRef.value.exitFullscreen();
}
/*** v2.1.9 触发全屏, 需要放置到交互事件回调中调用, 如果已处在全屏状态, 则退出全屏*/
function toggleFullscreen() {livePlayerRef.value.toggleFullscreen();
}
/*** v1.7.7 获取音量*/
function getVolume() {livePlayerRef.value.getVolume();
}
/*** v1.7.7 设置音量, 0~1*/
function setVolume(val) {livePlayerRef.value.setVolume(val);
}
/*** v2.7.10 获取点播时长（秒）*/
function getDuration() {livePlayerRef.value.getDuration();
}
</script><style scoped></style>

• 使用组件

 <div style="width: 500px; height: 400px"><SDVideoPlayer :url="url" ref="sdliveplayerRef"></SDVideoPlayer></div>

 url: 'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8'