uniapp 安卓视频播放器原生插件

夜中雨滴

已于 2025-03-22 15:18:34 修改

阅读量1.1k

点赞数 9

CC 4.0 BY-SA版权

分类专栏： uniapp插件文章标签： android uni-app 音视频插件前端

于 2024-03-17 16:49:38 首次发布

本文链接：https://blog.csdn.net/lw0911/article/details/136784752

uniapp插件专栏收录该内容

23 篇文章

订阅专栏

插件介绍

安卓视频播放器原生插件，支持自定义播放器内核，支持直播拉流，rtmp，rtsp，m38u等流文件播放

插件地址

安卓视频播放器原生插件 - DCloud 插件市场

详细使用文档

uniapp 安卓视频播放器原生插件使用文档

用法

在需要使用插件的页面加载以下代码

<leven-videoPlayer ref="refYcVideoPlayer" style="flex:1; height: 300px;" :config="config" @onVideoStatus="onVideoStatus"
    @onVideoProgress="onVideoProgress" @onVideoStatusChanged="onVideoStatusChanged" @onError="onError">
</leven-videoPlayer>

页面内容

<template>
  <view>
    <uni-card title="安卓视频播放器原生插件">
      <leven-videoPlayer ref="refYcVideoPlayer" style="flex:1; height: 300px;" :config="config" @onVideoStatus="onVideoStatus"
        @onVideoProgress="onVideoProgress" @onVideoStatusChanged="onVideoStatusChanged" @onError="onError">
      </leven-videoPlayer>
      <uni-section title="内核">
        <uni-data-checkbox v-model="config.kernel" :localdata="kernelType"></uni-data-checkbox>
      </uni-section>
      <uni-section title="播放地址">
        <uni-easyinput v-model="config.url" :maxlength="-1" placeholder="请输入播放地址"></uni-easyinput>
      </uni-section>
      <button type="primary" @click="play">开始播放</button>
      <button type="primary" @click="pause">暂停播放</button>
      <button type="primary" @click="resume">继续播放</button>
      <button type="primary" @click="stop">停止播放</button>
      <button type="primary" @click="shotPic">视频截图</button>
      <button type="primary" @click="isPlaying">是否播放中</button>
      <button type="primary" @click="setPlayPosition">设置播放位置</button>
      <button type="primary" @click="fullScreen">全屏播放</button>
      <button type="primary" @click="smallVideo">显示小窗口</button>
      <button type="primary" @click="logStr = ''">清空日志</button>
    </uni-card>
    <uni-card class="uni-card-box" title="日志">
      <view><text style="font-size: 14px; flex-wrap: wrap;">{{logStr}}</text></view>
    </uni-card>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        logStr: "",
        //配置
        config: {
          //播放地址，rtmp://liteavapp.qcloud.com/live/liteavdemoplayerstreamid
          //http://devimages.apple.com.edgekey.net/streaming/examples/bipbop_4x3/gear1/prog_index.m3u8
          //rtsp://rtspstream:effd2f46af6aef62a77b62104ceafbc0@zephyr.rtsp.stream/movie
          url: "http://alvideo.ippzone.com/zyvd/98/90/b753-55fe-11e9-b0d8-00163e0c0248",
          //播放器预览背景图片，支持网络地址
          backgroundImage: "http://www.yeyuboke.com/svga/image_default.jpg",
          //视频标题
          title: "安卓视频播放器原生插件",
          //默认播放内核
          kernel: 1,
          //全屏时是否横屏显示
          fullIsLand: true,
          //是否循环播放
          loop: true,
          //开始播放位置，单位：毫秒
          seekOnStart: 15000
        },
        // 内核
        kernelType: [{
          text: "IJK内核",
          value: 1
        }, {
          text: "EXO内核",
          value: 2
        }, {
          text: "系统内核",
          value: 3
        }],
      }
    },
    methods: {
      // 开始播放
      play() {
        if (this.$refs.refYcVideoPlayer) {
          this.$refs.refYcVideoPlayer.play(this.config, res => {
            this.writeLog("开始播放:" + JSON.stringify(res))
          });
        }
      },
      // 暂停播放
      pause() {
        if (this.$refs.refYcVideoPlayer) {
          this.$refs.refYcVideoPlayer.pause(res => {
            this.writeLog("暂停播放:" + JSON.stringify(res))
          });
        }
      },
      // 继续播放
      resume() {
        if (this.$refs.refYcVideoPlayer) {
          this.$refs.refYcVideoPlayer.resume(res => {
            this.writeLog("继续播放:" + JSON.stringify(res))
          });
        }
      },
      // 停止播放
      stop() {
        if (this.$refs.refYcVideoPlayer) {
          this.$refs.refYcVideoPlayer.stop(res => {
            this.writeLog("停止播放:" + JSON.stringify(res))
          });
        }
      },
      // 视频截图
      shotPic() {
        if (this.$refs.refYcVideoPlayer) {
          this.$refs.refYcVideoPlayer.shotPic(res => {
            this.writeLog("视频截图:" + JSON.stringify(res))
          });
        }
      },
      // 是否播放中
      isPlaying() {
        if (this.$refs.refYcVideoPlayer) {
          this.$refs.refYcVideoPlayer.isPlaying(res => {
            this.writeLog("是否播放中:" + JSON.stringify(res))
          });
        }
      },
      // 设置播放位置
      setPlayPosition() {
        if (this.$refs.refYcVideoPlayer) {
          this.$refs.refYcVideoPlayer.setPlayPosition({
            //播放位置，单位：毫秒
            position: 30000
          }, res => {
            this.writeLog("设置播放位置:" + JSON.stringify(res))
          });
        }
      },
      // 全屏播放
      fullScreen() {
        if (this.$refs.refYcVideoPlayer) {
          this.$refs.refYcVideoPlayer.fullScreen({
            //是否横屏
            isLand: true
          }, res => {
            this.writeLog("全屏播放:" + JSON.stringify(res))
            //10秒后退出全屏
            setTimeout(() => {
              this.$refs.refYcVideoPlayer.quitFullScreen(quitRes => {
                this.writeLog("退出全屏:" + JSON.stringify(quitRes))
              });
            }, 10000)
          });
        }
      },
      // 小窗口播放
      smallVideo() {
        if (this.$refs.refYcVideoPlayer) {
          this.$refs.refYcVideoPlayer.smallVideo({
            //是否横屏
            size: [500, 500]
          }, res => {
            this.writeLog("小窗口播放:" + JSON.stringify(res))

            //10秒后退出小窗口
            setTimeout(() => {
              this.$refs.refYcVideoPlayer.quitSmallVideo(quitRes => {
                this.writeLog("退出小窗口:" + JSON.stringify(quitRes))
              });
            }, 10000)
          });
        }
      },
      //播放状态回调
      onVideoStatus(e) {
        this.writeLog("onVideoStatus:" + JSON.stringify(e.detail))
      },
      //播放进度回调
      onVideoProgress(e) {
        this.writeLog("onVideoProgress:" + JSON.stringify(e.detail))
      },
      //播放状态的变化
      onVideoStatusChanged(e) {
        this.writeLog("onVideoStatusChanged:" + JSON.stringify(e.detail))
      },
      // 系统错误
      onError(e) {
        this.writeLog("onError:" + JSON.stringify(e))
      },
      // 写日志
      writeLog(str) {
        console.log(str);
        let logStr = uni.$lv.date.format(null, "yyyy-mm-dd hh:MM:ss") + " " + str + "\n";
        this.logStr = logStr + this.logStr;
      }
    }
  }
</script>

<style>

</style>