From 089bf5d2378b3c4a61d795b2a92bede2c193b771 Mon Sep 17 00:00:00 2001
From: admin <344137771@qq.com>
Date: Tue, 06 Jan 2026 11:22:58 +0800
Subject: [PATCH] 1
---
src/components/chat/messaege/VideoMessage.vue | 172 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 172 insertions(+), 0 deletions(-)
diff --git a/src/components/chat/messaege/VideoMessage.vue b/src/components/chat/messaege/VideoMessage.vue
new file mode 100644
index 0000000..97403f6
--- /dev/null
+++ b/src/components/chat/messaege/VideoMessage.vue
@@ -0,0 +1,172 @@
+<template>
+ <div class="video-message" :class="{ full: isFull }">
+ <div class="mask">
+ <div class="toolbar">
+ <p>
+ <i class="el-icon-video-pause" @click="toPlay" v-if="isPlay"></i>
+ <i class="el-icon-video-play" @click="toPlay" v-else></i>
+ </p>
+ <p v-show="isFull">
+ <i class="el-icon-refresh-left" @click="refresh"></i>
+ </p>
+ <p><i class="el-icon-full-screen" @click="full"></i></p>
+ <p v-show="isFull">工具栏</p>
+ </div>
+ </div>
+
+ <video
+ ref="video"
+ height="300"
+ preload="auto"
+ :src="src"
+ @ended="ended"
+ @pause="onPause"
+ @error="onError"
+ @resize="onResize"
+ @canplay="onLoadstart"
+ ></video>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'VideoMessage',
+ props: {
+ src: {
+ type: String,
+ default: '',
+ },
+ },
+ data() {
+ return {
+ isPlay: false,
+ isFull: false,
+ error: false,
+ duration: 0,
+ }
+ },
+ methods: {
+ full() {
+ this.isFull = !this.isFull
+ },
+ onPause() {
+ this.isPlay = false
+ },
+ ended() {
+ this.isPlay = false
+ },
+ toPlay() {
+ let video = this.$refs.video
+
+ if (this.error) return
+
+ if (this.isPlay) {
+ video.pause()
+ } else {
+ video.play()
+ }
+
+ this.isPlay = !this.isPlay
+ },
+ onError() {
+ this.error = true
+ },
+ onResize() {
+ console.log('onResize')
+ },
+ refresh() {
+ this.$refs.video.currentTime = 0
+ },
+ onLoadstart() {
+
+ },
+ },
+}
+</script>
+<style lang="less" scoped>
+.video-message {
+ position: relative;
+ min-width: 150px;
+
+ video {
+ border-radius: 3px;
+ overflow: hidden;
+ cursor: pointer !important;
+ position: relative;
+ margin-bottom: 0;
+ }
+
+ .mask {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+
+ .toolbar {
+ position: absolute;
+ right: 8px;
+ bottom: 8px;
+ width: 40px;
+ min-height: 10px;
+ border-radius: 8px;
+ background: rgba(117, 116, 116, 0.8);
+ padding: 3px 0;
+ overflow: hidden;
+ z-index: 1;
+
+ p {
+ width: 100%;
+ height: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: white;
+ margin: 3px 0;
+ border-bottom: 1px solid rgba(177, 175, 175, 0.5);
+ font-size: 13px;
+ i {
+ font-size: 20px;
+ cursor: pointer;
+ }
+
+ &:last-child {
+ margin-bottom: 0;
+ border-bottom: 0;
+ }
+ }
+ }
+ }
+
+ &.full {
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 99999999;
+ background: rgba(33, 33, 33, 0.6);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ video {
+ height: 100vh;
+ width: 100vw;
+ }
+
+ .mask {
+ display: flex;
+ align-items: center;
+ justify-items: center;
+ justify-content: center;
+
+ .toolbar {
+ right: 30px;
+ width: 60px;
+ bottom: unset;
+ background: rgba(49, 48, 48, 0.9);
+ p {
+ height: 50px;
+ }
+ }
+ }
+ }
+}
+</style>
--
Gitblit v1.9.3