使用方法

安卓百度视频播放器UTS原生插件是根据百度智能云播放器 Android SDK 开发的插件，插件包含了播放器大部分功能，在uniapp和uniappx中集成简单，插件支持uniapp和uniapp x，支持vue2和vue3的选项式和组合式

注意

如果插件的接口不能满足您的要求可以联系作者优化

插件使用注意事项

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

https://pan.baidu.com/s/16p1oy_Y6YGc5zlrijmTGaA?pwd=i3xr

sdk文档地址

https://cloud.baidu.com/doc/VideoCreatingSDK/s/Wldy8749w

联系作者

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

插件地址

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

API用法

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

uniapp

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

uniappx

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

组件用法

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

uniapp

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

uniappx

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

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

用法示例

api用法示例

uniapp

<template>
  <view>
    <uni-list>
      <uni-list-item title="普通播放" clickable link @click="toPage('commonPlay')"></uni-list-item>
    </uni-list>
  </view>
</template>

<script>
  import * as module from "@/uni_modules/leven-uts-bdPlayer"
  export default {
    data() {
      return {
        title: 'Hello'
      }
    },
    mounted() {
      this.$nextTick(() => {
        //申请插件所需权限
        this.requestPermissions();
      })
    },
    methods: {
      toPage(type) {
        switch (type) {
          case "commonPlay":
            uni.navigateTo({
              url: "/pages/index/commonPlay/index"
            })
            break
        }
      },
      showMessage(message) {
        uni.showToast({
          title: message,
          icon: "none"
        })
      },
      initSdk() {
        module.init({
          params: {
            appId: "155663876321772441601p"
          },
          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>

uniappx

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex:1">
  <!-- #endif -->
    <rice-cell-group border>
      <rice-cell title="普通播放" arrow @click="toPage('commonPlay')"></rice-cell>
    </rice-cell-group>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

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

  function toPage(type : string) {
    switch (type) {
      case "commonPlay":
        uni.navigateTo({
          url: "/pages/bdPlayer/commonPlay/index"
        })
        break
    }
  }

  function showMessage(message : string) {
    uni.showToast({
      title: message,
      icon: "none"
    })
  }

  function initSdk() {
    module.init({
      params: {
        appId: "155247036765774233601p"
      },
      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 = data.getBoolean("status")!
          if (!status) {
            showMessage("所有文件访问权限未打开")
          } else {
            initSdk();
          }
        } else {
          showMessage(res.message)
        }
      }
    })
  }

  function checkAllFilesPermission() {
    module.checkAllFilesPermission({
      complete: (res : LevenResult) => {
        if (res.code == 0) {
          let data = res.data;
          let status = data.getBoolean("status")!
          if (!status) {
            toAllFilesPermissionPage();
          } else {
            initSdk();
          }
        } else {
          showMessage(res.message)
        }
      }
    } as LevenOptions)
  }

  //申请插件所需权限
  function requestPermissions() {
    module.requestPermissions({
      params: {
        permissions: [
          "android.permission.READ_EXTERNAL_STORAGE",
          "android.permission.WRITE_EXTERNAL_STORAGE"
        ]
      },
      complete: (res : LevenResult) => {
        if (res.code == 0) {
          //判断是否有所有文件访问权限
          checkAllFilesPermission();
        } else {
          showMessage(res.message)
        }
      }
    } as LevenOptions)
  }

  onMounted(() => {
    nextTick(() => {
      requestPermissions()
    })
  })
</script>

<style>

</style>

组件用法示例

uniapp

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

<script>
  export default {
    name: "player",
    props: {
      config: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {

      };
    },
    methods: {
      showMessage(message) {
        uni.showToast({
          title: message,
          icon: 'none'
        })
      },
      setPlayer(options) {
        let type = options.type;
        switch (type) {
          case "download":
            //下载视频
            this.download()
            break
          case "setResolution":
            //填充模式
            this.setResolution(options.resolutionIndex)
            break
          case "setVideoScalingMode":
            //填充模式
            this.setVideoScalingMode(options.scalingMode)
            break
          case "setSpeed":
            //播放速度
            this.setSpeed(options.speed)
            break
          case "stopRecording":
            //结束录像
            this.stopRecording()
            break
          case "startRecording":
            //开始录像
            this.startRecording()
            break
          case "snapshot":
            //截图
            this.snapshot()
            break
          case "sendDanMu":
            //发送弹幕
            this.sendDanMu(options.danmu)
            break
          case "toggleDanMu":
            //弹幕开关
            this.toggleDanMu()
            break
          case "listen":
            //听视频切换
            this.toggleListen()
            break
          case "setTrack":
            //设置音轨
            let audioTracks = options.audioTracks || []
            this.setTrack(audioTracks)
            break
          case "setTimedText":
            //设置音轨
            let subTracks = options.subTracks || []
            this.setTimedText(subTracks)
            break
        }
      },
      download() {
        this.$refs.refPlayer.download()
      },
      //设置多码率
      setResolution(value) {
        this.$refs.refPlayer.setResolution({
          index: value
        })
      },
      //设置裁剪模式
      setVideoScalingMode(value) {
        this.$refs.refPlayer.setVideoScalingMode({
          scalingMode: value
        })
      },
      //设置播放速度
      setSpeed(speed) {
        this.$refs.refPlayer.setSpeed({
          speed: speed
        })
      },
      //结束录像
      stopRecording() {
        this.$refs.refPlayer.stopRecording()
      },
      //开始录像
      startRecording() {
        this.$refs.refPlayer.startRecording({})
      },
      //截图
      snapshot() {
        this.$refs.refPlayer.snapshot({})
      },
      //发送弹幕
      sendDanMu(data) {
        this.$refs.refPlayer.sendDanMu(data)
      },
      setTrack(audioTracks) {
        // this.$refs.refPlayer.pip()
        let itemList = audioTracks.map(item => item.language)
        uni.showActionSheet({
          title: "选择音轨 ",
          itemList: itemList,
          success: (res) => {
            let item = audioTracks[res.tapIndex];
            let index = item.index;
            console.log(index)
            if (index == -1) {
              this.$refs.refPlayer.deselectTrack()
            } else {
              this.$refs.refPlayer.setTrack({
                index: index
              })
            }
          }
        })
      },
      setTimedText(audioTracks) {
        // this.$refs.refPlayer.pip()
        let itemList = audioTracks.map(item => item.language)
        uni.showActionSheet({
          title: "选择音轨 ",
          itemList: itemList,
          success: (res) => {
            let item = audioTracks[res.tapIndex];
            let index = item.index;
            console.log(index)
            if (index == -1) {
              this.$refs.refPlayer.deselectTimedText()
            } else {
              this.$refs.refPlayer.setTimedText({
                index: index
              })
            }
          }
        })
      },
      toggleDanMu() {
        this.$refs.refPlayer.toggleDanMu()
      },
      toggleListen() {
        this.$refs.refPlayer.toggleListen()
      },
      onError(e) {
        console.log("onError:" + JSON.stringify(e.detail))
      },
      onEvent(e) {
        // console.log("onEvent:" + JSON.stringify(e.detail))
        let detail = e.detail || {};
        this.$emit("onEvent", detail);
      },
      onEventMethod(e) {
        console.log("onEventMethod:" + JSON.stringify(e.detail))
        let detail = e.detail;
        let type = detail.type;
        let data = detail.data;
        let optionsData = data.data;
        if (type == "setResolution") {
          //设置清晰度
          let status = optionsData.status;
          if (status == "onStart") {
            this.showMessage("清晰度切换中...")
          } else if (status == "onSuccess") {
            this.showMessage("清晰度切换成功")
          } else {
            this.showMessage("清晰度切换失败")
          }
        }
      }
    }
  }
</script>

<style>

</style>

uniappx

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

<script lang="uts" setup>
  import JSONObject from 'com.alibaba.fastjson.JSONObject'
  const refPlayer = ref<LevenUtsBdPlayerElement | null>(null)
  type ConfigOptions = {
    config : UTSJSONObject
  }
  withDefaults(defineProps<ConfigOptions>(), {
    config: {}
  })

  const emit = defineEmits(['onEvent'])

  function showMessage(message : string) {
    uni.showToast({
      title: message,
      icon: 'none'
    })
  }

  function setResolution(value : number) {
    let options = {
      index: value
    }
    let params : JSONObject = JSONObject.parse(JSON.stringify(options)) as JSONObject
    refPlayer.value?.setResolution(params);
  }

  function setVideoScalingMode(value : string) {
    let options = {
      scalingMode: value
    }
    let params : JSONObject = JSONObject.parse(JSON.stringify(options)) as JSONObject
    refPlayer.value?.setVideoScalingMode(params);
  }

  function setSpeed(value : number) {
    let options = {
      speed: value
    }
    let params : JSONObject = JSONObject.parse(JSON.stringify(options)) as JSONObject
    refPlayer.value?.setSpeed(params);
  }

  function startRecording() {
    let options = {}
    let params : JSONObject = JSONObject.parse(JSON.stringify(options)) as JSONObject
    refPlayer.value?.startRecording(params);
  }

  function snapshot() {
    let options = {}
    let params : JSONObject = JSONObject.parse(JSON.stringify(options)) as JSONObject
    refPlayer.value?.snapshot(params);
  }

  function sendDanMu(danmu : UTSJSONObject) {
    let params : JSONObject = JSONObject.parse(JSON.stringify(danmu)) as JSONObject
    refPlayer.value?.sendDanMu(params);
  }

  function setTrack(audioTracks : UTSJSONObject[]) {
    let itemList : string[] = audioTracks.map(item => item.getString("language")!)
    uni.showActionSheet({
      title: "选择音轨 ",
      itemList: itemList,
      success: (res) => {
        let item = audioTracks[res.tapIndex];
        let index = item.index;
        if (index == -1) {
          refPlayer.value?.deselectTrack()
        } else {
          let options = {
            index: index
          }
          let params : JSONObject = JSONObject.parse(JSON.stringify(options)) as JSONObject
          refPlayer.value?.setTrack(params)
        }
      }
    })
  }

  function setTimedText(audioTracks : UTSJSONObject[]) {
    let itemList : string[] = audioTracks.map(item => item.getString("language")!)
    uni.showActionSheet({
      title: "选择字幕 ",
      itemList: itemList,
      success: (res) => {
        let item = audioTracks[res.tapIndex];
        let index = item.index;
        if (index == -1) {
          refPlayer.value?.deselectTimedText()
        } else {
          let options = {
            index: index
          }
          let params : JSONObject = JSONObject.parse(JSON.stringify(options)) as JSONObject
          refPlayer.value?.setTimedText(params)
        }
      }
    })
  }

  function setPlayer(options : UTSJSONObject) {
    let type : string = options.getString("type")!;
    switch (type) {
      case "download":
        //下载视频
        refPlayer.value?.download()
        break
      case "setResolution":
        //设置多码率
        let resolutionIndex : number = options.getNumber("resolutionIndex")!
        setResolution(resolutionIndex)
        break
      case "setVideoScalingMode":
        //填充模式
        let scalingMode : string = options.getString("scalingMode")!
        setVideoScalingMode(scalingMode)
        break
      case "setSpeed":
        //播放速度
        let speed : number = options.getNumber("speed")!
        setSpeed(speed)
        break
      case "stopRecording":
        //结束录像
        refPlayer.value?.stopRecording()
        break
      case "startRecording":
        //开始录像
        startRecording()
        break
      case "snapshot":
        //截图
        snapshot()
        break
      case "sendDanMu":
        //发送弹幕
        let danmu : UTSJSONObject = options.getJSON("danmu")!
        sendDanMu(danmu)
        break
      case "toggleDanMu":
        //弹幕开关
        refPlayer.value?.toggleDanMu()
        break
      case "listen":
        //听视频切换
        refPlayer.value?.toggleListen()
        break
      case "setTrack":
        //设置音轨
        let audioTracks : UTSJSONObject[] = options.getArray("audioTracks") as UTSJSONObject[]
        setTrack(audioTracks)
        break
      case "setTimedText":
        //设置字幕
        let subTracks : UTSJSONObject[] = options.getArray("subTracks") as UTSJSONObject[]
        setTimedText(subTracks)
        break
    }
  }

  function onError(e : JSONObject) {
    console.log("onError:" + JSON.stringify(e))
  }

  function onEvent(e : JSONObject) {
    // emit('onEvent')
    // console.log("onEvent:" + JSON.stringify(e))
    emit('onEvent', e)
  }

  function onEventMethod(e : JSONObject) {
    console.log("onError:" + JSON.stringify(e))
    let type : string = e.getString("type")!
    let data : JSONObject = e.getJSONObject("data")!
    let optionsData : JSONObject = data.getJSONObject("data")!
    if (type == "setResolution") {
      //设置清晰度
      let status : string = optionsData.getString("status")!;
      if (status == "onStart") {
        showMessage("清晰度切换中...")
      } else if (status == "onSuccess") {
        showMessage("清晰度切换成功")
      } else {
        showMessage("清晰度切换失败")
      }
    }
  }

  defineExpose({ setPlayer })
</script>

<style>

</style>