更新记录

1.0.1（2026-06-09）

1. 支持切换视频、播放、暂停、播放进度等回调、录屏、截屏等

1.0.0（2026-06-09）

1. vlc播放器

平台兼容性

uni-app x(3.7.9)

其他

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

集成步骤

1. 拷贝demo里的AndroidManifest.xml文件到项目根目录
2. 插件咨询或定制请点击上面"进入交流群"私聊作者

VLC内核版本：4.0.0

本插件是uniapp x插件，如果是uniapp项目请使用插件https://ext.dcloud.net.cn/plugin?name=wrs-uts-vlc

文档

组件

    <wrs-uts-vlcx :params="params" :style="'width:'+width+'px;height:'+height+'px;'"
    @onEvent="onEvent"></wrs-uts-vlcx>

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

data() {

    const {
        windowWidth,
        windowHeight
    } = uni.getSystemInfoSync();
let url = "https://xxxxxx/xx.m3u8" // 或者/xxx/xxx/xxx.mp4
    let params = {}
    params.businessArray = [
        {
        business: "setUrl", // 设置播放地址
        params: { // 业务参数
            url: url,
            autoPlay: true, // 是否自动播放
            options: [ // vcl播放器参数，更多参数可以百度下
                "--no-drop-late-frames", //防止掉帧
                "--no-skip-frames", //防止掉帧
                "--codec=ffmpeg", // 使用ffmpeg编码
                "--rtsp-tcp", //强制使用TCP方式，强制rtsp-tcp，加快加载视频速度
                "--avcodec-hw=any", //尝试使用硬件加速
                "--live-caching=0" //缓冲时长

            ]
        }
    }]
    let paramsStr = JSON.stringify(params)
    let width = windowWidth
    let height = width / (16.0 / 9.0)
    return {
        index: 0,
        params: paramsStr,
        width: width,
        height: height,
        urlArray: urlArray,
        imageSrc: null,
        msg: null,
        title: 'Hello'
    }
},

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

• 设置播放地址

let url = "https://xxxxxx/xx.m3u8"
// 支持远程或本地视频，本地视频地址如：/xxx/xxx/xxx.mp4
{
        business: "setUrl", // 设置播放地址
        params: { // 业务参数
            url: url,
            autoPlay: true, // 是否自动播放
            options: [ // vcl播放器参数，更多参数可以百度下
                "--no-drop-late-frames", //防止掉帧
                "--no-skip-frames", //防止掉帧
                "--codec=ffmpeg", // 使用ffmpeg编码
                "--rtsp-tcp", //强制使用TCP方式，强制rtsp-tcp，加快加载视频速度
                "--avcodec-hw=any", //尝试使用硬件加速
                "--live-caching=0" //缓冲时长

            ]
        }
}

• 设置音量

{
        business: "setVolume", // 业务
        params: {
            volume: 50 // 整形数字，一般是0～100
        }
}

• 设置播放速度

{
    business: "setRate", // 业务
    params: {
        rate: 2 //倍速
    }
}

• 快进

快进到百分之多少
{
    business: "setPosition", // 业务
    params: {
        position: 0.5 // 百分比进度：0~1
    }
}

或者快进到第几秒
{
    business: "setTime", // 业务
    params: {
        time: 10000 // 毫秒
    }
}

• 暂停

{
    business: "pause"
}

• 播放

{
    business: "play"
}

• 设置视频纵横比

{
    business: "setAspectRatio",
    params: {
        aspectRatio: "16:9" // aspectRatio，如果设置为控件的宽高比的话，则视频铺满整个控件
    }
}

{
    business: "setAspectRatio" // 不传aspectRatio参数的话，则视频会缩放到整个控件完整显示视频
}

• 设置视频缩放

{
    business: "setScale",
    params: {
        scale: 2.0
    }
}

• 设置视频界面宽高比

1. android videoScale支持:DEFAULT, FILL_TO_SCREEN, 4:3, 16:9, 16:10, 2.21:1, FILL, 2.35:1, 2.39:1, 5:4, ORIGINAL
2. ios videoScale支持:DEFAULT, FILL_TO_SCREEN, 4:3, 16:9, 16:10, 2.21:1，iOS其它比例需要各自去测试

{
    business: "setVideoScale",
    params: {
        videoScale: "16:9"
    }
}

• 截屏，结果在onEvent回调

        let dir = UTSVLC.getFileDir()
let name = new Date().getTime()
let path = `${dir}/${name}.jpg`
let businessArray = new Array<UTSJSONObject>()
businessArray.push({
    business: "snapshot",
    params: {
        path: path // 图片保存路径
    }
})
let newParams = {}
newParams["businessArray"] = businessArray
let newParamsStr = formatNewParams(newParams)
params.value = newParamsStr

• 录制视频

        let dir = UTSVLC.getFileDir()
let businessArray = new Array<UTSJSONObject>()
businessArray.push({
    business: "startRecord", // 业务
    params: {
        path: dir // 视频保存目录
    }
})
let newParams = {}
newParams["businessArray"] = businessArray
let newParamsStr = formatNewParams(newParams)
params.value = newParamsStr

• 停止录制视频，结果在onEvent回调

let businessArray = new Array<UTSJSONObject>()
businessArray.push({
    business: "stopRecord"
})
let newParams = {}
newParams["businessArray"] = businessArray
let newParamsStr = formatNewParams(newParams)
params.value = newParamsStr

• onEvent回调事件

onEvent(event) {
    const detail = event.detail

    console.log("onEvent detail:" + JSON.stringify(detail))
    let opt = detail.opt
    switch (opt) {
        // 录制视频完成
        case "recordingStopped": {
            this.videoSrc = detail.filePath
        }
        break;
        case "onLoadView": {
            // 加载组件
        }
        break;
        case "onLoadVLC": {
            // 加载vlc播放器，调用了setUrl设置播放链接后onLoadVLC才会回调，在onLoadVLC才可以调用设置播放器的业务
        }
        break;
        case "snapshot": {
            // 截图回调
            let suc = detail.flag
            if (suc) {
                let path = detail.filePath
                this.imageSrc = "file://" + path
            } else {
                this.showMsg("截图失败:" + JSON.stringify(detail))
            }
        }
        break;
        case "onLengthChanged": {
            // 获取到总时间
            let length = detail.length
            this.totalTime = this.formatTime(length)
        }
        break;
        case "onTimeChange": {
            // 播放进度时间更新
            let time = detail.time
            this.progressTime = this.formatTime(time)
        }
        break;
        case "onPositionChanged": {
            // 播放进度更新
            let position = detail.position
            this.position = position * 100
        }
        break;
        default:
            break;
    }
},