使用方法

安卓阿里云视频播放器UTS原生插件以AliPlayerKit作为集成SDK实现一套面向业务的低代码播放器UI组件与 场景化解决方案，插件包含了播放器UI组件的全部功能，在uniapp和uniappx中集成简单，插件支持uniapp和uniapp x，支持vue2和vue3的选项式和组合式

注意

如果插件的UI组件不符合你的要求可以联系作者优化

插件使用注意事项

如果您在使用插件的过程中有任何问题，可以联系作者，作者将全力协助您使用插件
本文档同时提供了uniapp的用法示例和uniappx的用法示例，插件市场导入的示例项目仅为uniapp的用法示例，如果您需要uniappx的示例项目可以通过下方的链接下载示例

https://pan.baidu.com/s/1DVGXT2tGcur8HR8WEmNUKg?pwd=6gan

sdk文档地址

https://aliyun.github.io/PlayerKit-Android

联系作者

关注微信公众号可联系作者

插件地址

https://ext.dcloud.net.cn/plugin?id=28163

API用法

在使用插件的地方引入以下代码：

uniappuniappx

import * as module from "@/uni_modules/leven-uts-aliPlayer"

import * as module from "@/uni_modules/leven-uts-aliPlayer"

组件用法

在使用插件的地方引入以下代码：

uniappuniappx

vue

<leven-uts-aliPlayer ref="refPlayer" style="flex:1; height: 500px;" :config="config" @onError="onError"
  @onEvent="onEvent" @onEventMethod="onEventMethod">
</leven-uts-aliPlayer>

vue

<leven-uts-aliPlayer ref="refPlayer" style="flex:1; height: 300px;" :configX="config" @onError="onError"
  @onEvent="onEvent" @onEventMethod="onEventMethod">
</leven-uts-aliPlayer>

//组件的引用
const refPlayer = ref<LevenUtsAliPlayerElement | null>(null)

用法示例

api用法示例

uniappuniappx

vue

<template>
  <view>
    <uni-list>
      <uni-list-item title="检查是否初始化" clickable link @click="isInitialized"></uni-list-item>
      <uni-list-item title="获取Kit版本号" clickable link @click="getPlayerKitVersion"></uni-list-item>
      <uni-list-item title="获取底层SDK版本号" clickable link @click="getSdkVersion"></uni-list-item>
      <uni-list-item title="获取设备ID" clickable link @click="getDeviceId"></uni-list-item>
      <uni-list-item title="设置是否启用Debug模式" clickable link @click="setDebugModeEnabled"></uni-list-item>
      <uni-list-item title="检查Debug模式是否启用" clickable link @click="isDebugModeEnabled"></uni-list-item>
      <uni-list-item title="设置日志面板显示" clickable link @click="setLogPanelEnabled"></uni-list-item>
      <uni-list-item title="检查日志面板是否启用" clickable link @click="isLogPanelEnabled"></uni-list-item>
      <uni-list-item title="设置是否禁止截屏" clickable link @click="setDisableScreenshot"></uni-list-item>
      <uni-list-item title="检查是否禁止截屏" clickable link @click="isDisableScreenshot"></uni-list-item>
      <uni-list-item title="设置播放器视图类型" clickable link @click="setPlayerViewType"></uni-list-item>
      <uni-list-item title="获取当前播放器视图类型" clickable link @click="getPlayerViewType"></uni-list-item>
      <uni-list-item title="清除播放器缓存" clickable link @click="clearCaches"></uni-list-item>
      <uni-list-item title="启用/禁用控制台日志" clickable link @click="enableConsoleLog"></uni-list-item>
      <uni-list-item title="检查控制台日志是否启用" clickable link @click="isConsoleLogEnabled"></uni-list-item>
      <uni-list-item title="设置日志级别" clickable link @click="setLogLevel"></uni-list-item>
      <uni-list-item title="获取当前日志级别" clickable link @click="getLogLevel"></uni-list-item>
      <uni-list-item title="设置日志回调监听器" clickable link @click="setLogCallback"></uni-list-item>
    </uni-list>
    <uni-card title="日志">
      <view
        style="height: 300px; overflow-y: auto; background-color: black; border-radius: 5px; font-size: 12px; color: green; padding: 5px;">
        <view v-for="(item, index) in logs" :key="index">{{item}}</view>
      </view>
    </uni-card>
  </view>
</template>

<script>
  import * as module from "@/uni_modules/leven-uts-aliPlayer"
  import {
    DateManager
  } from "@/utils/date.js"
  const dateManager = new DateManager();
  export default {
    data() {
      return {
        //日志信息
        logs: [],
        //debug模式是否启用
        debugEnable: true,
        //日志面板是否显示
        panelEnabled: true,
        //是否禁止截屏
        disableScreenshot: true,
        //视图播放类型
        viewType: "DISPLAY_VIEW",
        //启用/禁用控制台日志
        consoleLogEnabled: true,
        //日志级别
        logLevel: "NONE"
      }
    },
    methods: {
      //设置日志回调监听器
      setLogCallback() {
        module.setLogCallback({
          complete: (res) => {
            this.writeLog(JSON.stringify(res))
          }
        })
      },
      //获取当前日志级别
      getLogLevel() {
        module.getLogLevel({
          complete: (res) => {
            this.writeLog(JSON.stringify(res))
          }
        })
      },
      //设置日志级别
      setLogLevel() {
        if (this.logLevel == "NONE") {
          this.logLevel = "VERBOSE";
        } else if (this.logLevel == "VERBOSE") {
          this.logLevel = "DEBUG";
        } else if (this.logLevel == "DEBUG") {
          this.logLevel = "INFO";
        } else if (this.logLevel == "INFO") {
          this.logLevel = "WARN";
        } else if (this.logLevel == "WARN") {
          this.logLevel = "ERROR";
        } else if (this.logLevel == "ERROR") {
          this.logLevel = "NONE";
        }
        module.setLogLevel({
          params: {
            level: this.logLevel
          },
          complete: (res) => {
            this.writeLog(JSON.stringify(res))
          }
        })
      },
      //清除播放器缓存
      isConsoleLogEnabled() {
        module.isConsoleLogEnabled({
          complete: (res) => {
            this.writeLog(JSON.stringify(res))
          }
        })
      },
      //启用/禁用控制台日志
      enableConsoleLog() {
        this.consoleLogEnabled = !this.consoleLogEnabled;
        module.enableConsoleLog({
          params: {
            enable: this.consoleLogEnabled
          },
          complete: (res) => {
            this.writeLog(JSON.stringify(res))
          }
        })
      },
      //清除播放器缓存
      clearCaches() {
        module.clearCaches({
          complete: (res) => {
            this.writeLog(JSON.stringify(res))
          }
        })
      },
      //获取当前播放器视图类型
      getPlayerViewType() {
        module.getPlayerViewType({
          complete: (res) => {
            this.writeLog(JSON.stringify(res))
          }
        })
      },
      //设置播放器视图类型
      setPlayerViewType() {
        if (this.viewType == "DISPLAY_VIEW") {
          this.viewType = "SURFACE_VIEW";
        } else if (this.viewType == "SURFACE_VIEW") {
          this.viewType = "TEXTURE_VIEW";
        } else {
          this.viewType = "DISPLAY_VIEW";
        }
        module.setPlayerViewType({
          params: {
            viewType: this.viewType
          },
          complete: (res) => {
            this.writeLog(JSON.stringify(res))
          }
        })
      },
      //检查日志面板是否启用
      isDisableScreenshot() {
        module.isDisableScreenshot({
          complete: (res) => {
            this.writeLog(JSON.stringify(res))
          }
        })
      },
      //设置是否禁止截屏
      setDisableScreenshot() {
        this.disableScreenshot = !this.disableScreenshot;
        module.setDisableScreenshot({
          params: {
            disable: this.disableScreenshot
          },
          complete: (res) => {
            this.writeLog(JSON.stringify(res))
          }
        })
      },
      //检查日志面板是否启用
      isLogPanelEnabled() {
        module.isLogPanelEnabled({
          complete: (res) => {
            this.writeLog(JSON.stringify(res))
          }
        })
      },
      //设置日志面板显示
      setLogPanelEnabled() {
        this.panelEnabled = !this.panelEnabled;
        module.setLogPanelEnabled({
          params: {
            enable: this.panelEnabled
          },
          complete: (res) => {
            this.writeLog(JSON.stringify(res))
          }
        })
      },
      //检查Debug模式是否启用
      isDebugModeEnabled() {
        module.isDebugModeEnabled({
          complete: (res) => {
            this.writeLog(JSON.stringify(res))
          }
        })
      },
      //设置 Debug 模式
      setDebugModeEnabled() {
        this.debugEnable = !this.debugEnable;
        module.setDebugModeEnabled({
          params: {
            enable: this.debugEnable
          },
          complete: (res) => {
            this.writeLog(JSON.stringify(res))
          }
        })
      },
      //获取设备 ID
      getDeviceId() {
        module.getDeviceId({
          complete: (res) => {
            this.writeLog(JSON.stringify(res))
          }
        })
      },
      //获取底层 SDK 版本号
      getSdkVersion() {
        module.getSdkVersion({
          complete: (res) => {
            this.writeLog(JSON.stringify(res))
          }
        })
      },
      //获取 Kit 版本号
      getPlayerKitVersion() {
        module.getPlayerKitVersion({
          complete: (res) => {
            this.writeLog(JSON.stringify(res))
          }
        })
      },
      //检查是否初始化
      isInitialized() {
        module.isInitialized({
          complete: (res) => {
            this.writeLog(JSON.stringify(res))
          }
        })
      },
      //写日志
      writeLog(message) {
        let time = dateManager.format(null, "yyyy-mm-dd hh:MM:ss")
        let logData = this.logs.reverse();
        logData.push(time + "：" + message);
        this.logs = logData.reverse();
      }
    }
  }
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257

vue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex:1">
  <!-- #endif -->
    <rice-cell-group>
      <rice-cell title="检查是否初始化" arrow @click="isInitialized"></rice-cell>
      <rice-cell title="获取Kit版本号" arrow @click="getPlayerKitVersion"></rice-cell>
      <rice-cell title="获取底层SDK版本号" arrow @click="getSdkVersion"></rice-cell>
      <rice-cell title="获取设备ID" arrow @click="getDeviceId"></rice-cell>
      <rice-cell title="设置是否启用Debug模式" arrow @click="setDebugModeEnabled"></rice-cell>
      <rice-cell title="检查Debug模式是否启用" arrow @click="isDebugModeEnabled"></rice-cell>
      <rice-cell title="设置日志面板显示" arrow @click="setLogPanelEnabled"></rice-cell>
      <rice-cell title="检查日志面板是否启用" arrow @click="isLogPanelEnabled"></rice-cell>
      <rice-cell title="设置是否禁止截屏" arrow @click="setDisableScreenshot"></rice-cell>
      <rice-cell title="检查是否禁止截屏" arrow @click="isDisableScreenshot"></rice-cell>
      <rice-cell title="设置播放器视图类型" arrow @click="setPlayerViewType"></rice-cell>
      <rice-cell title="获取当前播放器视图类型" arrow @click="getPlayerViewType"></rice-cell>
      <rice-cell title="清除播放器缓存" arrow @click="clearCaches"></rice-cell>
      <rice-cell title="启用/禁用控制台日志" arrow @click="enableConsoleLog"></rice-cell>
      <rice-cell title="检查控制台日志是否启用" arrow @click="isConsoleLogEnabled"></rice-cell>
      <rice-cell title="设置日志级别" arrow @click="setLogLevel"></rice-cell>
      <rice-cell title="获取当前日志级别" arrow @click="getLogLevel"></rice-cell>
      <rice-cell title="设置日志回调监听器" arrow @click="setLogCallback"></rice-cell>
    </rice-cell-group>
    <lux-card title="日志">
      <scroll-view direction="vertical"
        style="height: 300px; background-color: black; border-radius: 5px; padding: 5px;">
        <view v-for="(item, index) in logs" :key="index">
          <text style="font-size: 12px; color: yellow;">{{item}}</text>
        </view>
      </scroll-view>
    </lux-card>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script setup>
  import { dateuts } from '@/uni_modules/rice-ui';
  import * as module from "@/uni_modules/leven-uts-aliPlayer"
  import { LevenResult, LevenOptions } from "@/uni_modules/leven-uts-aliPlayer"
  //日志信息
  const logs = ref<string[]>([])
  //debug模式是否启用
  const debugEnable = ref(false)
  //日志面板是否显示
  const panelEnabled = ref(false)
  //是否禁止截屏
  const disableScreenshot = ref(false)
  //视图播放类型
  const viewType = ref("DISPLAY_VIEW")
  //启用/禁用控制台日志
  const consoleLogEnabled = ref(true)
  //日志级别
  const logLevel = ref("NONE")

  function writeLog(message : string) {
    let time = dateuts().format('YYYY-MM-DD HH:mm:ss');
    let logData = logs.value.reverse();
    logData.push(time + "：" + message);
    logs.value = logData.reverse()
  }

  //设置日志回调监听器
  function setLogCallback() {
    module.setLogCallback({
      complete: (res : LevenResult) => {
        writeLog(JSON.stringify(res))
      }
    } as LevenOptions)
  }

  //获取当前日志级别
  function getLogLevel() {
    module.getLogLevel({
      complete: (res : LevenResult) => {
        writeLog(JSON.stringify(res))
      }
    } as LevenOptions)
  }

  //设置日志级别
  function setLogLevel() {
    if (logLevel.value == "NONE") {
      logLevel.value = "VERBOSE";
    } else if (logLevel.value == "VERBOSE") {
      logLevel.value = "DEBUG";
    } else if (logLevel.value == "DEBUG") {
      logLevel.value = "INFO";
    } else if (logLevel.value == "INFO") {
      logLevel.value = "WARN";
    } else if (logLevel.value == "WARN") {
      logLevel.value = "ERROR";
    } else if (logLevel.value == "ERROR") {
      logLevel.value = "NONE";
    }
    module.setLogLevel({
      params: {
        level: logLevel.value
      },
      complete: (res : LevenResult) => {
        writeLog(JSON.stringify(res))
      }
    } as LevenOptions)
  }

  //清除播放器缓存
  function isConsoleLogEnabled() {
    module.isConsoleLogEnabled({
      complete: (res : LevenResult) => {
        writeLog(JSON.stringify(res))
      }
    } as LevenOptions)
  }

  //启用/禁用控制台日志
  function enableConsoleLog() {
    consoleLogEnabled.value = !consoleLogEnabled.value;
    module.enableConsoleLog({
      params: {
        enable: consoleLogEnabled.value
      },
      complete: (res : LevenResult) => {
        writeLog(JSON.stringify(res))
      }
    } as LevenOptions)
  }

  //清除播放器缓存
  function clearCaches() {
    module.clearCaches({
      complete: (res : LevenResult) => {
        writeLog(JSON.stringify(res))
      }
    } as LevenOptions)
  }

  //获取当前播放器视图类型
  function getPlayerViewType() {
    module.getPlayerViewType({
      complete: (res : LevenResult) => {
        writeLog(JSON.stringify(res))
      }
    } as LevenOptions)
  }

  //设置播放器视图类型
  function setPlayerViewType() {
    if (viewType.value == "DISPLAY_VIEW") {
      viewType.value = "SURFACE_VIEW";
    } else if (viewType.value == "SURFACE_VIEW") {
      viewType.value = "TEXTURE_VIEW";
    } else {
      viewType.value = "DISPLAY_VIEW";
    }
    module.setPlayerViewType({
      params: {
        viewType: viewType.value
      },
      complete: (res : LevenResult) => {
        writeLog(JSON.stringify(res))
      }
    } as LevenOptions)
  }

  //检查日志面板是否启用
  function isDisableScreenshot() {
    module.isDisableScreenshot({
      complete: (res : LevenResult) => {
        writeLog(JSON.stringify(res))
      }
    } as LevenOptions)
  }

  //设置是否禁止截屏
  function setDisableScreenshot() {
    disableScreenshot.value = !disableScreenshot.value;
    module.setDisableScreenshot({
      params: {
        disable: disableScreenshot.value
      },
      complete: (res : LevenResult) => {
        writeLog(JSON.stringify(res))
      }
    } as LevenOptions)
  }

  //检查日志面板是否启用
  function isLogPanelEnabled() {
    module.isLogPanelEnabled({
      complete: (res : LevenResult) => {
        writeLog(JSON.stringify(res))
      }
    } as LevenOptions)
  }

  //设置日志面板显示
  function setLogPanelEnabled() {
    panelEnabled.value = !panelEnabled.value;
    module.setLogPanelEnabled({
      params: {
        enable: panelEnabled.value
      },
      complete: (res : LevenResult) => {
        writeLog(JSON.stringify(res))
      }
    } as LevenOptions)
  }

  //检查Debug模式是否启用
  function isDebugModeEnabled() {
    module.isDebugModeEnabled({
      complete: (res : LevenResult) => {
        writeLog(JSON.stringify(res))
      }
    } as LevenOptions)
  }

  //设置 Debug 模式
  function setDebugModeEnabled() {
    debugEnable.value = !debugEnable.value;
    module.setDebugModeEnabled({
      params: {
        enable: debugEnable.value
      },
      complete: (res : LevenResult) => {
        writeLog(JSON.stringify(res))
      }
    } as LevenOptions)
  }

  //获取设备 ID
  function getDeviceId() {
    module.getDeviceId({
      complete: (res : LevenResult) => {
        writeLog(JSON.stringify(res))
      }
    } as LevenOptions)
  }

  //获取底层 SDK 版本号
  function getSdkVersion() {
    module.getSdkVersion({
      complete: (res : LevenResult) => {
        writeLog(JSON.stringify(res))
      }
    } as LevenOptions)
  }

  //获取 Kit 版本号
  function getPlayerKitVersion() {
    module.getPlayerKitVersion({
      complete: (res : LevenResult) => {
        writeLog(JSON.stringify(res))
      }
    } as LevenOptions)
  }

  //是否初始化
  function isInitialized() {
    module.isInitialized({
      complete: (res : LevenResult) => {
        writeLog(JSON.stringify(res))
      }
    } as LevenOptions)
  }
</script>

<style>

</style>

组件用法示例

uniappuniappx

vue

<template>
  <view>
    <view style="flex: 1; height: 300px;">
      <leven-uts-aliPlayer ref="refPlayer" style="flex:1; height: 500px;" :config="config" @onError="onError"
        @onEvent="onEvent" @onEventMethod="onEventMethod">
      </leven-uts-aliPlayer>
    </view>
    <uni-card title="播放控制">
      <view style=" flex-direction: row; flex-wrap: wrap;">
        <button type="primary" size="mini" @click="getVideoData">获取视频数据</button>
        <button type="primary" size="mini" @click="play">播放下一个视频</button>
        <button type="primary" size="mini" @click="start">开始播放</button>
        <button type="primary" size="mini" @click="pause">暂停播放</button>
        <button type="primary" size="mini" @click="stop">停止播放</button>
        <button type="primary" size="mini" @click="toggle">播放/暂停切换</button>
        <button type="primary" size="mini" @click="replay">重播</button>
        <button type="primary" size="mini" @click="seekTo">跳转到指定位置</button>
        <button type="primary" size="mini" @click="setSpeed">设置播放速度</button>
        <button type="primary" size="mini" @click="setLoop">设置循环播放</button>
        <button type="primary" size="mini" @click="setMute">设置静音</button>
        <button type="primary" size="mini" @click="setScaleType">设置渲染填充模式</button>
        <button type="primary" size="mini" @click="setMirrorType">设置镜像模式</button>
        <button type="primary" size="mini" @click="setRotation">设置旋转角度</button>
        <button type="primary" size="mini" @click="snapshot">截图</button>
      </view>
    </uni-card>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        config: {
          /**
           * 播放源类型，可选值：VidAuth、VidSts、Url
           * VidAuth：通过 VID 和 Auth 授权播放视频的资源类型。使用播放授权码进行授权，适用于需要更简单授权机制的场景。
           * VidSts：通过 VID 和 STS 令牌播放视频的资源类型。使用阿里云 STS (Security Token Service) 进行授权，提供更高的安全性和访问控制。适用于需要临时访问凭证的场景。
           * Url：通过直接 URL 播放视频的资源类型。适用于公开访问的视频资源，无需额外的授权验证。
           */
          playType: "VidAuth",
          //视频ID，VidAuth和VidSts播放源类型必传
          vid: "004fc90fd71d71f0bf184531958c0402",
          //播放凭证，需要调用点播服务的GetVideoPlayAuth接口生成。VidAuth播放源类型必传
          playAuth: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6ImFwcC0xMDAwMDAwIiwidmlkZW9JZCI6IjAwNGZjOTBmZDcxZDcxZjBiZjE4NDUzMTk1OGMwNDAyIiwiY3VycmVudFRpbWVTdGFtcCI6MTc2NjEzMTE5MTYxMywiZXhwaXJlVGltZVN0YW1wIjoxOTIzODExMTkxNjEzLCJyZWdpb25JZCI6ImNuLXNoYW5naGFpIiwicGxheUNvbnRlbnRJbmZvIjp7ImZvcm1hdHMiOiJtM3U4Iiwic3RyZWFtVHlwZSI6InZpZGVvIiwiYXV0aFRpbWVvdXQiOjE4MDB9fQ.CjqZA-6okJb2PxOZr0Jjai9gWwvaNdG-bk3LWBMzhdc",
          //访问密钥 ID，VidSts播放源类型必传
          // accessKeyId: "",
          //访问密钥密文，VidSts播放源类型必传
          // accessKeySecret: "",
          //安全令牌，VidSts播放源类型必传
          // securityToken: "",
          //区域信息，VidSts播放源类型参数，可不传或为空
          // region: "",
          //视频 URL 地址，Url播放源类型必传
          // url: "",
          /**
           * 设置播放场景，可选值：VOD、LIVE、VIDEO_LIST、RESTRICTED、MINIMAL
           * VOD：适用场景：常规视频播放，功能特性：支持所有播放控制功能，包括播放/暂停、进度拖拽、快进/快退、倍速播放、音量/亮度调节、全屏切换、设置菜单等
           * LIVE：直播场景，适用场景：实时直播流播放，能特性：支持播放/暂停、刷新、音量/亮度调节、全屏切换、设置菜单等，但不支持进度拖拽、快进/快退、倍速播放等时间轴相关操作
           * VIDEO_LIST：列表播放场景，适用场景：视频列表中的播放器，如信息流、短视频列表等，功能特性：支持基本播放控制，但禁用垂直手势（音量/亮度调节），避免与列表滚动手势冲突
           * RESTRICTED：受限播放场景（限制时间轴操作），适用场景：教育培训、考试监控、演示展示等需要限制用户跳跃播放的场景，功能特性：支持播放/暂停、音量/亮度调节、全屏切换、设置菜单、字幕显示等，但禁用进度拖拽、快进/快退、倍速播放等时间轴相关操作，确保用户只能按正常速度顺序观看，无法跳过内容
           * MINIMAL：最小化播放场景（仅播放视图，无任何UI），适用场景：背景视频、装饰性视频、嵌入式播放器、自定义UI覆盖等，功能特性：仅显示纯净的视频播放画面，不显示任何UI元素，包括封面图、字幕、播放状态、控制界面等，适合需要完全自定义UI或作为背景元素的场景
           */
          // sceneType: "VOD",
          //设置封面图地址，视频播放前的封面图片 URL，用于在视频加载时显示。
          // coverUrl: "",
          //设置视频标题，视频的标题文本，用于在 UI 中显示。不设置标识不展示标题
          videoTitle: "Long Video",
          //设置是否自动播放，true 表示视频配置完成后自动开始播放，false 表示需要手动调用播放方法。
          // autoPlay: true,
          //设置 trace ID，用于跟踪和统计视频播放的标识符，通常用于日志记录和数据分析。
          // traceId: "",
          //设置视频起始播放时间，视频开始播放的时间点，单位：毫秒。
          // startTime: 0,
          //设置硬件解码,true 为使用硬件解码，false 为使用软件解码，默认为 true
          // isHardWareDecode: true,
          //设置屏幕休眠，true 为允许屏幕休眠，false 为不允许屏幕休眠，默认为 false
          // allowedScreenSleep: false,
          //订阅的播放器事件
          events: ['Error', 'SnapshotCompleted'],
        },
        //播放列表
        videoList: [{
          playType: "VidAuth",
          vid: "004fc90fd71d71f0bf184531958c0402",
          playAuth: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6ImFwcC0xMDAwMDAwIiwidmlkZW9JZCI6IjAwNGZjOTBmZDcxZDcxZjBiZjE4NDUzMTk1OGMwNDAyIiwiY3VycmVudFRpbWVTdGFtcCI6MTc2NjEzMTE5MTYxMywiZXhwaXJlVGltZVN0YW1wIjoxOTIzODExMTkxNjEzLCJyZWdpb25JZCI6ImNuLXNoYW5naGFpIiwicGxheUNvbnRlbnRJbmZvIjp7ImZvcm1hdHMiOiJtM3U4Iiwic3RyZWFtVHlwZSI6InZpZGVvIiwiYXV0aFRpbWVvdXQiOjE4MDB9fQ.CjqZA-6okJb2PxOZr0Jjai9gWwvaNdG-bk3LWBMzhdc"
        }, {
          playType: "VidAuth",
          vid: "00e9b526d0d671f085715017f1e90402",
          playAuth: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6ImFwcC0xMDAwMDAwIiwidmlkZW9JZCI6IjAwZTliNTI2ZDBkNjcxZjA4NTcxNTAxN2YxZTkwNDAyIiwiY3VycmVudFRpbWVTdGFtcCI6MTc2ODE4ODIzNzAwNiwiZXhwaXJlVGltZVN0YW1wIjoxOTI1ODY4MjM3MDA2LCJyZWdpb25JZCI6ImNuLXNoYW5naGFpIiwicGxheUNvbnRlbnRJbmZvIjp7ImZvcm1hdHMiOiJtM3U4Iiwic3RyZWFtVHlwZSI6InZpZGVvIiwiYXV0aFRpbWVvdXQiOjE4MDB9fQ.AwXM5c8EsLJbhTPoNbEiB3uFVkl7heukuFbntHmC7no"
        }, {
          playType: "Url",
          url: "https://alivc-demo-vod.aliyuncs.com/6b357371ef3c45f4a06e2536fd534380/53733986bce75cfc367d7554a47638c0-fd.mp4"
        }],
        //当前播放的索引
        currentPlayIndex: 0,
        //当前播放速度
        currentSpeed: 1.0,
        //是否循环播放
        isLoop: false,
        //当前是否静音
        isMute: false,
        //填充模式
        scaleType: "FIT_CENTER",
        //镜像模式
        mirrorType: "NONE",
        //旋转角度
        rotation: "DEGREE_0"
      }
    },
    methods: {
      snapshot() {
        this.$refs.refPlayer.snapshot()
      },
      setRotation() {
        if (this.rotation == "DEGREE_0") {
          this.rotation = "DEGREE_90";
        } else if (this.rotation == "DEGREE_90") {
          this.rotation = "DEGREE_180";
        } else if (this.rotation == "DEGREE_180") {
          this.rotation = "DEGREE_270";
        } else {
          this.rotation = "DEGREE_0";
        }
        this.$refs.refPlayer.setRotation({
          rotation: this.rotation
        })
      },
      setMirrorType() {
        if (this.mirrorType == "NONE") {
          this.mirrorType = "HORIZONTAL";
        } else if (this.mirrorType == "HORIZONTAL") {
          this.mirrorType = "VERTICAL";
        } else {
          this.mirrorType = "NONE";
        }
        this.$refs.refPlayer.setMirrorType({
          mirrorType: this.mirrorType
        })
      },
      setScaleType() {
        if (this.scaleType == "FIT_XY") {
          this.scaleType = "FIT_CENTER";
        } else if (this.scaleType == "FIT_CENTER") {
          this.scaleType = "CENTER_CROP";
        } else {
          this.scaleType = "FIT_XY";
        }
        this.$refs.refPlayer.setScaleType({
          scaleType: this.scaleType
        })
      },
      setMute() {
        this.isMute = !this.isMute
        this.$refs.refPlayer.setMute({
          mute: this.isMute
        })
      },
      setLoop() {
        this.isLoop = !this.isLoop
        this.$refs.refPlayer.setLoop({
          loop: this.isLoop
        })
      },
      setSpeed() {
        this.currentSpeed += 0.5
        if (this.currentSpeed > 3) {
          this.currentSpeed = 1.0
        }
        this.$refs.refPlayer.setSpeed({
          speed: this.currentSpeed
        })
      },
      seekTo() {
        this.$refs.refPlayer.seekTo({
          position: 5000
        })
      },
      replay() {
        this.$refs.refPlayer.replay()
      },
      toggle() {
        this.$refs.refPlayer.toggle()
      },
      stop() {
        this.$refs.refPlayer.stop()
      },
      pause() {
        this.$refs.refPlayer.pause()
      },
      start() {
        this.$refs.refPlayer.start()
      },
      play() {
        this.currentPlayIndex++;
        if (this.currentPlayIndex > 2) {
          this.currentPlayIndex = 0
        }
        let playParams = this.videoList[this.currentPlayIndex];
        this.$refs.refPlayer.play(playParams)
      },
      getVideoData() {
        this.$refs.refPlayer.getVideoData()
      },
      onError(e) {
        console.log("onError:" + JSON.stringify(e.detail))
      },
      onEvent(e) {
        console.log("onEvent:" + JSON.stringify(e.detail))
      },
      onEventMethod(e) {
        console.log("onEventMethod:" + JSON.stringify(e.detail))
      }
    }
  }
</script>

<style>

</style>

vue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex:1">
  <!-- #endif -->
    <view style="width: 750rpx; height: 300px; position: relative;">
      <leven-uts-aliPlayer ref="refPlayer" style="flex:1; height: 300px;" :configX="config" @onError="onError"
        @onEvent="onEvent" @onEventMethod="onEventMethod">
      </leven-uts-aliPlayer>
    </view>
    <lux-card title="播放控制">
      <view style=" flex-direction: row; flex-wrap: wrap;">
        <button type="primary" size="mini" @click="getVideoData">获取视频数据</button>
        <button type="primary" size="mini" @click="play">播放下一个视频</button>
        <button type="primary" size="mini" @click="start">开始播放</button>
        <button type="primary" size="mini" @click="pause">暂停播放</button>
        <button type="primary" size="mini" @click="stop">停止播放</button>
        <button type="primary" size="mini" @click="toggle">播放/暂停切换</button>
        <button type="primary" size="mini" @click="replay">重播</button>
        <button type="primary" size="mini" @click="seekTo">跳转到指定位置</button>
        <button type="primary" size="mini" @click="setSpeed">设置播放速度</button>
        <button type="primary" size="mini" @click="setLoop">设置循环播放</button>
        <button type="primary" size="mini" @click="setMute">设置静音</button>
        <button type="primary" size="mini" @click="setScaleType">设置渲染填充模式</button>
        <button type="primary" size="mini" @click="setMirrorType">设置镜像模式</button>
        <button type="primary" size="mini" @click="setRotation">设置旋转角度</button>
        <button type="primary" size="mini" @click="snapshot">截图</button>
      </view>
    </lux-card>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script lang="uts" setup>
  import JSONObject from 'com.alibaba.fastjson.JSONObject'
  //组件引用
  const refPlayer = ref<LevenUtsAliPlayerElement | null>(null)

  //组件初始化配置
  const config = ref({
    /**
     * 播放源类型，可选值：VidAuth、VidSts、Url
     * VidAuth：通过 VID 和 Auth 授权播放视频的资源类型。使用播放授权码进行授权，适用于需要更简单授权机制的场景。
     * VidSts：通过 VID 和 STS 令牌播放视频的资源类型。使用阿里云 STS (Security Token Service) 进行授权，提供更高的安全性和访问控制。适用于需要临时访问凭证的场景。
     * Url：通过直接 URL 播放视频的资源类型。适用于公开访问的视频资源，无需额外的授权验证。
     */
    playType: "VidAuth",
    //视频ID，VidAuth和VidSts播放源类型必传
    vid: "004fc90fd71d71f0bf184531958c0402",
    //播放凭证，需要调用点播服务的GetVideoPlayAuth接口生成。VidAuth播放源类型必传
    playAuth: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6ImFwcC0xMDAwMDAwIiwidmlkZW9JZCI6IjAwNGZjOTBmZDcxZDcxZjBiZjE4NDUzMTk1OGMwNDAyIiwiY3VycmVudFRpbWVTdGFtcCI6MTc2NjEzMTE5MTYxMywiZXhwaXJlVGltZVN0YW1wIjoxOTIzODExMTkxNjEzLCJyZWdpb25JZCI6ImNuLXNoYW5naGFpIiwicGxheUNvbnRlbnRJbmZvIjp7ImZvcm1hdHMiOiJtM3U4Iiwic3RyZWFtVHlwZSI6InZpZGVvIiwiYXV0aFRpbWVvdXQiOjE4MDB9fQ.CjqZA-6okJb2PxOZr0Jjai9gWwvaNdG-bk3LWBMzhdc",
    //访问密钥 ID，VidSts播放源类型必传
    // accessKeyId: "",
    //访问密钥密文，VidSts播放源类型必传
    // accessKeySecret: "",
    //安全令牌，VidSts播放源类型必传
    // securityToken: "",
    //区域信息，VidSts播放源类型参数，可不传或为空
    // region: "",
    //视频 URL 地址，Url播放源类型必传
    // url: "",
    /**
     * 设置播放场景，可选值：VOD、LIVE、VIDEO_LIST、RESTRICTED、MINIMAL
     * VOD：适用场景：常规视频播放，功能特性：支持所有播放控制功能，包括播放/暂停、进度拖拽、快进/快退、倍速播放、音量/亮度调节、全屏切换、设置菜单等
     * LIVE：直播场景，适用场景：实时直播流播放，能特性：支持播放/暂停、刷新、音量/亮度调节、全屏切换、设置菜单等，但不支持进度拖拽、快进/快退、倍速播放等时间轴相关操作
     * VIDEO_LIST：列表播放场景，适用场景：视频列表中的播放器，如信息流、短视频列表等，功能特性：支持基本播放控制，但禁用垂直手势（音量/亮度调节），避免与列表滚动手势冲突
     * RESTRICTED：受限播放场景（限制时间轴操作），适用场景：教育培训、考试监控、演示展示等需要限制用户跳跃播放的场景，功能特性：支持播放/暂停、音量/亮度调节、全屏切换、设置菜单、字幕显示等，但禁用进度拖拽、快进/快退、倍速播放等时间轴相关操作，确保用户只能按正常速度顺序观看，无法跳过内容
     * MINIMAL：最小化播放场景（仅播放视图，无任何UI），适用场景：背景视频、装饰性视频、嵌入式播放器、自定义UI覆盖等，功能特性：仅显示纯净的视频播放画面，不显示任何UI元素，包括封面图、字幕、播放状态、控制界面等，适合需要完全自定义UI或作为背景元素的场景
     */
    // sceneType: "VOD",
    //设置封面图地址，视频播放前的封面图片 URL，用于在视频加载时显示。
    // coverUrl: "",
    //设置视频标题，视频的标题文本，用于在 UI 中显示。不设置标识不展示标题
    videoTitle: "Long Video",
    //设置是否自动播放，true 表示视频配置完成后自动开始播放，false 表示需要手动调用播放方法。
    // autoPlay: true,
    //设置 trace ID，用于跟踪和统计视频播放的标识符，通常用于日志记录和数据分析。
    // traceId: "",
    //设置视频起始播放时间，视频开始播放的时间点，单位：毫秒。
    // startTime: 0,
    //设置硬件解码,true 为使用硬件解码，false 为使用软件解码，默认为 true
    // isHardWareDecode: true,
    //设置屏幕休眠，true 为允许屏幕休眠，false 为不允许屏幕休眠，默认为 false
    // allowedScreenSleep: false,
    //订阅的播放器事件
    events: ['Error', 'SnapshotCompleted'],
  })

  //播放列表
  const videoList = [{
    playType: "VidAuth",
    vid: "004fc90fd71d71f0bf184531958c0402",
    playAuth: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6ImFwcC0xMDAwMDAwIiwidmlkZW9JZCI6IjAwNGZjOTBmZDcxZDcxZjBiZjE4NDUzMTk1OGMwNDAyIiwiY3VycmVudFRpbWVTdGFtcCI6MTc2NjEzMTE5MTYxMywiZXhwaXJlVGltZVN0YW1wIjoxOTIzODExMTkxNjEzLCJyZWdpb25JZCI6ImNuLXNoYW5naGFpIiwicGxheUNvbnRlbnRJbmZvIjp7ImZvcm1hdHMiOiJtM3U4Iiwic3RyZWFtVHlwZSI6InZpZGVvIiwiYXV0aFRpbWVvdXQiOjE4MDB9fQ.CjqZA-6okJb2PxOZr0Jjai9gWwvaNdG-bk3LWBMzhdc"
  }, {
    playType: "VidAuth",
    vid: "00e9b526d0d671f085715017f1e90402",
    playAuth: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6ImFwcC0xMDAwMDAwIiwidmlkZW9JZCI6IjAwZTliNTI2ZDBkNjcxZjA4NTcxNTAxN2YxZTkwNDAyIiwiY3VycmVudFRpbWVTdGFtcCI6MTc2ODE4ODIzNzAwNiwiZXhwaXJlVGltZVN0YW1wIjoxOTI1ODY4MjM3MDA2LCJyZWdpb25JZCI6ImNuLXNoYW5naGFpIiwicGxheUNvbnRlbnRJbmZvIjp7ImZvcm1hdHMiOiJtM3U4Iiwic3RyZWFtVHlwZSI6InZpZGVvIiwiYXV0aFRpbWVvdXQiOjE4MDB9fQ.AwXM5c8EsLJbhTPoNbEiB3uFVkl7heukuFbntHmC7no"
  }, {
    playType: "Url",
    url: "https://alivc-demo-vod.aliyuncs.com/6b357371ef3c45f4a06e2536fd534380/53733986bce75cfc367d7554a47638c0-fd.mp4"
  }]

  //当前播放的索引
  const currentPlayIndex = ref(0)
  //当前播放速度
  const currentSpeed = ref(1.0)
  //是否循环播放
  const isLoop = ref(false)
  //当前是否静音
  const isMute = ref(false)
  //填充模式
  const scaleType = ref("FIT_CENTER")
  //镜像模式
  const mirrorType = ref("NONE")
  //旋转角度
  const rotation = ref("DEGREE_0")

  function snapshot() {
    refPlayer.value?.snapshot()
  }

  function setRotation() {
    if (rotation.value == "DEGREE_0") {
      rotation.value = "DEGREE_90";
    } else if (rotation.value == "DEGREE_90") {
      rotation.value = "DEGREE_180";
    } else if (rotation.value == "DEGREE_180") {
      rotation.value = "DEGREE_270";
    } else {
      rotation.value = "DEGREE_0";
    }
    let options = {
      rotation: rotation.value
    }
    let params = JSONObject.parse(JSON.stringify(options)) as JSONObject
    refPlayer.value?.setRotation(params)
  }

  function setMirrorType() {
    if (mirrorType.value == "NONE") {
      mirrorType.value = "HORIZONTAL";
    } else if (mirrorType.value == "HORIZONTAL") {
      mirrorType.value = "VERTICAL";
    } else {
      mirrorType.value = "NONE";
    }
    let options = {
      mirrorType: mirrorType.value
    }
    let params = JSONObject.parse(JSON.stringify(options)) as JSONObject
    refPlayer.value?.setMirrorType(params)
  }

  function setScaleType() {
    if (scaleType.value == "FIT_XY") {
      scaleType.value = "FIT_CENTER";
    } else if (scaleType.value == "FIT_CENTER") {
      scaleType.value = "CENTER_CROP";
    } else {
      scaleType.value = "FIT_XY";
    }
    let options = {
      scaleType: scaleType.value
    }
    let params = JSONObject.parse(JSON.stringify(options)) as JSONObject
    refPlayer.value?.setScaleType(params)
  }

  function setMute() {
    isMute.value = !isMute.value
    let options = {
      mute: isMute.value
    }
    let params = JSONObject.parse(JSON.stringify(options)) as JSONObject
    refPlayer.value?.setMute(params)
  }

  function setLoop() {
    isLoop.value = !isLoop.value
    let options = {
      loop: isLoop.value
    }
    let params = JSONObject.parse(JSON.stringify(options)) as JSONObject
    refPlayer.value?.setLoop(params)
  }

  function setSpeed() {
    currentSpeed.value += 0.5
    if (currentSpeed.value > 3) {
      currentSpeed.value = 1.0
    }
    let options = {
      speed: currentSpeed.value
    }
    let params = JSONObject.parse(JSON.stringify(options)) as JSONObject
    refPlayer.value?.setSpeed(params)
  }

  function seekTo() {
    let options = {
      position: 5000
    }
    let params = JSONObject.parse(JSON.stringify(options)) as JSONObject
    refPlayer.value?.seekTo(params)
  }

  function replay() {
    refPlayer.value?.replay()
  }

  function toggle() {
    refPlayer.value?.toggle()
  }

  function stop() {
    refPlayer.value?.stop()
  }

  function pause() {
    refPlayer.value?.pause()
  }

  function start() {
    refPlayer.value?.start()
  }

  function play() {
    currentPlayIndex.value++;
    if (currentPlayIndex.value > 2) {
      currentPlayIndex.value = 0
    }
    let playParams = videoList[currentPlayIndex.value];
    let params = JSONObject.parse(JSON.stringify(playParams)) as JSONObject
    refPlayer.value?.play(params)
  }

  function getVideoData() {
    refPlayer.value?.getVideoData();
  }

  //错误事件
  function onError(e : JSONObject) {
    console.log("onError:" + JSON.stringify(e))
  }

  //其他事件
  function onEvent(e : JSONObject) {
    console.log("onEvent:" + JSON.stringify(e))
  }

  //方法事件
  function onEventMethod(e : JSONObject) {
    console.log("onEventMethod:" + JSON.stringify(e))
  }
</script>

<style>

</style>

使用方法 ​

插件使用注意事项 ​

sdk文档地址 ​

联系作者 ​

插件地址 ​

API用法 ​

组件用法 ​

用法示例 ​

api用法示例 ​

组件用法示例 ​

使用方法

插件使用注意事项

sdk文档地址

联系作者

插件地址

API用法

组件用法

用法示例

api用法示例

组件用法示例