vue3+xgplayer实现短视频功能

短视频应用的流畅性和用户交互性在用户体验中扮演着重要角色。上下切换视频、点赞、收藏和分享等交互功能是常见且重要的功能模块。此外，视频预加载也能够提升视频播放的流畅度，避免切换时出现等待现象。本文将展示如何通过 Vue 3 和 XGPlayer（一款基于 HTML5 的高性能视频播放器）来实现这些功能。

一、项目需求概述

我们将实现以下功能：

视频上下切换：用户可以通过滑动手势或点击按钮上下切换视频。
点赞、收藏、分享功能：每个视频可以进行点赞、收藏和分享，增加用户互动。
视频预加载：为了提高用户体验，在切换视频时，下一个视频会提前加载。
集成 XGPlayer ：我们将使用 XGPlayer 替代原生的 <video> 标签，提供更丰富的功能和控制。

二、安装和配置 XGPlayer

2.1 安装 XGPlayer

首先，我们需要通过 npm 安装 XGPlayer 库：

css 复制代码

npm install xgplayer --save

2.2 引入 XGPlayer 到 Vue 项目中

在 Vue 3 中，我们将 XGPlayer 作为一个第三方库来使用。在组件中，我们可以通过 import 引入 XGPlayer 并进行配置。

三、实现视频播放和切换

3.1 创建 `VideoPlayer` 组件

VideoPlayer 组件将用于渲染每个视频，并集成 XGPlayer 作为播放器。

xml 复制代码

<template>
  <div class="video-player" ref="videoContainer">
    <!-- 视频播放器容器 -->
    <div ref="player" class="xgplayer-container"></div>
    <div class="controls">
      <button @click="likeVideo">👍 {{ likeCount }}</button>
      <button @click="collectVideo">⭐ {{ collectCount }}</button>
      <button @click="shareVideo">🔗 分享</button>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue';
import XGPlayer from 'xgplayer'; // 引入 XGPlayer

export default defineComponent({
  props: {
    videoUrl: String, // 视频地址
  },
  data() {
    return {
      likeCount: 0,
      collectCount: 0,
    };
  },
  methods: {
    likeVideo() {
      this.likeCount++;
    },
    collectVideo() {
      this.collectCount++;
    },
    shareVideo() {
      alert("分享功能未实现");
    },
    initPlayer() {
      this.player = new XGPlayer({
        el: this.$refs.player,
        url: this.videoUrl, // 初始化视频地址
        autoplay: true,  // 设置自动播放
        preload: 'auto', // 设置视频预加载
      });
    },
  },
  mounted() {
    this.initPlayer();
  },
  watch: {
    videoUrl(newUrl) {
      if (this.player) {
        this.player.src = newUrl; // 切换视频时更新播放器的 URL
      }
    },
  },
});
</script>

<style scoped>
.video-player {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: auto;
  background-color: black;
}
.controls {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
}
button {
  padding: 10px;
  font-size: 16px;
}
</style>

解释：

播放器初始化 ：我们在 mounted 生命周期钩子中初始化 XGPlayer。url 属性指定视频源，preload 设置为 auto 确保视频会提前加载。
视频切换 ：通过 watch 监听 videoUrl 的变化，每次切换视频时更新播放器的 src 属性，从而加载新的视频。

VideoList 组件负责展示视频列表并支持上下切换功能。

xml 复制代码

<template>
  <div
    class="video-list"
    @touchstart="onTouchStart"
    @touchmove="onTouchMove"
    @touchend="onTouchEnd"
  >
    <div v-for="(video, index) in videos" :key="video.id" class="video-item">
      <VideoPlayer :videoUrl="video.url" />
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import VideoPlayer from './VideoPlayer.vue';

export default defineComponent({
  components: { VideoPlayer },
  data() {
    return {
      videos: [
        { id: 1, url: 'https://path/to/video1.mp4' },
        { id: 2, url: 'https://path/to/video2.mp4' },
        { id: 3, url: 'https://path/to/video3.mp4' }
      ],
      currentIndex: 0,
      touchStartY: 0,
      touchEndY: 0,
    };
  },
  methods: {
    onTouchStart(event) {
      this.touchStartY = event.touches[0].clientY;
    },
    onTouchMove(event) {
      this.touchEndY = event.touches[0].clientY;
    },
    onTouchEnd() {
      if (this.touchStartY - this.touchEndY > 50) {
        this.nextVideo();
      } else if (this.touchEndY - this.touchStartY > 50) {
        this.previousVideo();
      }
    },
    nextVideo() {
      this.currentIndex = (this.currentIndex + 1) % this.videos.length;
    },
    previousVideo() {
      this.currentIndex = (this.currentIndex - 1 + this.videos.length) % this.videos.length;
    },
  },
});
</script>

<style scoped>
.video-list {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.video-item {
  padding: 20px;
  width: 100%;
}
</style>

解释：

视频列表 ：通过 v-for 遍历 videos 数组，渲染每个视频。每次切换视频时，currentIndex 会更新，从而更新当前显示的视频。
触摸滑动切换 ：监听 touchstart、touchmove 和 touchend 事件，用于判断用户的滑动方向。当滑动超过一定阈值时，触发视频切换。

3.3 视频预加载实现

为了实现视频预加载，我们需要在视频切换时提前加载下一个视频的内容。可以在切换时调用播放器的 load() 方法进行预加载。

kotlin 复制代码

nextVideo() {
  const nextIndex = (this.currentIndex + 1) % this.videos.length;
  this.currentIndex = nextIndex;
  const nextVideo = this.videos[nextIndex];
  this.$refs[`videoPlayer-${nextVideo.id}`].load();  // 触发预加载
},
previousVideo() {
  const prevIndex = (this.currentIndex - 1 + this.videos.length) % this.videos.length;
  this.currentIndex = prevIndex;
  const prevVideo = this.videos[prevIndex];
  this.$refs[`videoPlayer-${prevVideo.id}`].load();  // 触发预加载
}

通过提前加载下一个视频的内容，我们确保视频切换时的平滑过渡。