uni-app视频列表插件

在uni-app中实现一个视频列表插件，可以通过结合uni-list组件和video组件来完成。以下是一个基本的实现案例，展示如何创建一个包含视频列表的页面。

首先，确保你的uni-app项目已经创建并初始化完成。然后，你可以在页面的.vue文件中添加以下代码：

<template>
  <view class="container">
    <uni-list>
      <uni-list-item v-for="(video, index) in videoList" :key="index" class="list-item">
        <view class="video-thumbnail" @click="playVideo(video.url)">
          <image :src="video.thumbnail" mode="aspectFill" class="thumbnail"></image>
          <text class="title">{{ video.title }}</text>
        </view>
      </uni-list-item>
    </uni-list>
    
    <!-- 视频播放器 -->
    <view v-if="isPlaying" class="video-player-container">
      <video
        id="videoPlayer"
        :src="playingVideoUrl"
        controls
        @ended="videoEnded"
      ></video>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoList: [
        { title: 'Video 1', url: 'https://example.com/video1.mp4', thumbnail: 'https://example.com/thumbnail1.jpg' },
        { title: 'Video 2', url: 'https://example.com/video2.mp4', thumbnail: 'https://example.com/thumbnail2.jpg' },
        // 更多视频...
      ],
      isPlaying: false,
      playingVideoUrl: ''
    };
  },
  methods: {
    playVideo(url) {
      this.playingVideoUrl = url;
      this.isPlaying = true;
    },
    videoEnded() {
      this.isPlaying = false;
    }
  }
};
</script>

<style>
.container {
  padding: 20px;
}
.list-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}
.video-thumbnail {
  width: 100%;
  max-width: 300px;
  position: relative;
}
.thumbnail {
  width: 100%;
  height: 150px;
}
.title {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
}
.video-player-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}
video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

这个代码示例展示了如何创建一个简单的视频列表，并在点击列表项时播放相应的视频。videoList数组包含了视频的信息，如标题、URL和缩略图。点击缩略图时，会触发playVideo方法，将视频的URL传递给播放器并显示播放器。视频播放结束后，videoEnded方法会被触发，隐藏播放器。

这个示例只是一个基础实现，你可以根据实际需求进一步定制，如添加更多样式、功能等。