ks-app-employment-service/packageA/pages/post/component/videoPlayer.vue

<template>
    <!-- 小窗播放容器 -->
    <view
        v-if="visible"
        class="mini-player"
        :style="{
            left: position.x + 'px',
            top: position.y + 'px',
            width: isFullScreen ? '100%' : '300rpx',
            height: isFullScreen ? '100vh' : '200rpx',
        }"
        @touchstart="handleTouchStart"
        @touchmove="handleTouchMove"
        @touchend="handleTouchEnd"
        @touchmove.stop.prevent
    >
        <!-- 视频组件 -->
        <video
            :src="videoUrl"
            :controls="true"
            :show-progress="isFullScreen"
            :style="{
                width: '100%',
                height: '100%',
            }"
            id="myVideo"
            @play="onPlay"
            @pause="onPause"
        ></video>

        <!-- 控制栏 -->
        <view class="controls">
            <!--   <text @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</text>
            <text @click="toggleFullScreen">{{ isFullScreen ? '退出全屏' : '全屏' }}</text> -->
            <text @click="close">关闭</text>
        </view>
    </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { nextTick } from 'vue';

const visible = ref(false);
const isPlaying = ref(false);
const isFullScreen = ref(false);
const videoUrl = ref('');
const position = reactive({ x: 20, y: 100 });
const videoContext = ref(null);
const startPos = reactive({ x: 0, y: 0 });
const moving = ref(false);

// 初始化视频上下文
onMounted(() => {
    videoContext.value = uni.createVideoContext('myVideo');
});

// 触摸开始
const handleTouchStart = (e) => {
    if (isFullScreen.value) return;
    startPos.x = e.touches[0].clientX - position.x;
    startPos.y = e.touches[0].clientY - position.y;
    moving.value = true;
};

// 触摸移动
const handleTouchMove = (e) => {
    if (!moving.value || isFullScreen.value) return;

    const newX = e.touches[0].clientX - startPos.x;
    const newY = e.touches[0].clientY - startPos.y;

    // 边界检测
    const maxX = window.innerWidth - 150; // 300rpx换算后的值
    const maxY = 50 + window.innerHeight - 200;

    position.x = Math.max(0, Math.min(newX, maxX));
    position.y = Math.max(0, Math.min(newY, maxY));
};

// 触摸结束
const handleTouchEnd = () => {
    moving.value = false;
};

// 播放状态变化
const onPlay = () => {
    isPlaying.value = true;
};

const onPause = () => {
    isPlaying.value = false;
};

// 切换播放状态
const togglePlay = () => {
    isPlaying.value ? videoContext.value.pause() : videoContext.value.play();
};

// 切换全屏
const toggleFullScreen = () => {
    isFullScreen.value = !isFullScreen.value;
    if (!isFullScreen.value) {
        // 退出全屏时恢复原位
        position.x = 20;
        position.y = 100;
    }
};

// 关闭播放器
const close = () => {
    visible.value = false;
    videoContext.value.stop();
    isPlaying.value = false;
    isFullScreen.value = false;
};

// 打开播放器方法
const open = (url) => {
    videoUrl.value = url;
    visible.value = true;
    nextTick(() => {
        videoContext.value.play();
    });
};

// 暴露方法
defineExpose({ open });
</script>

<style scoped>
.mini-player {
    position: fixed;
    z-index: 999;
    background: #000;
    border-radius: 8rpx;
    overflow: hidden;
    box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.3);
}

.controls {
    position: absolute;
    top: 0;
    right: 0;
    /* background: rgba(0, 0, 0, 0.7); */
    padding: 10rpx;
    display: flex;
    justify-content: space-around;
}

.controls text {
    color: #fff;
    font-size: 24rpx;
    padding: 8rpx 16rpx;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4rpx;
}
</style>