更新记录

1.0.0（2025-06-17）

ijkplayer低延迟拉流初始版本

平台兼容性

云端兼容性

uni-app(4.26)

uni-app x(4.26)

yzc-ijkplayer 低延迟IJKPlayer播放器，支持rtsp、rtmp、flv、m3u8等流播放（需要打自定义基座，请测试没问题再购买）

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

参数

方法

|方法名|参数|说明｜ |play|无参|播放方法｜ |pause|无参|暂停方法｜ |captureVideoImage|无参|截屏方法｜

loadStateChanged方法回调说明

state说明

videoSizeChanged方法回调说明

captureVideoImageChanged方法回调说明

playbackDidFinishStateChanged方法回调说明

state说明

uniappx用法

组件引入

<yzc-ijkvideo
class="ijkvideo"
ref="ijkvideo"
:url="url"
:muted="muted"
:scalingMode="scalingMode"
:captureVideoImageBase64="true"
@videoSizeChanged="videoSizeChanged"
@captureVideoImageChanged="captureVideoImageChanged"
@loadStateChanged="loadStateChanged"
@playbackDidFinishStateChanged="playbackDidFinishStateChanged"
>
</yzc-ijkvideo>

类型导入

import { VideoSizeType, CaptureVideoImageType, LoadStateType, PlayBackDidFinishStateType } from '@/uni_modules/yzc-ijkplayer'

选项时API

export default {
    data() {
        return {
            videoElement: null as YzcIjkvideoElement | null,
            muted: false,
            url: '',
            scalingMode: 'aspectFit'
        }
    },
    methods: {
        mutedClick() {
            this.muted = !this.muted
        },
        captureVideoImageClick() {
            if (this.$refs['ijkvideo'] != null) {
                this.videoElement = this.$refs['ijkvideo'] as YzcIjkvideoElement
            }
            this.videoElement?.captureVideoImage()
        },
        videoSizeChanged(res: VideoSizeType) {
            console.log('videoSizeChanged', res.videoWidth, res.videoHeight)
        },
        captureVideoImageChanged(res: CaptureVideoImageType) {
            console.log('captureVideoImageChanged', res)
        },
        loadStateChanged(res: LoadStateType) {
            console.log('loadStateChanged', res.state)
        },
        playbackDidFinishStateChanged(res: PlayBackDidFinishStateType) {
            console.log('playbackDidFinishStateChanged', res.state)
        },
        playBtnClick() {
            if (this.$refs['ijkvideo'] != null) {
                this.videoElement = this.$refs['ijkvideo'] as YzcIjkvideoElement
            }
            this.videoElement?.play()
        }
    }
}

组合式API

const ijkvideo = ref(null)
const url = ref('')
const muted = ref(false)
const mutedClick = (() => {
      muted.value = !muted.value
})
const captureVideoImageClick = (() => {
     (ijkvideo.value as YzcIjkvideoElement).captureVideoImage()
})
const videoSizeChanged = ((res: VideoSizeType) => {
     console.log('videoSizeChanged', res.videoWidth, res.videoHeight)
})
const captureVideoImageChanged = ((res: CaptureVideoImageType) => {
     console.log('captureVideoImageChanged', res)
})
const loadStateChanged = ((res: LoadStateType) => {
     console.log('loadStateChanged', res.state)
})
const playbackDidFinishStateChanged = ((res: PlayBackDidFinishStateType) => {
     console.log('playbackDidFinishStateChanged', res.state)
})

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

组件引入

<yzc-ijkvideo
class="ijkvideo"
ref="ijkvideo"
:url="url"
:muted="muted"
:scalingMode="scalingMode"
:captureVideoImageBase64="true"
@videoSizeChanged="videoSizeChanged"
@captureVideoImageChanged="captureVideoImageChanged"
@loadStateChanged="loadStateChanged"
@playbackDidFinishStateChanged="playbackDidFinishStateChanged"
>
</yzc-ijkvideo>

export default {
    data() {
        return {
            muted: false,
            url: '',
            scalingMode: 'aspectFit'
        }
    },
    methods: {
        mutedClick() {
            this.muted = !this.muted
        },
        captureVideoImageClick() {
            this.$refs['ijkvideo'].captureVideoImage()
        },
        videoSizeChanged(res) {
            console.log('videoSizeChanged', res.detail.videoWidth, res.detail.videoHeight)
        },
        captureVideoImageChanged(res) {
            if (res.detail.success) {
                const base64Str = `data:image/png;base64,${res.detail.base64Str}`
                console.log('captureVideoImageChanged', base64Str)
            }
        },
        loadStateChanged(res) {
            console.log('loadStateChanged', res.detail.state)
        },
        playbackDidFinishStateChanged(res) {
            console.log('playbackDidFinishStateChanged', res.detail.state)
        },
        playBtnClick() {
            this.$refs['ijkvideo'].play()
        }
    }
}