视频播放器 layui-ckplayer

这是一个基于ckplayer X2版本封装的layui扩展组件,解决了原有组件larryms长时间未更新及无法自定义设置的问题。通过新增baseUrl属性指定配置json路径,并提供lib包方便集成。

layui-ckplayer

介绍

基于ckplayer视频播放器封装的,适用于layui的扩展组件
ckplayer版本: X2
原插件 ckplayer 视频播放组件/larryms已经很久没有更新,且无法自定义设置,因此自己封装一份

使用说明

码云下载地址:https://gitee.com/TimVanX/layui-ckplayer
示例图片

//定义一个变量:videoObject,用来做为视频初始化配置
                var videoObject = {
                    container: '#video', //视频播放器所在div
                    variable: 'player',
                    video: videoUrl, //视频的url地址
                    baseUrl: baseUrl //请求配置json所在目录,默认指向ckplayer下
                };
                var player = new ckplayer(videoObject);//初始化播放器

1.新增 baseUrl 属性,作为默认的请求配置json路径
2.lib包里的ckplayer文件夹是源码文件,拖放至项目中即可使用
3.example里有示例页面可供参考

详细文档

请参考ckplayer和layui的文档
ckplayer文档
layui插件文档

致谢/参考
  1. ckplayer 视频播放组件/larryms
### Layui 图标类 `icon` 和动画效果解析 #### 加载图标及其动画属性 为了实现加载图标的动态显示,可以利用 Layui 提供的特定 CSS 类来创建旋转动画效果。具体来说: - **基础图标类**:通过 `<i>` 标签定义图标,并应用相应的图标样式类名,如 `layui-icon-loading` 表示加载状态下的图标[^1]。 - **动画控制类**: - `layui-anim`: 启用动画效果。 - `layui-anim-rotate`: 设置顺时针方向上的无限循环旋转动作。 - `layui-anim-loop`: 确保动画持续不断重复执行直到手动停止或页面刷新为止。 因此,完整的 HTML 结构如下所示,用于展示一个正在加载中的圆形箭头图标并使其保持自旋运动: ```html <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i> ``` 此代码片段会呈现一个小巧而优雅的旋转图标,在用户等待后台处理完成期间提供视觉反馈。 #### 笑脸图标的应用实例 对于希望让某个静态表情符号也具备类似的转动特性,则只需按照相同的方式为其附加必要的动画指令即可达成目标。例如要使笑脸图标 (`layui-icon-face-smile`) 发生连续性的圆周位移变化,可参照下面这段示范性源码编写方式[^3]: ```html <i class="layui-anim-loop"></i> ``` 上述做法同样适用于其他任何支持此类扩展特性的图形元素之上,只要确保所使用的额外修饰符不会与其他现有规则发生冲突便可正常运作。 ---
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值