uni-app 多格式视频播放器插件需求

建议直播直接用M3U8或HLS格式的视频源,RTSP或者RTMP即使是原生的也兼容的不是很好

针对您提出的uni-app多格式视频播放器插件需求，以下是一个基于Vue和uni-app框架实现的简单多格式视频播放器插件的示例代码。此示例将展示如何集成一个能够播放多种格式（如MP4、AVI、FLV等）视频的播放器插件。

1. 插件安装

首先，确保您已经在项目中安装了uni-app和相关的依赖。对于视频播放，可以使用video组件，它是uni-app原生支持的。

2. 插件代码实现

在您的pages目录下创建一个新的页面，例如videoPlayer.vue，并在其中实现视频播放功能。

<template>
  <view class="container">
    <video
      class="video-player"
      :src="videoSource"
      controls
      autoplay
      @ended="onVideoEnd"
    ></video>
    <button @click="changeSource">Change Video</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoSource: 'https://example.com/path/to/your/video.mp4', // 初始视频源
      videoList: [
        'https://example.com/path/to/your/video1.mp4',
        'https://example.com/path/to/your/video2.avi',
        'https://example.com/path/to/your/video3.flv'
      ]
    };
  },
  methods: {
    changeSource() {
      const randomIndex = Math.floor(Math.random() * this.videoList.length);
      this.videoSource = this.videoList[randomIndex];
      // 如果当前有视频播放，可能需要重置或重新加载视频组件
      // 这里为了简单起见，直接通过改变src属性来触发重新加载
    },
    onVideoEnd() {
      console.log('Video ended');
      // 可以在这里添加视频播放结束后的逻辑，比如自动播放下一个视频
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.video-player {
  width: 100%;
  max-width: 600px;
}
</style>

3. 注意事项

• 确保视频源的URL是有效的，并且服务器支持跨域访问（CORS）。
• video组件的controls属性用于显示默认的播放控件。
• autoplay属性在部分平台上可能由于浏览器策略而无法生效，特别是在移动设备上。
• changeSource方法用于随机切换视频源，您可以根据需要修改这部分逻辑。
• onVideoEnd方法用于处理视频播放结束的事件，您可以在这里添加自定义逻辑，比如自动播放列表中的下一个视频。

以上代码提供了一个基本的框架，您可以根据实际需求进一步扩展和优化。