更新记录

1.0.3(2025-10-14)

  1. 优化

1.0.2(2025-09-21)

  1. 增加截图功能

1.0.1(2025-09-21)

  1. 增加播放、暂停等控制
查看更多

平台兼容性

uni-app(3.6.10)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
- - 5.0
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
- - - - - - - - - - -

uni-app x(3.6.10)

Chrome Safari Android iOS 鸿蒙 微信小程序
- - 5.0 -

其他

多语言 暗黑模式 宽屏模式

ijkplayer万能视频播放器,支持m3u8、mp4、rtmp、rtsp等等格式,本地远程视频

集成步骤

  1. 拷贝demo里的AndroidManifest.xml文件到项目根目录
  2. 集成插件,集成插件步骤请参考 https://www.cnblogs.com/wenrisheng/p/18323027

文档

组件


<!--  #ifdef  APP-HARMONY -->
<embed :style="'width:'+width+'px;height:'+height+'px;'" tag="ijkplayer" :options="options"
    @onevent="onEvent"></embed>
<!--  #endif -->
<!--  #ifndef  APP-HARMONY -->
<wrs-uts-ijkplayer ref='videoplayer' :params="params" :style="'width:'+width+'px;height:'+height+'px;'"
    @onEvent="onEvent"></wrs-uts-ijkplayer>
<!--  #endif -->
  • 使用了该组件的页面需要用nvue或uvue
  • 属性params是json格式的字符串

let url = "https://xxxxxx/xx.m3u8" // 或者/xxx/xxx/xxx.mp4

let params = {}
params.businessArray = [{
    business: "setUrl", // 设置播放地址
    params: { // 业务参数
        url: url,
        autoPlay: true
    }
}, {
    business: "setScaleMode", // 设置拉伸方式,setScaleMode需要放到setUrl后面
    params: { // 业务参数
        scaleMode: "aspectFit"
    }
}]
var isAndroid = false
switch (uni.getSystemInfoSync().platform) {
    // android
    case 'android':
        isAndroid = true
        break;
        // ios
    default:
        isAndroid = false
        break;
}
let paramsStr = JSON.stringify(params)
return {
    isAndroid: isAndroid,
    width: windowWidth,
    height: height,
    urlArray: urlArray,
    params: paramsStr,
    imageSrc: null,
    index: 0,
    msg: null,
    options: {
        params: paramsStr
    },
    title: 'Hello'
}

params.businessArray数组里支持的业务对象有:

  • 设置播放地址
let url = "https://xxxxxx/xx.m3u8"
// 本地视频地址如:/xxx/xxx/xxx.mp4

{
    business: "setUrl", // 设置播放地址
    params: { // 业务参数
        url: url,
        autoPlay: true // 是否自动播放
    }
}
  • 设置音量
{
    business: "setVolume", //
    params: {
        volume: 0.5 // 百分比
    }
}
  • 设置播放速度

{
    business: "setPlaybackRate", 
    params: {
        rate: 2 // 倍速
    }
}
  • 获取播放数据,数据结果在onEvent回调,获取播放进度/总时长/加载进度等等,自定义控制页面时可以通过这个接口定时获取播放进度刷新进度条

{
    business: "getPlayerInfo" // 业务
}
  • 快进
{
    business: "setCurrentTime", 
    params: {
        time: 20 // 单位秒
    }
}
  • 截屏,结果在onEvent回调

// 本地图片保存路径
let path = "/xxx/xx/xx.jpg"
{
    business: "getImage", // 业务
    params: {
        path: path
    }
}
  • 暂停
{
    business: "pause"
}
  • 播放
{
    business: "play"
}
  • onEvent回调事件

onEvent(e) {
    // this.showMsg("onVideoEvent :" + JSON.stringify(e))

    let params = {}
    let detail = {}
    if (this.isAndroid) { // 不同版本的HB需要各自去适配获取数据
        detail = e.detail
    } else {
        detail = e.detail

    }
    let opt = detail.opt
    console.log("onEvent opt:" + opt)
    switch (opt) {
        case "getImage": {
            let suc = detail.flag
            if (suc) {
                let path = detail.params.path
                this.imageSrc = "file://" + path
            } else {
                this.showMsg("截图失败:" + JSON.stringify(detail))
            }
        }
        break;
        // 以下是andriod回调
        case "onError": {

        }
        break;
        case "onPrepared": {

        }
        break;
        case "onInfo": {
            let what = detail.what
            console.log("onInfo what:" + what)
            switch (what) {
                case 1: {
                    this.showMsg("MEDIA_INFO_UNKNOWN")
                }
                break;
                case 2: {
                    this.showMsg("MEDIA_INFO_STARTED_AS_NEXT")
                }
                break;
                case 3: {
                    this.showMsg("MEDIA_INFO_VIDEO_RENDERING_START")
                }
                break;
                case 700: {
                    this.showMsg("MEDIA_INFO_VIDEO_TRACK_LAGGING")
                }
                break;
                case 701: {
                    this.showMsg("MEDIA_INFO_BUFFERING_END")
                }
                break;
                case 703: {
                    this.showMsg("MEDIA_INFO_NETWORK_BANDWIDTH")
                }
                break;
                case 800: {
                    this.showMsg("MEDIA_INFO_BAD_INTERLEAVING")
                }
                break;
                case 801: {
                    this.showMsg("MEDIA_INFO_NOT_SEEKABLE")
                }
                break;
                case 802: {
                    this.showMsg("MEDIA_INFO_METADATA_UPDATE")
                }
                break;
                case 901: {
                    this.showMsg("MEDIA_INFO_UNSUPPORTED_SUBTITLE")
                }
                break;
                case 902: {
                    this.showMsg("MEDIA_INFO_SUBTITLE_TIMED_OUT")
                }
                break;
                case 10001: {
                    this.showMsg("MEDIA_INFO_VIDEO_ROTATION_CHANGED")
                }
                break;
                case 10002: {
                    this.showMsg("MEDIA_INFO_AUDIO_RENDERING_START")
                }
                break;
                case 10003: {
                    this.showMsg("MEDIA_INFO_AUDIO_DECODED_START")
                }
                break;
                case 10004: {
                    this.showMsg("MEDIA_INFO_VIDEO_DECODED_START")
                }
                break;
                case 10005: {
                    this.showMsg("MEDIA_INFO_OPEN_INPUT")
                }
                break;
                case 10006: {
                    this.showMsg("MEDIA_INFO_FIND_STREAM_INFO")
                }
                break;
                case 10007: {
                    this.showMsg("MEDIA_INFO_COMPONENT_OPEN")
                }
                break;
                default:
                    break;
            }
        }
        break;
        case "onCompletion": {

        }
        break;
        // 以下是ios回调
        case "mediaIsPreparedToPlayDidChange":
            break;
        case "loadStateDidChange": {
            let state = detail.state
            switch (state) {
                // unknown
                case 0:
                    this.showMsg("加载未知")
                    break;
                    // playable
                case 1:
                    this.showMsg("加载可播放")
                    break;
                    // playthroughOK
                case 2:
                    this.showMsg("加载开始播放")
                    break;
                    // stalled
                case 3:
                    this.showMsg("播放被暂停")
                    break;
                default:
                    break;
            }
        }
        break;
        case "moviePlayBackDidFinish": {
            let reason = detail.reason
            switch (reason) {
                // end
                case 0:
                    this.showMsg("播放结束")
                    break;
                    // error
                case 1:
                    this.showMsg("播放出错")
                    break;
                    // exited
                case 2:
                    this.showMsg("播放退出")
                    break;
                default:
                    break;
            }
        }
        break;
        case "moviePlayBackStateDidChange": {
            let state = detail.state
            switch (state) {
                // stopped
                case 0:
                    this.showMsg("播放停止")
                    break;
                    // playing
                case 1:
                    this.showMsg("播放中")
                    break;
                    // paused
                case 2:
                    this.showMsg("播放暂停")
                    break;
                    // interrupted
                case 3:
                    this.showMsg("播放被打断")
                    break;
                    // seekingForward
                case 4:
                    this.showMsg("播放快进")
                    break;
                    // seekingBackward
                case 5:
                    this.showMsg("播放快退")
                    break;
                default:
                    break;
            }
        }
        break;
        default:
            break;
    }

    // this.showToast("onJSData:" + JSON.stringify(e))
},

隐私、权限声明

1. 本插件需要申请的系统权限列表:

网络权限

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率: