uni-app 同时兼容app(android、ios)、微信小程序的视频播放器

在uni-app中创建一个同时兼容App（Android、iOS）和微信小程序的视频播放器，你可以利用uni-app提供的<video>组件。以下是一个简单的代码示例，展示了如何创建一个基本的视频播放器，并确保它在不同平台上都能正常工作。

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

<template>
  <view class="container">
    <video
      id="videoPlayer"
      class="video-player"
      src="https://www.example.com/path/to/your/video.mp4"
      controls
      autoplay="{{autoplay}}"
      loop="{{loop}}"
      muted="{{muted}}"
      object-fit="cover"
      initial-time="0"
      @play="onPlay"
      @pause="onPause"
      @ended="onEnded"
    ></video>
    <view class="controls">
      <button @click="playVideo">播放</button>
      <button @click="pauseVideo">暂停</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      autoplay: false, // 根据需要设置是否自动播放
      loop: true, // 根据需要设置是否循环播放
      muted: false, // 根据需要设置是否静音
    };
  },
  methods: {
    playVideo() {
      const videoContext = uni.createVideoContext('videoPlayer');
      videoContext.play();
    },
    pauseVideo() {
      const videoContext = uni.createVideoContext('videoPlayer');
      videoContext.pause();
    },
    onPlay() {
      console.log('视频开始播放');
    },
    onPause() {
      console.log('视频暂停播放');
    },
    onEnded() {
      console.log('视频播放结束');
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.video-player {
  width: 100%;
  max-width: 600px; /* 根据需要调整视频最大宽度 */
}
.controls {
  margin-top: 20px;
}
button {
  margin: 5px;
}
</style>

在这个示例中，<video>组件用于播放视频，controls属性允许显示默认的播放控件。通过uni.createVideoContext方法，我们可以获取视频上下文并控制视频的播放和暂停。@play、@pause和@ended事件监听器用于处理视频播放的不同状态。

请注意，由于平台差异，某些属性（如autoplay）在某些平台上可能表现不同。例如，微信小程序对自动播放有严格的限制，通常需要在用户交互后才能播放视频。因此，在实际开发中，你可能需要根据目标平台调整这些属性。

此外，确保你的视频URL是有效的，并且视频文件符合各个平台对视频格式和大小的要求。