How to use video components in uniapp to implement online playback function

How to use video components in uniapp to implement online playback function

In modern society, video has become one of the main ways for people to obtain information, entertainment and leisure. In order to meet user needs, developers often need to add video playback functions to applications. Uniapp, as a cross-platform framework based on Vue.js, provides developers with a convenient and fast way to develop multi-platform applications. This article will introduce in detail how to use video components in Uniapp to implement online playback functions, and provide specific code examples.

1. Import video component

In Uniapp, we can use the officially provided uni-media-player component to implement the video playback function. First, we need to import the uni-media-player component into the vue file of the page.

<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>

In the above code, we use the uni-media-player component and set the video address and automatic playback.

2. Style and configuration

In Uniapp, the video configured by uniCloud is used by default, and this configuration only supports online playback on the H5 platform. If we want to play online videos on other platforms, we can customize the video style and configuration. Here is an example:

<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>

In the above code, we set the video control display, autoplay and cover image. At the same time, we set the width and height of the video through custom styles.

3. Video playback event

In addition to the basic playback function, we can also implement more complex logic by listening to the events of the video component.

<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>

In the above code, we obtain the playback time of the current video in real time by listening to the timeupdate event of the uni-media-player component, and update it to the page.

Through the above steps, we can implement basic online playback functions in Uniapp. Of course, Uniapp also provides more configuration items and events, which can be used according to actual needs. I hope this article has helped you implement the video playback function in Uniapp.

The above is the detailed content of How to use video components in uniapp to implement online playback function. For more information, please follow other related articles on the PHP Chinese website!