更新记录

1.0.0（2025-08-18）

1. 视频播放、暂停、进度监听
2. 小窗口画中画播放
3. 支持本地/远程视频

平台兼容性

云端兼容性

uni-app(4.07)

uni-app x(4.07)

其他

videoJS万能视频播放器

集成步骤

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

文档

组件

<wrs-uts-videoplayer ref='videoplayer' :params="params" :style="'width:'+width+'px;height:'+height+'px;'"
    @onLoadView="onLoadView" @onVideoEvent="onVideoEvent"></wrs-uts-videoplayer>

• 使用了该组件的页面需要用nvue或uvue
• 属性params是json格式的字符串

let src = urlArray[urlArray.length - 1]
let poster = "https://vjs.zencdn.net/v/oceans.png"
// 使用app本地视频和封面，本地视频路径采用绝对路径，如/xxx/xxx/xxx.mp4
// src = getResourcePath("/static/test.mp4")
// poster = getResourcePath("/static/logo.png")
let params = {}
params.src = src // 视频链接，支持云端或本地视频
params.poster = poster // 视频封面，支持云端或本地视频
params.autoplay = true // 是否自动播放，这个属性适配大部分手机，不一定适配所有手机，
params.controls = true // 是否显示控制条
params.initSeek = 0 // 从第几秒开始播放
params.menusLeft = [{ // 视频顶部左边自定义按钮，按钮的点击事件通过组件onVideoEvent来回调
    title: "X ", // 按钮标题
    id: 0 // 按钮标识符
}]
params.menusRight = [{ // 视频顶部右边自定义按钮，按钮的点击事件通过组件onVideoEvent来回调
        title: "收藏 ",
        id: 1
    },
    {
        title: "投屏",
        id: 2
    }
]

• 组件事件onVideoEvent

let business = ""
let params = {}
if (this.isAndroid) {
    business = e.detail.params.dynamicJSONFields.business
    params = e.detail.params.dynamicJSONFields.params.dynamicJSONFields
} else {
    business = e.detail.params.business
    params = e.detail.params.params
}
if (business != "") {
    this.showMsg("onVideoEvent business:" + business)
}
switch (business) {
    case "onComponentRead": {
        // 视频组件加载完
        this.showMsg("视频组件加载完:" + business)
    }
    break;
    // 退出全屏
    case "onExitFullWindow": {
        this.showMsg("退出全屏:" + business)

    }
    break;

    case "onEnterFullWindow": {
        this.showMsg("进入全屏:" + business)
    }
    break;
    case "": {
        // {"current":4.418021303001639,"duration":7337.24,"progress":0.0006020861799527159}
        // 播放进度
        console.log("播放进度:" + JSON.stringify(params))
    }
    break;
    case "menuLeftClick": {
        this.showMsg("点击了左边按钮：" + JSON.stringify(params))
    }
    break;
    case "menuRightClick": {
        this.showMsg("点击了右边按钮：" + JSON.stringify(params))
    }
    break;
    default:
        break;
}

• 快进

var params = {}
params.methodName = "seek"
params.time = 10 // 快进到第几秒开始播放
this.$refs.videoplayer.callVideoPlayerMethod(JSON.stringify(params));

• 播放视频

var params = {}
params.methodName = "play"
this.$refs.videoplayer.callVideoPlayerMethod(JSON.stringify(params));

• 暂停播放

var params = {}
params.methodName = "pause"
this.$refs.videoplayer.callVideoPlayerMethod(JSON.stringify(params));

• 切换视频

let params = {}
params.src = "https://xxxxxx" // 通过修改params属性的src来切换
this.params = JSON.stringify(params)

小窗口画中画播放

• 是否已经开启小窗口权限，仅支持Android，iOS不需要判断

let hasPermission = canDrawOverlays()

• 开启小窗口播放，目前iOS采用的是应用内的小窗口，即app在前台运行时会显示小窗口，app在后台运行时会隐藏小窗口

let props = {}
props.src = "https://v2.tlkqc.com/202505/23/J2dwuThNJ074/video/index.m3u8"
props.poster = "https://vjs.zencdn.net/v/oceans.png" // 封面
props.autoplay = false
props.controls = true
props.initSeek = 0

let params = {}
params.props = props // props参数跟播放器组件的params一样，参考上面
params.deleteBtn = {
    visibility: true // 左上角是否显示删除按钮，如需替换删除按钮，可以替换nativeResources文件夹下的图片
}
params.tag = 0 // 用来标识小窗口
showPicInPic(params, (resp) => {

})

• 关闭小窗口

let tag = 0 // 小窗口标识
deletePicInPic(tag, (resp) => {

})