更新记录

1.3.0（2025-06-17）

优化细节

1.2.0（2025-06-09）

• 修改说明

1.1.0（2025-04-02）

优化细节，修复bug

平台兼容性

云端兼容性

uni-app(4.25)

uni-app x(4.25)

yzc-vlckit 兼容安卓、iOS端VLC播放器，支持rtsp、rtmp流播放（需要打自定义基座，请测试没问题再购买）

注意如果是uniapp，文件后缀必须是nvue（为了避免打包后找不到插件或者插件不生效，打自定义基座时请修改mainfest.json中应用版本号，或者删除旧版本后重新运行安装）

参数

options配置可参考

方法

|方法名|参数|说明｜ |play|无参|播放方法｜ |pause|无参|暂停方法｜ |stop|无参|停止方法｜ |setupAspectRatio|string|设置宽高比(如"16:9")|

mediaPlayerStateChanged方法回调说明

state说明

mediaPlayerTimeChanged方法回调说明

mediaPlayerVideoSizeChanged方法回调说明

uniappx用法

组件引入

<vlc-video 
ref="video"
class="video"
:options="vlcOptions"
url="rtsp://xxxxx"
aspectRatio="16:9"
@mediaPlayerStateChanged="mediaPlayerStateChanged"
@mediaPlayerTimeChanged="mediaPlayerTimeChanged"
@mediaPlayerVideoSizeChanged="mediaPlayerVideoSizeChanged"
></vlc-video>

类型导入

import { StateInfoType, TimeInfoType, VideoSizeType } from '@/uni_modules/yzc-vlckit';

选项时API

export default {
    data() {
        return {
            videoElement: null as VlcVideoElement | null
        }
    },
    onLoad() {
    },
    methods: {
         btnClick() {
             if (this.videoElement == null) {
                 this.videoElement = this.$refs['video'] as VlcVideoElement
             }
             this.videoElement?.play()
             // this.videoElement?.pause()
             // this.videoElement?.stop()
         },
         // 状态改变回调方法
         mediaPlayerStateChanged(res: StateInfoType) {
            console.log('video: state', res.state)
         },
         // 时间改变回调方法
         mediaPlayerTimeChanged(res: TimeInfoType) {
            console.log('video: time', res.time) 
         },
         // 获取到真实视频的宽高
         mediaPlayerVideoSizeChanged(res: VideoSizeType) {
            console.log('video: Size', res.videoWidth, res.videoHeight)
         }
    }
}

组合式API

const video = ref(null)
const btnClick = (() => {
    (video.value as VlcVideoElement).play()
    // (video.value as VlcVideoElement).pause()
    // (video.value as VlcVideoElement).stop()
})
// 状态改变回调方法
const mediaPlayerStateChanged = ((res: StateInfoType) => {
    console.log('video: state', res.state)
})
// 时间改变回调方法
const mediaPlayerTimeChanged = ((res: TimeInfoType) => {
    console.log('video: time', res.time)
})
// 获取到真实视频的宽高
const mediaPlayerVideoSizeChanged = ((res: VideoSizeType) => {
    console.log('video: Size', res.videoWidth, res.videoHeight)
})

uniapp用法（注意必须在nvue中使用）

export default {
    data() {
        return {
        }
    },
    onLoad() {
    },
    methods: {
         btnClick() {
             this.$refs['video'].play()
             // this.$refs['video'].pause()
             // this.$refs['video'].stop()
         },
         // 状态改变回调方法
         mediaPlayerStateChanged(res) {
            console.log('video: state', res.detail.state)
         },
         // 时间改变回调方法
         mediaPlayerTimeChanged(res) {
            console.log('video: time', res.detail.time) 
         },
         // 获取到真实视频的宽高
         mediaPlayerVideoSizeChanged(res) {
            console.log('video: Size', res.detail.videoWidth, res.detail.videoHeight)
         }
    }
}