uniapp视频播放功能

无妄的罪2023-09-22 20:48

UniApp提供了多种视频播放组件，包括视频播放器（video）、多媒体组件（media）、WebView（内置Video标签）等。其中，video和media组件是最常用的。

video组件

video组件是基于HTML5 video标签的UniApp视频播放组件，支持常见的视频格式（如MP4、M4V、MOV等）。使用video组件需要引入uni-ui组件库。

示例代码：

复制代码

<template>
  <view>
    <video
      id="myVideo"
      :src="src"
      :controls="controls"
      :autoplay="autoplay"
      style="width: 100%; height: 300px;"
    ></video>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        src: 'http://example.com/video.mp4',  // 视频地址
        controls: true,  // 是否显示控制条
        autoplay: false,  // 是否自动播放
      }
    },
  }
</script>

media组件

media组件是基于uni-app原生组件的视频播放组件，支持更多视频格式（如FLV、RTMP等）。使用media组件需要在App.vue中全局引入uni-plugin-aliplayer插件。

示例代码：

复制代码

<template>
  <view>
    <media
      class="aliplayer-wrapper"
      :source="source"
      :autoplay="autoplay"
      :controls="controls"
      :muted="muted"
      width="100%"
      height="300px"
    ></media>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        source: {
          type: 'video',
          sources: [
            {
              type: 'video/mp4',
              src: 'http://example.com/video.mp4',
            },
          ],
        },
        autoplay: false,  // 是否自动播放
        controls: true,  // 是否显示控制条
        muted: false,  // 是否静音
      }
    },
  }
</script>

<style>
  .aliplayer-wrapper {
    height: 100% !important;
  }
</style>

以上是使用video和media组件实现视频播放的示例代码，具体使用方式可以根据自己的需求进行调整。