0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update: 视频播放插件更换

This commit is contained in:
JiangQiming 2023-03-07 16:24:40 +08:00
parent 115a905998
commit e61d685e6b
11 changed files with 9592 additions and 5828 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -5,6 +5,7 @@
<%- favicon %> <%- favicon %>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%- title %></title> <title><%- title %></title>
<script src="/js/liveplayer-lib.min.js"></script>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

3292
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@ -13,6 +13,7 @@
"prepare": "husky install" "prepare": "husky install"
}, },
"dependencies": { "dependencies": {
"@liveqing/liveplayer-v3": "^3.7.10",
"@types/marked": "^4.0.8", "@types/marked": "^4.0.8",
"@vitejs/plugin-vue-jsx": "^3.0.0", "@vitejs/plugin-vue-jsx": "^3.0.0",
"@vuemap/vue-amap": "^1.1.20", "@vuemap/vue-amap": "^1.1.20",
@ -34,6 +35,7 @@
"monaco-editor": "^0.36.0", "monaco-editor": "^0.36.0",
"nrm": "^1.2.5", "nrm": "^1.2.5",
"pinia": "^2.0.28", "pinia": "^2.0.28",
"rollup-plugin-copy": "^3.4.0",
"unplugin-auto-import": "^0.12.1", "unplugin-auto-import": "^0.12.1",
"unplugin-vue-components": "^0.22.12", "unplugin-vue-components": "^0.22.12",
"v-clipboard3": "^0.1.4", "v-clipboard3": "^0.1.4",
@ -43,8 +45,7 @@
"vue-router": "^4.1.6", "vue-router": "^4.1.6",
"vue3-json-viewer": "^2.2.2", "vue3-json-viewer": "^2.2.2",
"vue3-markdown-it": "^1.0.10", "vue3-markdown-it": "^1.0.10",
"vue3-ts-jsoneditor": "^2.7.1", "vue3-ts-jsoneditor": "^2.7.1"
"vue3-video-play": "^1.3.1-beta.6"
}, },
"devDependencies": { "devDependencies": {
"@commitlint/cli": "^17.4.1", "@commitlint/cli": "^17.4.1",

1
public/js/liveplayer-lib.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

9
src/components/Player/ScreenPlayer.vue
View File

@ -127,11 +127,7 @@
> >
刷新 刷新
</div> </div>
<LivePlayer <LivePlayer :url="item.url" autoplay />
:src="item.url"
:width="screenWidth"
:height="screenHeight"
/>
</div> </div>
</template> </template>
</div> </div>
@ -192,9 +188,6 @@ const screen = ref(1);
const players = ref<Player[]>([]); const players = ref<Player[]>([]);
// 当前选中的窗口 // 当前选中的窗口
const playerActive = ref(0); const playerActive = ref(0);
// 单个播放窗口宽高
const screenWidth = ref('');
const screenHeight = ref('');
// 历史记录 // 历史记录
const historyList = ref<any[]>([]); const historyList = ref<any[]>([]);
// 展示保存浮窗 // 展示保存浮窗

116
src/components/Player/index.vue
View File

@ -1,50 +1,88 @@
<!-- 视频播放 --> <!-- 视频播放 -->
<template> <template>
<vue3videoPlay v-bind="options" /> <LivePlayer
ref="player"
fluent
:protocol="props.protocol || 'mp4'"
:class="props.className"
:loading="props.loading"
:live="'live' in props ? props.live !== false : true"
:autoplay="'autoplay' in props ? props.autoplay !== false : true"
:muted="'muted' in props ? props.muted !== false : true"
:hide-big-play-button="true"
:poster="props.poster || ''"
:timeout="props.timeout || 20"
:video-url="url || ''"
@play="props.onPlay"
@pause="props.onPause"
@ended="props.onEnded"
@error="props.onError"
@timeupdate="props.onTimeUpdate"
/>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import 'vue3-video-play/dist/style.css'; import LivePlayer from '@liveqing/liveplayer-v3';
import vue3videoPlay from 'vue3-video-play';
const props = defineProps({ type PlayerProps = {
src: { type: String, default: '' }, url?: string;
type: { type: String, default: 'mp4' }, live?: boolean;
width: { type: String, default: '500px' }, autoplay?: boolean;
height: { type: String, default: '280px' }, muted?: boolean;
poster?: string;
timeout?: number;
className?: string;
updateTime?: number;
key?: string | number;
loading?: boolean;
protocol?: 'mp4' | 'flv' | 'hls';
onDestroy?: (e?: any) => void;
onMessage?: (msg: any) => void;
onError?: (err: any) => void;
onTimeUpdate?: (time: any) => void;
onPause?: (e?: any) => void;
onPlay?: (e?: any) => void;
onFullscreen?: () => void;
onSnapOutside?: (base64: any) => void;
onSnapInside?: (base64: any) => void;
onCustomButtons?: (name: any) => void;
onEnded?: (e?: any) => void;
onClick?: () => void;
};
const props = defineProps<PlayerProps>();
const player = ref<HTMLVideoElement>();
const url = ref(props.url);
watchEffect(() => {
url.value = props.url;
}); });
watch( /**
() => props.src, * 播放
(val: string) => { */
options.src = val; const play = () => {
}, player.value?.play();
); };
const options = reactive({ /**
...props, * 暂停
color: '#409eff', //主题色 */
title: '', //视频名称 const pause = () => {
// src: props.src, player.value?.pause();
// type: props.type, };
muted: false, //静音
webFullScreen: false, /**
speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速 * 暂停状态
autoPlay: false, //自动播放 */
loop: false, //循环播放 const paused = () => {
mirror: false, //镜像画面 return player.value?.paused;
ligthOff: false, //关灯模式 };
volume: 0.3, //默认音量大小
control: true, //是否显示控制 defineExpose({
controlBtns: [ play,
'audioTrack', pause,
'quality', paused,
'speedRate',
'volume',
'setting',
'pip',
'pageFullScreen',
'fullScreen',
], //显示所有按钮,
}); });
</script> </script>

11
src/views/media/Device/Channel/Live/index.vue
View File

@ -25,7 +25,7 @@
<div class="tool-item">刷新</div> <div class="tool-item">刷新</div>
<div class="tool-item" @click.stop="handleReset">重置</div> <div class="tool-item" @click.stop="handleReset">重置</div>
</div> </div>
<LivePlayer :src="src" :type="mediaType" /> <LivePlayer :url="url" :protocol="mediaType" autoplay />
</div> </div>
<MediaTool <MediaTool
@onMouseDown="handleMouseDown" @onMouseDown="handleMouseDown"
@ -71,14 +71,14 @@ const _vis = computed({
}); });
// 视频地址 // 视频地址
const src = ref(''); const url = ref('');
// 视频类型 // 视频类型
const mediaType = ref('mp4'); const mediaType = ref<'mp4' | 'flv' | 'hls'>('mp4');
/** /**
* 媒体开始播放 * 媒体开始播放
*/ */
const mediaStart = () => { const mediaStart = () => {
src.value = channelApi.ptzStart( url.value = channelApi.ptzStart(
props.data.deviceId, props.data.deviceId,
props.data.channelId, props.data.channelId,
mediaType.value, mediaType.value,
@ -150,6 +150,9 @@ watch(
if (val) { if (val) {
mediaStart(); mediaStart();
getIsRecord(); getIsRecord();
} else {
// url置空, 即销毁播放器
url.value = '';
} }
}, },
); );

38
src/views/media/Device/Playback/index.vue
View File

@ -6,10 +6,40 @@
<div class="playback-left"> <div class="playback-left">
<LivePlayer <LivePlayer
ref="player" ref="player"
:src="url" autoplay
width="758px" :url="url"
height="462px" className="playback-media"
type="mp4" :live="type === 'local'"
:on-play="
() => {
isEnded = false;
playStatus = 1;
}
"
:on-pause="
() => {
playStatus = 2;
}
"
:on-ended="
() => {
playStatus = 0;
if (playTimeNode && isEnded) {
isEnded = true;
playTimeNode.onNextPlay();
}
}
"
:on-error="
() => {
playStatus = 0;
}
"
:on-time-update="
(e: any) => {
playTime = e;
}
"
/> />
<TimeLine <TimeLine
ref="playTimeNode" ref="playTimeNode"

2
src/views/media/Device/Playback/timeLine.vue
View File

@ -256,7 +256,7 @@ const handleProgress = (event: any, item: any) => {
} }
}; };
defineExpose({ playByStartTime }); defineExpose({ playByStartTime, onNextPlay });
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

6
vite.config.ts
View File

@ -11,6 +11,7 @@ import { createStyleImportPlugin, AndDesignVueResolve } from 'vite-plugin-style-
import * as path from 'path' import * as path from 'path'
import monacoEditorPlugin from 'vite-plugin-monaco-editor'; import monacoEditorPlugin from 'vite-plugin-monaco-editor';
import { JetlinksVueResolver } from './plugin/jetlinks' import { JetlinksVueResolver } from './plugin/jetlinks'
import copy from 'rollup-plugin-copy';
// https://vitejs.dev/config/ // https://vitejs.dev/config/
@ -75,6 +76,11 @@ export default defineConfig(({ mode}) => {
VueSetupExtend(), VueSetupExtend(),
createStyleImportPlugin({ createStyleImportPlugin({
resolves: [AndDesignVueResolve()] resolves: [AndDesignVueResolve()]
}),
copy({
targets: [
{src: 'node_modules/@liveqing/liveplayer-v3/dist/component/liveplayer-lib.min.js', dest: 'public/js'},
]
}) })
], ],
server: { server: {

11933
yarn.lock
View File

File diff suppressed because it is too large Load Diff