uni-app 仿抖音短视频插件需求（切换流畅，能暂停）

1196097915 联系我Q

针对您提出的uni-app仿抖音短视频插件需求，以下是一个简化的代码案例，用于实现视频切换流畅且能暂停的功能。为了实现这一目标，我们将使用uni-app的<video>组件，并结合一些逻辑控制来实现视频的切换和暂停。

首先，确保在pages.json中配置了必要的页面路径。

接下来，在页面的.vue文件中，我们可以这样实现：

<template>
  <view class="container">
    <view class="video-container">
      <video
        :src="currentVideo.src"
        :controls="false"
        @play="onVideoPlay"
        @pause="onVideoPause"
        @ended="onVideoEnded"
        ref="videoPlayer"
        class="video"
      ></video>
      <button @click="prevVideo">上一个</button>
      <button @click="nextVideo">下一个</button>
      <button @click="togglePause">{{ isPaused ? '播放' : '暂停' }}</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videos: [
        { src: 'path/to/video1.mp4' },
        { src: 'path/to/video2.mp4' },
        { src: 'path/to/video3.mp4' },
      ],
      currentIndex: 0,
      isPaused: false,
      currentVideo: {},
    };
  },
  mounted() {
    this.currentVideo = this.videos[this.currentIndex];
  },
  methods: {
    prevVideo() {
      this.currentIndex = (this.currentIndex - 1 + this.videos.length) % this.videos.length;
      this.updateVideo();
    },
    nextVideo() {
      this.currentIndex = (this.currentIndex + 1) % this.videos.length;
      this.updateVideo();
    },
    updateVideo() {
      this.currentVideo = this.videos[this.currentIndex];
      this.$refs.videoPlayer.pause(); // Pause current video before switching
      this.$nextTick(() => {
        this.$refs.videoPlayer.play(); // Play new video after DOM update
      });
    },
    togglePause() {
      const videoPlayer = this.$refs.videoPlayer;
      if (videoPlayer.paused) {
        videoPlayer.play();
      } else {
        videoPlayer.pause();
      }
      this.isPaused = !this.isPaused;
    },
    onVideoPlay() {
      console.log('Video is playing');
    },
    onVideoPause() {
      console.log('Video is paused');
    },
    onVideoEnded() {
      this.nextVideo(); // Automatically play next video when current one ends
    },
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.video-container {
  position: relative;
  width: 300px;
  height: 500px;
  margin: 20px 0;
}
.video {
  width: 100%;
  height: 100%;
}
button {
  margin: 5px;
}
</style>

上述代码展示了如何使用<video>组件来播放视频，并通过按钮控制视频的切换和暂停。注意，为了保持切换流畅，我们在切换视频前会先暂停当前视频，并在DOM更新后播放新视频。同时，我们处理了视频的播放、暂停和结束事件，以满足基本需求。