uniapp leven系列原生插件

Appearance

leven2026-08-25
3209
17.5m

使用方法 ​

安卓腾讯视频播放器UTS原生插件是根据腾讯云视立方 Android 播放器组件（原超级播放器）开发的插件，插件包含了播放器UI组件的全部功能，在uniapp和uniappx中集成简单，插件支持uniapp和uniapp x，支持vue2和vue3的选项式和组合式

注意

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

插件使用注意事项 ​

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

https://pan.baidu.com/s/1B6pyL0tOujMzFz-cQVNorQ?pwd=55q7

sdk文档地址 ​

https://cloud.tencent.com/document/product/881/20213

联系作者 ​

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

插件地址 ​

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

API用法 ​

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

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

组件用法 ​

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

vue
<leven-uts-txPlayer ref="refLevenPlayer" v-if="isConfig" style="flex:1; height: 200px; margin-bottom: 20px;"
  :config="config" @onError="onError" @onEvent="onEvent" @onEventMethod="onEventMethod">
</leven-uts-txPlayer>
vue
<leven-uts-txPlayer ref="refPlayer" v-if="isConfig" style="flex:1; height: 200px; margin-bottom: 20px;"
  :configX="config" @onError="onError" @onEvent="onEvent" @onEventMethod="onEventMethod">
</leven-uts-txPlayer>

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

用法示例 ​

api用法示例 ​

vue
<template>
  <view>
    <uni-list>
      <uni-list-item title="超级播放器" clickable link @click="toPage('superPlayer')"></uni-list-item>
    </uni-list>
  </view>
</template>

<script>
  import * as module from "@/uni_modules/leven-uts-txPlayer"
  export default {
    data() {
      return {}
    },
    mounted() {
      this.$nextTick(() => {
        //申请插件所需权限
        this.requestPermissions();
      })
    },
    methods: {
      toPage(type) {
        switch (type) {
          case "superPlayer":
            uni.navigateTo({
              url: "/pages/index/superPlayer"
            })
            break
        }
      },
      showMessage(message) {
        uni.showToast({
          title: message,
          icon: "none"
        })
      },
      initSdk() {
        module.init({
          params: {
            licenceUrl: "https://1253283439.trtcube-license.cn/license/v2/1253283439_1/v_cube.license",
            licenseKey: "049a398d7d177700b18c3299098067f7"
          },
          complete: (res) => {
            if (res.code == 0) {
              this.showMessage("初始化成功")
            } else {
              this.showMessage(res.message)
            }
          }
        })
      },
      toAllFilesPermissionPage() {
        module.toAllFilesPermissionPage({
          complete: (res) => {
            if (res.code == 0) {
              let data = res.data;
              if (!data.status) {
                this.showMessage("所有文件访问权限未打开")
              } else {
                this.initSdk()
              }
            } else {
              this.showMessage(res.message)
            }
          }
        })
      },
      checkAllFilesPermission() {
        module.checkAllFilesPermission({
          complete: (res) => {
            if (res.code == 0) {
              let data = res.data;
              if (!data.status) {
                this.toAllFilesPermissionPage();
              } else {
                this.initSdk()
              }
            } else {
              this.showMessage(res.message)
            }
          }
        })
      },
      //申请插件所需权限
      requestPermissions() {
        module.requestPermissions({
          params: {
            permissions: [
              "android.permission.READ_EXTERNAL_STORAGE",
              "android.permission.WRITE_EXTERNAL_STORAGE"
            ]
          },
          complete: (res) => {
            if (res.code == 0) {
              //判断是否有所有文件访问权限
              this.checkAllFilesPermission();
            } else {
              this.showMessage(res.message)
            }
          }
        })
      },
    }
  }
</script>

<style>

</style>
vue
<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex:1">
  <!-- #endif -->
    <rice-cell-group border>
      <rice-cell title="超级播放器" arrow clickable @click="toPage('superPlayer')"></rice-cell>
    </rice-cell-group>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script setup lang="uts">
  import * as module from "@/uni_modules/leven-uts-txPlayer"
  import { LevenResult, LevenOptions } from "@/uni_modules/leven-uts-txPlayer"

  function toPage(type : string) {
    switch (type) {
      case "superPlayer":
        uni.navigateTo({
          url: "/pages/txPlayer/superPlayer"
        })
        break
    }
  }

  //显示消息
  function showMessage(message : string) {
    uni.showToast({
      title: message,
      icon: "none"
    })
  }

  function initSdk() {
    module.init({
      params: {
        licenceUrl: "https://1253283439.trtcube-license.cn/license/v2/1253283439_1/v_cube.license",
        licenseKey: "049a398d7d177700b18c3299098067f7"
      },
      complete: (res : LevenResult) => {
        if (res.code == 0) {
          showMessage("初始化成功")
        } else {
          showMessage(res.message)
        }
      }
    } as LevenOptions)
  }

  //跳转到所有文件访问权限页面
  function toAllFilesPermissionPage() {
    module.toAllFilesPermissionPage({
      complete: (res : LevenResult) => {
        if (res.code == 0) {
          let data = res.data;
          let status : boolean = data.getBoolean("status")!
          if (!status) {
            showMessage("所有文件访问权限未打开")
          } else {
            initSdk();
          }
        } else {
          showMessage("跳转到所有文件访问权限页面失败")
        }
      }
    } as LevenOptions)
  }

  //检测是否有所有文件访问权限
  function checkAllFilesPermission() {
    module.checkAllFilesPermission({
      complete: (res : LevenResult) => {
        if (res.code == 0) {
          let data = res.data;
          let status : boolean = data.getBoolean("status")!
          if (!status) {
            toAllFilesPermissionPage();
          } else {
            initSdk();
          }
        } else {
          showMessage("查询文件权限失败")
        }
      }
    } as LevenOptions)
  }

  //申请权限
  function requestPermissions() {
    module.requestPermissions({
      params: {
        permissions: [
          'android.permission.READ_EXTERNAL_STORAGE',
          'android.permission.WRITE_EXTERNAL_STORAGE'
        ]
      },
      complete: (res : LevenResult) => {
        console.log(res)
        if (res.code == 0) {
          checkAllFilesPermission()
        } else {
          showMessage("权限申请未通过")
        }
      }
    } as LevenOptions)
  }

  //页面加载
  onMounted(() => {
    //申请权限
    requestPermissions();
  })
</script>

<style>

</style>

组件用法示例 ​

vue
<template>
  <view>
    <leven-uts-txPlayer ref="refLevenPlayer" v-if="isConfig" style="flex:1; height: 200px; margin-bottom: 20px;"
      :config="config" @onError="onError" @onEvent="onEvent" @onEventMethod="onEventMethod">
    </leven-uts-txPlayer>
    <uni-segmented-control :current="controlIndex" :values="controlItems"
      @clickItem="changeControl"></uni-segmented-control>
    <uni-list v-if="controlIndex == 0">
      <uni-list-item v-for="(item, index) in liveList" :title="item.title" :thumb="item.coverPictureUrl" :key="index"
        thumb-size="lg" clickable link @click="playLive(item)"></uni-list-item>
    </uni-list>
    <uni-list v-if="controlIndex == 1">
      <uni-list-item v-for="(item, index) in vodList" :title="item.title"
        :thumb="item.coverPictureUrl || item.placeholderImage" :key="index" thumb-size="lg" clickable link
        @click="playVod(item)"></uni-list-item>
    </uni-list>
  </view>
</template>

<script>
  import {
    TXVodConstants
  } from "@/utils/TXVodConstants.js"
  export default {
    data() {
      return {
        //配置是否准备完毕
        isConfig: false,
        config: {

        },
        //直播列表
        liveList: [{
          title: "FLV直播",
          placeholderImage: "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/66bc542f387702300661648850/0RyP1rZfkdQA.png",
          url: "http://liteavapp.qcloud.com/live/liteavdemoplayerstreamid.flv",
          coverPictureUrl: "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/66bc542f387702300661648850/0RyP1rZfkdQA.png"
        }, {
          title: "RTMP直播",
          placeholderImage: "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/66bc542f387702300661648850/0RyP1rZfkdQA.png",
          url: "rtmp://liteavapp.qcloud.com/live/liteavdemoplayerstreamid",
          coverPictureUrl: "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/66bc542f387702300661648850/0RyP1rZfkdQA.png"
        }, {
          title: "WebRTC直播",
          placeholderImage: "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/66bc542f387702300661648850/0RyP1rZfkdQA.png",
          url: "webrtc://liteavapp.qcloud.com/live/liteavdemoplayerstreamid",
          coverPictureUrl: "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/66bc542f387702300661648850/0RyP1rZfkdQA.png"
        }, {
          title: "HLS直播",
          placeholderImage: "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/66bc542f387702300661648850/0RyP1rZfkdQA.png",
          url: "http://liteavapp.qcloud.com/live/liteavdemoplayerstreamid.m3u8",
          coverPictureUrl: "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/66bc542f387702300661648850/0RyP1rZfkdQA.png"
        }],
        vodList: [{
          appId: "1500005830",
          videoId: {
            fileId: "387702299774251236",
          },
          title: "腾讯云音视频成就",
          coverPictureUrl: "http://1500005830.vod2.myqcloud.com/43843ec0vodtranscq1500005830/48d0f1f9387702299774251236/coverBySnapshot/coverBySnapshot_10_0.jpg"
        }, {
          appId: "1500005830",
          videoId: {
            fileId: "387702299774390972",
          },
          title: "动态水印演示",
          coverPictureUrl: "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/4b6e0e84387702299774390972/387702299947629622.png",
          dynamicWaterConfig: {
            tipText: "shipinyun",
            tipTextSize: 30,
            tipTextColor: "#FF3333"
          }
        }, {
          appId: "1500005830",
          videoId: {
            fileId: "387702299774253670",
          },
          title: "化繁为简，以小建大",
          coverPictureUrl: "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/48d21c3d387702299774253670/387702299947604155.png"
        }, {
          appId: "1500005830",
          videoId: {
            fileId: "387702299774574470",
          },
          title: "数字是什么",
          coverPictureUrl: "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/4ff64b01387702299774574470/387702304138941858.png"
        }, {
          appId: "1500005830",
          videoId: {
            fileId: "387702299774545556",
          },
          title: "试看功能演示",
          coverPictureUrl: "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/4fc091e4387702299774545556/387702299947278317.png",
          vipWatchModel: {
            tip: "可试看15s，开通VIP观看完整视频",
            canWatchTime: 15
          }
        }, {
          appId: "1500005830",
          playAction: 1,
          videoId: {
            fileId: "8602268011437356984",
          },
          title: "自定义封面演示",
          coverPictureUrl: "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/cc1e28208602268011087336518/MXUW1a5I9TsA.png"
        }, {
          appId: "1500005830",
          playAction: 1,
          title: "加密视频_腾讯云业务介绍",
          videoId: {
            fileId: "243791578431393746",
            pSign: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDA" +
              "wNTgzMCwiZmlsZUlkIjoiMjQzNzkxNTc4NDMxMzkzNzQ2IiwiY3VycmVudFRpbWVTdGFtc" +
              "CI6MTY3MzQyNjIyNywiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJQcm90ZWN0" +
              "ZWRBZGFwdGl2ZSIsImRybUFkYXB0aXZlSW5mbyI6eyJwcml2YXRlRW5jcnlwdGlvbkRlZmluaX" +
              "Rpb24iOjEyfX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTUwMDAwNTgzMC52b2QyLm15cWNs" +
              "b3VkLmNvbSIsInNjaGVtZSI6IkhUVFBTIn19.q34pq7Bl0ryKDwUHGyzfXKP-CDI8vrm0k_y-IaxgF_U"
          },
          placeholderImage: "https://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/35ab25fb243791578431393746/onEqUp.png",
        }, {
          appId: "1500006438",
          playAction: 1,
          title: "幽灵水印视频",
          videoId: {
            fileId: "387702307847129127",
            pSign: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDA" +
              "wNjQzOCwiZmlsZUlkIjoiMzg3NzAyMzA3ODQ3MTI5MTI3IiwiY29udG" +
              "VudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJSYXdBZGFwdGl2ZSIsIn" +
              "Jhd0FkYXB0aXZlRGVmaW5pdGlvbiI6MTB9LCJjdXJyZW50VGltZVN0YW1w" +
              "IjoxNjg2ODgzMzYwLCJnaG9zdFdhdGVybWFya0luZm8iOnsidGV4dCI6I" +
              "mdob3N0IGlzIHdhdGNoaW5nIn19.0G2o4P5xVZ7zF" +
              "lFUgBLntfX03iGxK9ntD_AONClUUno"
          },
          placeholderImage: "http://1500006438.vod2.myqcloud.com/4384ba25vodtranscq1500006438/558b62f3387702307847129127/coverBySnapshot_10_0.jpg",
        }, {
          placeholderImage: "http://1500005830.vod2.myqcloud.com/43843ec0vodtranscq1500005830/dc455d1d387702306937256938/coverBySnapshot_10_0.jpg",
          url: "http://1500005830.vod2.myqcloud.com/43843ec0vodtranscq1500005830/dc455d1d387702306937256938/adp.10.m3u8",
          title: "多字幕视频",
          subtitleSourceModelList: [{
            name: "ex-cn-srt",
            url: "https://mediacloud-76607.gzc.vod.tencent-cloud.com/DemoResource/TED-CN.srt",
            mimeType: TXVodConstants.VOD_PLAY_MIMETYPE_TEXT_SRT
          }, {
            name: "ex-in-srt",
            url: "https://mediacloud-76607.gzc.vod.tencent-cloud.com/DemoResource/TED-IN.srt",
            mimeType: TXVodConstants.VOD_PLAY_MIMETYPE_TEXT_SRT
          }, {
            name: "ex-en-vtt",
            url: "https://mediacloud-76607.gzc.vod.tencent-cloud.com/DemoResource/TED-EN.vtt",
            mimeType: TXVodConstants.VOD_PLAY_MIMETYPE_TEXT_VTT
          }]
        }, {
          title: "多音轨视频",
          url: "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/3a76d6ac387702303793151471/iP3rnDdxMH4A.mov",
          placeholderImage: "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/3a76d6ac387702303793151471/387702307093360124.png"
        }, {
          title: "视频列表轮播演示",
          isEnableCache: false,
          placeholderImage: "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/6f443f33387702302226773793/2luyOg7pOR0A.png",
          videoModelList: [{
            appId: "1500005830",
            videoId: {
              fileId: "387702299774211080",
            },
            title: "腾讯云音视频——全",
            coverPictureUrl: "http://1500005830.vod2.myqcloud.com/43843ec0vodtranscq1500005830/48888812387702299774211080/coverBySnapshot/coverBySnapshot_10_0.jpg"
          }, {
            appId: "1500005830",
            videoId: {
              fileId: "387702299774644824",
            },
            title: "腾讯云音视频——真",
            coverPictureUrl: "http://1500005830.vod2.myqcloud.com/43843ec0vodtranscq1500005830/52153a82387702299774644824/coverBySnapshot/coverBySnapshot_10_0.jpg"
          }, {
            appId: "1500005830",
            videoId: {
              fileId: "387702299774544650",
            },
            title: "腾讯云音视频——稳",
            coverPictureUrl: "http://1500005830.vod2.myqcloud.com/43843ec0vodtranscq1500005830/4fc009be387702299774544650/coverBySnapshot/coverBySnapshot_10_0.jpg"
          }]
        }, {
          title: "离线缓存（全屏）演示",
          isEnableCache: true,
          placeholderImage: "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/ae6444ab387702302227194724/n6SJb2ORhQMA.png",
          videoModelList: [{
            appId: "1500005830",
            videoId: {
              fileId: "387702299773851453",
            },
            title: "不只是音视频 1",
            coverPictureUrl: "http://1500005830.vod2.myqcloud.com/43843ec0vodtranscq1500005830/09d5b1bf387702299773851453/coverBySnapshot/coverBySnapshot_10_0.jpg",
            isEnableCache: true,
          }, {
            appId: "1500005830",
            videoId: {
              fileId: "387702299774155981",
            },
            title: "不只是音视频 2",
            coverPictureUrl: "http://1500005830.vod2.myqcloud.com/43843ec0vodtranscq1500005830/467e1943387702299774155981/coverBySnapshot/coverBySnapshot_10_0.jpg",
            isEnableCache: true,
          }, {
            appId: "1500005830",
            videoId: {
              fileId: "387702299773830943",
            },
            title: "不只是音视频 3",
            coverPictureUrl: "http://1500005830.vod2.myqcloud.com/43843ec0vodtranscq1500005830/09b10980387702299773830943/coverBySnapshot/coverBySnapshot_10_0.jpg",
            isEnableCache: true,
          }, {
            appId: "1500005830",
            videoId: {
              fileId: "387702299773823860",
            },
            title: "不只是音视频 4",
            coverPictureUrl: "http://1500005830.vod2.myqcloud.com/43843ec0vodtranscq1500005830/09a09220387702299773823860/coverBySnapshot/coverBySnapshot_10_0.jpg",
            isEnableCache: true,
          }, {
            appId: "1500005830",
            videoId: {
              fileId: "387702299774156604",
            },
            title: "不只是音视频 5",
            coverPictureUrl: "http://1500005830.vod2.myqcloud.com/43843ec0vodtranscq1500005830/467e97dc387702299774156604/coverBySnapshot/coverBySnapshot_10_0.jpg",
            isEnableCache: true,
          }]
        }, {
          title: "DRM视频",
          coverPictureUrl: "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/4ff64b01387702299774574470/387702304138941858.png",
          drmBuilder: {
            playUrl: "https://1500017640.vod2.myqcloud.com/439767a2vodtranscq1500017640/30eb640e243791578648828779/adp.1434415.mpd",
            keyLicenseUrl: "https://widevine.drm.vod-qcloud.com/widevine/getlicense/v2?drmToken=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9~eyJ0eXBlIjoiRHJtVG9rZW4iLCJhcHBJZCI6MTUwMDAxNzY0MCwiZmlsZUlkIjoiMjQzNzkxNTc4NjQ4ODI4Nzc5IiwiY3VycmVudFRpbWVTdGFtcCI6MCwiZXhwaXJlVGltZVN0YW1wIjoyMTQ3NDgzNjQ3LCJyYW5kb20iOjAsIm92ZXJsYXlLZXkiOiIiLCJvdmVybGF5SXYiOiIiLCJjaXBoZXJlZE92ZXJsYXlLZXkiOiIiLCJjaXBoZXJlZE92ZXJsYXlJdiI6IiIsImtleUlkIjowLCJzdHJpY3RNb2RlIjowLCJwZXJzaXN0ZW50IjoiT04iLCJyZW50YWxEdXJhdGlvbiI6MCwiZm9yY2VMMVRyYWNrVHlwZXMiOm51bGx9~bTRTEni3j96XeRa17olRo6KT_dvSNrjJCZQ4b7Wb-qw"
          },
          isEnableCache: true
        }],
        controlItems: ['直播列表', '点播列表'],
        controlIndex: 0
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.setPlayConfig();
      })
    },
    methods: {
      changeControl(e) {
        if (this.controlIndex !== e.currentIndex) {
          this.controlIndex = e.currentIndex
        }
      },
      //获取播放内容
      setPlayConfig() {
        if (this.controlIndex == 0) {
          let model = this.liveList[0];
          this.config = {
            appId: "1252463788",
            qualityVisible: true,
            //不显示画中画按钮
            showPIPIV: false,
            playerModels: [model]
          }
          this.isConfig = true
        }
      },
      playLive(data) {
        console.log(data)
        this.$refs.refLevenPlayer.play({
          appId: "1252463788",
          qualityVisible: true,
          //不显示画中画按钮
          showPIPIV: false,
          playerModels: [data]
        })
      },
      playVod(data) {
        if (data.videoModelList) {
          this.$refs.refLevenPlayer.play({
            qualityVisible: true,
            //不显示画中画按钮
            showPIPIV: false,
            playerModels: data.videoModelList
          })
        } else {
          this.$refs.refLevenPlayer.play({
            qualityVisible: true,
            //不显示画中画按钮
            showPIPIV: false,
            playerModels: [data]
          })
        }
      },
      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: 200px; position: relative;">
      <leven-uts-txPlayer ref="refPlayer" v-if="isConfig" style="flex:1; height: 200px; margin-bottom: 20px;"
        :configX="config" @onError="onError" @onEvent="onEvent" @onEventMethod="onEventMethod">
      </leven-uts-txPlayer>
    </view>
    <rice-subsection v-model="controlIndex" :list="controlItems"></rice-subsection>
    <rice-cell-group v-if="controlIndex == 0" border>
      <rice-cell v-for="(item, index) in liveList" :title="item.title" :key="index" arrow clickable center
        @click="playLive(item)">
        <template #leftIcon>
          <rice-image style="margin-right: 5px;" width="30" height="30" :src="item.coverPictureUrl"
            radius="5px"></rice-image>
        </template>
      </rice-cell>
    </rice-cell-group>
    <rice-cell-group v-if="controlIndex == 1" border>
      <rice-cell v-for="(item, index) in vodList" :title="item.title" :key="index" arrow clickable center
        @click="playVod(item)">
        <template #leftIcon>
          <rice-image style="margin-right: 5px;" width="30" height="30"
            :src="item.coverPictureUrl  || item.placeholderImage" radius="5px"></rice-image>
        </template>
      </rice-cell>
    </rice-cell-group>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script setup lang="uts">
  import JSONObject from 'com.alibaba.fastjson.JSONObject'
  import { TXVodConstants } from "@/utils/txPlayer/TXVodConstants.uts"

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

  const isConfig = ref(false);
  const config = ref({})
  const controlIndex = ref(0)
  const controlItems = ref(['直播列表', '点播列表'])

  //直播列表
  const liveList = [{
    title: "FLV直播",
    placeholderImage: "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/66bc542f387702300661648850/0RyP1rZfkdQA.png",
    url: "http://liteavapp.qcloud.com/live/liteavdemoplayerstreamid.flv",
    coverPictureUrl: "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/66bc542f387702300661648850/0RyP1rZfkdQA.png"
  }, {
    title: "RTMP直播",
    placeholderImage: "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/66bc542f387702300661648850/0RyP1rZfkdQA.png",
    url: "rtmp://liteavapp.qcloud.com/live/liteavdemoplayerstreamid",
    coverPictureUrl: "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/66bc542f387702300661648850/0RyP1rZfkdQA.png"
  }, {
    title: "WebRTC直播",
    placeholderImage: "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/66bc542f387702300661648850/0RyP1rZfkdQA.png",
    url: "webrtc://liteavapp.qcloud.com/live/liteavdemoplayerstreamid",
    coverPictureUrl: "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/66bc542f387702300661648850/0RyP1rZfkdQA.png"
  }, {
    title: "HLS直播",
    placeholderImage: "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/66bc542f387702300661648850/0RyP1rZfkdQA.png",
    url: "http://liteavapp.qcloud.com/live/liteavdemoplayerstreamid.m3u8",
    coverPictureUrl: "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/66bc542f387702300661648850/0RyP1rZfkdQA.png"
  }]

  //点播列表
  const vodList = [{
    appId: "1500005830",
    videoId: {
      fileId: "387702299774251236",
    },
    title: "腾讯云音视频成就",
    coverPictureUrl: "http://1500005830.vod2.myqcloud.com/43843ec0vodtranscq1500005830/48d0f1f9387702299774251236/coverBySnapshot/coverBySnapshot_10_0.jpg"
  }, {
    appId: "1500005830",
    videoId: {
      fileId: "387702299774390972",
    },
    title: "动态水印演示",
    coverPictureUrl: "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/4b6e0e84387702299774390972/387702299947629622.png",
    dynamicWaterConfig: {
      tipText: "shipinyun",
      tipTextSize: 30,
      tipTextColor: "#FF3333"
    }
  }, {
    appId: "1500005830",
    videoId: {
      fileId: "387702299774253670",
    },
    title: "化繁为简，以小建大",
    coverPictureUrl: "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/48d21c3d387702299774253670/387702299947604155.png"
  }, {
    appId: "1500005830",
    videoId: {
      fileId: "387702299774574470",
    },
    title: "数字是什么",
    coverPictureUrl: "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/4ff64b01387702299774574470/387702304138941858.png"
  }, {
    appId: "1500005830",
    videoId: {
      fileId: "387702299774545556",
    },
    title: "试看功能演示",
    coverPictureUrl: "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/4fc091e4387702299774545556/387702299947278317.png",
    vipWatchModel: {
      tip: "可试看15s，开通VIP观看完整视频",
      canWatchTime: 15
    }
  }, {
    appId: "1500005830",
    playAction: 1,
    videoId: {
      fileId: "8602268011437356984",
    },
    title: "自定义封面演示",
    coverPictureUrl: "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/cc1e28208602268011087336518/MXUW1a5I9TsA.png"
  }, {
    appId: "1500005830",
    playAction: 1,
    title: "加密视频_腾讯云业务介绍",
    videoId: {
      fileId: "243791578431393746",
      pSign: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDA" +
        "wNTgzMCwiZmlsZUlkIjoiMjQzNzkxNTc4NDMxMzkzNzQ2IiwiY3VycmVudFRpbWVTdGFtc" +
        "CI6MTY3MzQyNjIyNywiY29udGVudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJQcm90ZWN0" +
        "ZWRBZGFwdGl2ZSIsImRybUFkYXB0aXZlSW5mbyI6eyJwcml2YXRlRW5jcnlwdGlvbkRlZmluaX" +
        "Rpb24iOjEyfX0sInVybEFjY2Vzc0luZm8iOnsiZG9tYWluIjoiMTUwMDAwNTgzMC52b2QyLm15cWNs" +
        "b3VkLmNvbSIsInNjaGVtZSI6IkhUVFBTIn19.q34pq7Bl0ryKDwUHGyzfXKP-CDI8vrm0k_y-IaxgF_U"
    },
    placeholderImage: "https://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/35ab25fb243791578431393746/onEqUp.png",
  }, {
    appId: "1500006438",
    playAction: 1,
    title: "幽灵水印视频",
    videoId: {
      fileId: "387702307847129127",
      pSign: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTUwMDA" +
        "wNjQzOCwiZmlsZUlkIjoiMzg3NzAyMzA3ODQ3MTI5MTI3IiwiY29udG" +
        "VudEluZm8iOnsiYXVkaW9WaWRlb1R5cGUiOiJSYXdBZGFwdGl2ZSIsIn" +
        "Jhd0FkYXB0aXZlRGVmaW5pdGlvbiI6MTB9LCJjdXJyZW50VGltZVN0YW1w" +
        "IjoxNjg2ODgzMzYwLCJnaG9zdFdhdGVybWFya0luZm8iOnsidGV4dCI6I" +
        "mdob3N0IGlzIHdhdGNoaW5nIn19.0G2o4P5xVZ7zF" +
        "lFUgBLntfX03iGxK9ntD_AONClUUno"
    },
    placeholderImage: "http://1500006438.vod2.myqcloud.com/4384ba25vodtranscq1500006438/558b62f3387702307847129127/coverBySnapshot_10_0.jpg",
  }, {
    placeholderImage: "http://1500005830.vod2.myqcloud.com/43843ec0vodtranscq1500005830/dc455d1d387702306937256938/coverBySnapshot_10_0.jpg",
    url: "http://1500005830.vod2.myqcloud.com/43843ec0vodtranscq1500005830/dc455d1d387702306937256938/adp.10.m3u8",
    title: "多字幕视频",
    subtitleSourceModelList: [{
      name: "ex-cn-srt",
      url: "https://mediacloud-76607.gzc.vod.tencent-cloud.com/DemoResource/TED-CN.srt",
      mimeType: TXVodConstants.VOD_PLAY_MIMETYPE_TEXT_SRT
    }, {
      name: "ex-in-srt",
      url: "https://mediacloud-76607.gzc.vod.tencent-cloud.com/DemoResource/TED-IN.srt",
      mimeType: TXVodConstants.VOD_PLAY_MIMETYPE_TEXT_SRT
    }, {
      name: "ex-en-vtt",
      url: "https://mediacloud-76607.gzc.vod.tencent-cloud.com/DemoResource/TED-EN.vtt",
      mimeType: TXVodConstants.VOD_PLAY_MIMETYPE_TEXT_VTT
    }]
  }, {
    title: "多音轨视频",
    url: "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/3a76d6ac387702303793151471/iP3rnDdxMH4A.mov",
    placeholderImage: "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/3a76d6ac387702303793151471/387702307093360124.png"
  }, {
    title: "视频列表轮播演示",
    isEnableCache: false,
    placeholderImage: "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/6f443f33387702302226773793/2luyOg7pOR0A.png",
    videoModelList: [{
      appId: "1500005830",
      videoId: {
        fileId: "387702299774211080",
      },
      title: "腾讯云音视频——全",
      coverPictureUrl: "http://1500005830.vod2.myqcloud.com/43843ec0vodtranscq1500005830/48888812387702299774211080/coverBySnapshot/coverBySnapshot_10_0.jpg"
    }, {
      appId: "1500005830",
      videoId: {
        fileId: "387702299774644824",
      },
      title: "腾讯云音视频——真",
      coverPictureUrl: "http://1500005830.vod2.myqcloud.com/43843ec0vodtranscq1500005830/52153a82387702299774644824/coverBySnapshot/coverBySnapshot_10_0.jpg"
    }, {
      appId: "1500005830",
      videoId: {
        fileId: "387702299774544650",
      },
      title: "腾讯云音视频——稳",
      coverPictureUrl: "http://1500005830.vod2.myqcloud.com/43843ec0vodtranscq1500005830/4fc009be387702299774544650/coverBySnapshot/coverBySnapshot_10_0.jpg"
    }]
  }, {
    title: "离线缓存（全屏）演示",
    isEnableCache: true,
    placeholderImage: "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/ae6444ab387702302227194724/n6SJb2ORhQMA.png",
    videoModelList: [{
      appId: "1500005830",
      videoId: {
        fileId: "387702299773851453",
      },
      title: "不只是音视频 1",
      coverPictureUrl: "http://1500005830.vod2.myqcloud.com/43843ec0vodtranscq1500005830/09d5b1bf387702299773851453/coverBySnapshot/coverBySnapshot_10_0.jpg",
      isEnableCache: true,
    }, {
      appId: "1500005830",
      videoId: {
        fileId: "387702299774155981",
      },
      title: "不只是音视频 2",
      coverPictureUrl: "http://1500005830.vod2.myqcloud.com/43843ec0vodtranscq1500005830/467e1943387702299774155981/coverBySnapshot/coverBySnapshot_10_0.jpg",
      isEnableCache: true,
    }, {
      appId: "1500005830",
      videoId: {
        fileId: "387702299773830943",
      },
      title: "不只是音视频 3",
      coverPictureUrl: "http://1500005830.vod2.myqcloud.com/43843ec0vodtranscq1500005830/09b10980387702299773830943/coverBySnapshot/coverBySnapshot_10_0.jpg",
      isEnableCache: true,
    }, {
      appId: "1500005830",
      videoId: {
        fileId: "387702299773823860",
      },
      title: "不只是音视频 4",
      coverPictureUrl: "http://1500005830.vod2.myqcloud.com/43843ec0vodtranscq1500005830/09a09220387702299773823860/coverBySnapshot/coverBySnapshot_10_0.jpg",
      isEnableCache: true,
    }, {
      appId: "1500005830",
      videoId: {
        fileId: "387702299774156604",
      },
      title: "不只是音视频 5",
      coverPictureUrl: "http://1500005830.vod2.myqcloud.com/43843ec0vodtranscq1500005830/467e97dc387702299774156604/coverBySnapshot/coverBySnapshot_10_0.jpg",
      isEnableCache: true,
    }]
  }, {
    title: "DRM视频",
    coverPictureUrl: "http://1500005830.vod2.myqcloud.com/6c9a5118vodcq1500005830/4ff64b01387702299774574470/387702304138941858.png",
    drmBuilder: {
      playUrl: "https://1500017640.vod2.myqcloud.com/439767a2vodtranscq1500017640/30eb640e243791578648828779/adp.1434415.mpd",
      keyLicenseUrl: "https://widevine.drm.vod-qcloud.com/widevine/getlicense/v2?drmToken=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9~eyJ0eXBlIjoiRHJtVG9rZW4iLCJhcHBJZCI6MTUwMDAxNzY0MCwiZmlsZUlkIjoiMjQzNzkxNTc4NjQ4ODI4Nzc5IiwiY3VycmVudFRpbWVTdGFtcCI6MCwiZXhwaXJlVGltZVN0YW1wIjoyMTQ3NDgzNjQ3LCJyYW5kb20iOjAsIm92ZXJsYXlLZXkiOiIiLCJvdmVybGF5SXYiOiIiLCJjaXBoZXJlZE92ZXJsYXlLZXkiOiIiLCJjaXBoZXJlZE92ZXJsYXlJdiI6IiIsImtleUlkIjowLCJzdHJpY3RNb2RlIjowLCJwZXJzaXN0ZW50IjoiT04iLCJyZW50YWxEdXJhdGlvbiI6MCwiZm9yY2VMMVRyYWNrVHlwZXMiOm51bGx9~bTRTEni3j96XeRa17olRo6KT_dvSNrjJCZQ4b7Wb-qw"
    },
    isEnableCache: true
  }]

  function playLive(data : UTSJSONObject) {
    let options = {
      appId: "1252463788",
      qualityVisible: true,
      //不显示画中画按钮
      showPIPIV: false,
      playerModels: [data]
    };
    let params = JSONObject.parse(JSON.stringify(options)) as JSONObject
    console.log(params)
    refPlayer.value?.play(params)
  }

  function playVod(data : UTSJSONObject) {
    let videoModelList = data.getArray("videoModelList")
    if (videoModelList != null) {
      let options = {
        qualityVisible: true,
        //不显示画中画按钮
        showPIPIV: false,
        playerModels: videoModelList
      };
      let params = JSONObject.parse(JSON.stringify(options)) as JSONObject
      refPlayer.value?.play(params)
    } else {
      let options = {
        qualityVisible: true,
        //不显示画中画按钮
        showPIPIV: false,
        playerModels: [data]
      }
      let params = JSONObject.parse(JSON.stringify(options)) as JSONObject
      refPlayer.value?.play(params)
    }
  }

  function setPlayConfig() {
    if (controlIndex.value == 0) {
      let model = liveList[0];
      config.value = {
        appId: "1252463788",
        qualityVisible: true,
        //不显示画中画按钮
        showPIPIV: false,
        playerModels: [model]
      }
      isConfig.value = true
    }
  }

  //错误事件
  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))
  }

  onMounted(() => {
    setPlayConfig();
  })
</script>

<style>

</style>