uniapp使用mui-player插件播放m3u8/flv视频流示例代码

下面是网站作者给出的完整攻略：

uniapp使用mui-player插件播放m3u8/flv视频流示例代码

1. 安装mui-player插件

首先，需要在命令行中进入到uniapp项目的根目录，然后执行如下命令进行mui-player插件的安装：

npm install @geekape/mui-player --save

安装成功后，我们可以在 uniapp 项目的 package.json 文件中看到该插件的相关信息。

2. 引入mui-player插件

在uniapp项目中，使用mui-player插件需要在 App.vue 文件中引入。具体的引入方式如下所示：

<template>
  <div>
    <uni-mpvue v-if="show" :type="type" :events="events" :options="options"/>
  </div>
</template>

<script>
import uniMpvue from '@geekape/mui-player';

export default {
  components: {
    uniMpvue
  },
  data() {
    return {
      show: true,
      type: 'h5',
      events: {},
      options: {
        src: 'http://example.com/example.m3u8', // 此处填写m3u8视频流地址或者flv视频流地址
        poster: 'http://example.com/example.png',
        autoplay: true,
        preload: 'auto',
        aspectRatio: '16:9',
        height: '200px',
        width: '100%',
        controls: true,
        muted: false,
        loop: false,
      }
    }
  }
}
</script>

3. 示例说明

示例1：播放 m3u8 视频流

<template>
  <div>
    <uni-mpvue v-if="show" :type="type" :events="events" :options="options"/>
  </div>
</template>

<script>
import uniMpvue from '@geekape/mui-player';

export default {
  components: {
    uniMpvue
  },
  data() {
    return {
      show: true,
      type: 'h5',
      events: {},
      options: {
        src: 'http://example.com/example.m3u8',
        poster: 'http://example.com/example.png',
        autoplay: true,
        preload: 'auto',
        aspectRatio: '16:9',
        height: '200px',
        width: '100%',
        controls: true,
        muted: false,
        loop: false,
      }
    }
  }
}
</script>

在上面的示例代码中，我们在 options 对象的 src 属性中填写了 m3u8 格式的视频流地址。通过上面的示例代码，我们可以实现在uniapp项目中播放m3u8格式的视频流。

示例2：播放 flv 视频流

<template>
  <div>
    <uni-mpvue v-if="show" :type="type" :events="events" :options="options"/>
  </div>
</template>

<script>
import uniMpvue from '@geekape/mui-player';

export default {
  components: {
    uniMpvue
  },
  data() {
    return {
      show: true,
      type: 'h5',
      events: {},
      options: {
        src: 'http://example.com/example.flv',
        poster: 'http://example.com/example.png',
        autoplay: true,
        preload: 'auto',
        aspectRatio: '16:9',
        height: '200px',
        width: '100%',
        controls: true,
        muted: false,
        loop: false,
      }
    }
  }
}
</script>

在上面的示例代码中，我们在 options 对象的 src 属性中填写了 flv 格式的视频流地址。通过上面的示例代码，我们可以实现在uniapp项目中播放flv格式的视频流。

以上就是使用mui-player插件播放m3u8/flv视频流的完整攻略，希望对你有所帮助。