更新记录

1.0.9（2025-03-29）

优化细节

1.0.8（2025-03-28）

优化细节

1.0.7（2025-03-27）

优化细节

平台兼容性

yzc-vlckit 兼容安卓、iOS端VLC播放器，支持rtsp、rtmp流播放

uniappx用法

参数

options配置可参考

方法

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

组件引入

复制代码<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/utssdk/interface.uts';

选项时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用法

复制代码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)
         }
    }
}

mediaPlayerStateChanged方法回调说明

state说明

mediaPlayerTimeChanged方法回调说明

time说明 返回为ms的整数类型

mediaPlayerVideoSizeChanged方法回调说明