更新记录

0.0.1（2024-12-13）

初版发布

平台兼容性

Vue2 Vue3
× √
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-uvue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序 鸿蒙元服务
× × × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

cx-videoview

本组件以插槽的方式预留了一定的扩展能力，可以在全屏下的右上角、左下角、右下角添加组件以满足更多场景的功能需要

注意

1、基于官方video组件封装的，所以打包时注意video模块是否在内

2、iOS设备暂时未测试

3、弹幕功能由于官方组件本身的弹幕功能以及提供的API有限，UI上暂未提供弹幕功能，但仍可以在组件设置中使用

4、此组件为本人项目所用，功能并不一定符合所有场景，购买前请谨慎考虑

5、还有更多的功能等待后续慢慢完善

属性

名称 类型 描述
srcList Array 格式：[{"title":"","src":""}]
srcIndex number 要播放的视频的srcList下标
title string 标题前缀，组件上显示为title和集数标题的组合
autoPlay boolean 自动播放
enableDanmu boolean 是否展示弹幕，只在初始化时有效，不能动态变更
danmuList Array 弹幕列表
@play (event: UniEvent) => void 当开始/继续播放时触发
@pause (event: UniEvent) => void 当暂停播放时触发
@ended (event: UniEvent) => void 当播放到视频末尾时触发
@timeupdate (event: UniVideoTimeUpdateEvent) => void 播放进度变化时触发，event.detail = { currentTime, duration }。触发频率 250ms 一次
@fullscreenchange (event: UniVideoFullScreenChangeEvent) => void 当视频进入和退出全屏时触发，event.detail = { fullScreen, direction }，direction取为 vertical 或 horizontal
@waiting (event: UniEvent) => void 视频出现缓冲时触发
@error (event: UniVideoErrorEvent) => void 播放出错时触发
@progress (event: UniVideoProgressEvent) => void 加载进度变化时触发，只支持一段加载。event.detail = { buffered }，百分比
@fullscreenclick (event: UniVideoFullScreenClickEvent) => void 视频全屏播放时点击屏幕触发。event.detail = { screenX, screenY, screenWidth, screenHeight }
@controlshow (event: boolean) => void 切换 controls 显示隐藏时触发
@currentplay (event: number) => void 切换集数触发

！！！注意：当srcList只传入1个视频资源时，播放下一集和选集功能自动隐藏

playVideo()

播放视频

pauseVideo()

暂停视频

stopVideo()

停止视频

seekVideo(position : number)

跳转

sendDanmu(danmu : Danmu)

发送弹幕

playbackRate(rate : number)

倍速

requestFullScreen(direction ?: RequestFullScreenOptions | null)

全屏

exitFullScreen()

退出全屏

！！使用方法举例 ： (this.$refs["cx"] as CxVideoComponentPublicInstance).pauseVideo()

以上和官方组件对齐，使用方法相同 官方文档

扩展插槽

top

右上角

bottom-left

左下角

bottom-right

右下角

<cx-videoview class="cxVideo" ref="cx" :srcList='srcList' :srcIndex="0" :title="'video组件'">
    <template #top>

        <image class="icon-btn" src="../../static/xxx.png" @click.stop=""></image>
        <image class="icon-btn" src="../../static/xxx.png" @click.stop=""></image>

    </template>

    <template #bottom-left>

        <image class="icon-btn" src="../../static/xxx.png" @click.stop=""></image>

    </template>

    <template #bottom-right>

        <image class="icon-btn" src="../../static/xxx.png" @click.stop=""></image>

    </template>
</cx-videoview>

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

评论列表 撰写评论 向官方投诉
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...