uni-app 视频播放小控件

在uni-app中创建一个视频播放小控件，你可以利用<video>组件来实现。以下是一个简单的代码示例，包括一个自定义的视频播放控件，具有播放、暂停和全屏切换功能。

首先，确保你的项目中已经引入了uni-app的基础配置。

1. 页面布局 (template)

<template>
  <view class="container">
    <video
      id="videoPlayer"
      class="video"
      src="https://www.example.com/your-video.mp4"
      :controls="false"
      @play="onPlay"
      @pause="onPause"
      @ended="onEnded"
      ref="videoRef"
    ></video>
    <view class="controls">
      <button @click="togglePlayPause">
        {{ isPlaying ? 'Pause' : 'Play' }}
      </button>
      <button @click="toggleFullScreen">
        {{ isFullScreen ? 'Exit FullScreen' : 'FullScreen' }}
      </button>
    </view>
  </view>
</template>

2. 样式 (style)

<style scoped>
.container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.video {
  width: 300px; /* Adjust based on your design */
  height: 200px; /* Adjust based on your design */
}

.controls {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

button {
  margin: 0 10px;
}
</style>

3. 逻辑 (script)

<script>
export default {
  data() {
    return {
      isPlaying: false,
      isFullScreen: false,
      videoRef: null,
    };
  },
  methods: {
    onPlay() {
      this.isPlaying = true;
    },
    onPause() {
      this.isPlaying = false;
    },
    onEnded() {
      this.isPlaying = false;
    },
    togglePlayPause() {
      this.videoRef.current[this.isPlaying ? 'pause' : 'play']();
    },
    toggleFullScreen() {
      if (this.isFullScreen) {
        uni.exitFullScreen();
      } else {
        uni.requestFullScreen({
          target: '#videoPlayer',
        });
      }
      this.isFullScreen = !this.isFullScreen;
    },
  },
  mounted() {
    this.videoRef = this.$refs.videoRef;
    this.videoRef.current.addEventListener('play', this.onPlay);
    this.videoRef.current.addEventListener('pause', this.onPause);
    this.videoRef.current.addEventListener('ended', this.onEnded);
  },
  beforeDestroy() {
    this.videoRef.current.removeEventListener('play', this.onPlay);
    this.videoRef.current.removeEventListener('pause', this.onPause);
    this.videoRef.current.removeEventListener('ended', this.onEnded);
  },
};
</script>

以上代码展示了如何在uni-app中创建一个基本的视频播放控件，包括播放/暂停和全屏切换功能。你可以根据实际需求进一步定制控件的样式和功能。