uniapp의 비디오 컴포넌트를 사용하여 온라인 재생 기능을 구현하는 방법

<template>
  <view>
    <uni-media-player :src="videoUrl" :autoplay="true"></uni-media-player>
  </view>
</template>

<script>
  import uniMediaPlayer from '@/components/uni-media-player/uni-media-player.vue'
  
  export default {
    components: {
      uniMediaPlayer
    },
    data() {
      return {
        videoUrl: 'http://example.com/video.mp4'  // 视频地址
      }
    }
  }
</script>

<template>
  <view>
    <uni-media-player :src="videoUrl" :controls="true" :autoplay="true" :poster="posterUrl"></uni-media-player>
  </view>
</template>

<script>
  import uniMediaPlayer from '@/components/uni-media-player/uni-media-player.vue'
  
  export default {
    components: {
      uniMediaPlayer
    },
    data() {
      return {
        videoUrl: 'http://example.com/video.mp4',  // 视频地址
        posterUrl: 'http://example.com/poster.jpg'  // 视频封面图片地址
      }
    }
  }
</script>

<style>
  video {
    width: 100%;
    height: 100%;
  }
</style>

<template>
  <view>
    <uni-media-player :src="videoUrl" :controls="true" :autoplay="true" :poster="posterUrl" @timeupdate="onTimeUpdate"></uni-media-player>
    <text>{{ currentTime }}</text>
  </view>
</template>

<script>
  import uniMediaPlayer from '@/components/uni-media-player/uni-media-player.vue'
  
  export default {
    components: {
      uniMediaPlayer
    },
    data() {
      return {
        videoUrl: 'http://example.com/video.mp4',  // 视频地址
        posterUrl: 'http://example.com/poster.jpg',  // 视频封面图片地址
        currentTime: 0  // 当前播放时间
      }
    },
    methods: {
      onTimeUpdate(e) {
        this.currentTime = e.detail.currentTime
      }
    }
  }
</script>