在 uni-app 中实现商品详情页的悬浮视频播放组件，你可以利用 Vue 组件化开发的优势，结合 uni-app 提供的 API 和第三方视频播放器库（如 video.js 或直接使用 uni-app 自带的 <video> 组件）来实现。下面是一个基本的实现示例，使用 uni-app 自带的 <video> 组件，并通过 CSS 和 Vue 逻辑实现悬浮效果。

1. 创建悬浮视频播放组件

首先，创建一个名为 FloatingVideo.vue 的组件：

<template>
  <view class="floating-video-container" v-if="showVideo">
    <video
      class="video-player"
      :src="videoSrc"
      controls
      @click.stop="toggleVideo"
      @play="onPlay"
      @pause="onPause"
      @ended="onEnded"
    ></video>
    <view class="close-btn" @click="toggleVideo">×</view>
  </view>
</template>

<script>
export default {
  props: {
    videoSrc: {
      type: String,
      required: true
    },
    showVideo: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    toggleVideo() {
      this.$emit('update:showVideo', !this.showVideo);
    },
    onPlay() {
      console.log('Video is playing');
    },
    onPause() {
      console.log('Video is paused');
    },
    onEnded() {
      console.log('Video has ended');
      this.$emit('update:showVideo', false);
    }
  }
};
</script>

<style scoped>
.floating-video-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.video-player {
  width: 90%;
  max-width: 500px;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  color: white;
  cursor: pointer;
}
</style>

2. 在商品详情页中使用组件

然后，在商品详情页中引入并使用该组件：

<template>
  <view>
    <!-- 商品详情内容 -->
    <button @click="showVideo = true">播放视频</button>
    <floating-video
      :videoSrc="videoUrl"
      :showVideo.sync="showVideo"
    ></floating-video>
  </view>
</template>

<script>
import FloatingVideo from '@/components/FloatingVideo.vue';

export default {
  components: {
    FloatingVideo
  },
  data() {
    return {
      showVideo: false,
      videoUrl: 'https://example.com/path/to/your/video.mp4'
    };
  }
};
</script>

这个示例展示了如何创建一个简单的悬浮视频播放组件，并在商品详情页中使用它。你可以根据需要进一步美化样式和增加功能，比如调整视频大小、添加播放列表等。