【源码】基于 React 框架的 DOM 视频展示卡片插件

项目简介

这是一款基于 React 框架的 DOM 视频展示卡片插件。用户能够配置起点和终点，定制展示区域，实现 DOM 视频展示卡片信息功能。该插件将视频播放和数据动画展示分离，提供灵活的动画配置和自定义 DOM 展示。

项目的主要特性和功能

1. 组件分离：<AnimationControl/> 组件把原组件的视频播放和数据动画展示分开，分为 <AnimationWrapper.VideoBg/> 和 <control/>，提升代码可维护性。
2. 动画增强：通过高阶组件 control 和 <AnimationShow /> 组件增强原组件，增添动画渲染特性。
3. 时间节点处理：AnimationControl 组件处理传入数据和从 <AnimationControl.VideoBg /> 获取的时间节点，将处理后的数据和配置传入高阶组件。
4. 灵活配置：可借助 serializeData 参数配置动画在相应时间节点的展示，涵盖起点、终点、展示类型、透明度、宽度、高度和展示时长等。
5. 自定义 DOM：使用 serializeDom 函数依据当前时间返回不同的 DOM 结构，实现动画与内容的灵活结合。
6. 自动循环播放：视频默认开启自动无限循环播放功能。

安装使用步骤

安装

bash npm i media-show-card -S

引入组件

javascript import MediaCardShow from 'media-show-card'

使用组件

在组件中使用 <MediaCardShow /> 并传入相应参数： javascript <MediaCardShow src={videoSrc} serializeData={serializeData} serializeDom={this.serializeDom} />

参数说明

• src：视频源，类型为字符串。
• serializeData：动画在相应时间节点展示的相关配置，类型为对象。示例如下： javascript serializeData: [ { showSecond: 1, data: [ { startPoint: { x: 450, y: 300 }, endPoint: { x: 600, y: 430 }, frameType: "lucent", transparentDown: false, frameWidth: 500, frameHeight: 200, timeout: 3800 } ] } ]
• serializeDom：动画在相应时间节点展示的 DOM，类型为函数。示例如下： javascript serializeDom = currentTime => { switch (currentTime) { case 0: return ( <div> <div style={{ fontSize: "50px", color: 'red' }}>传递的组件1</div> </div> ); } }

注意事项

1. 每个动画的配置和 DOM 的数量、结构要对应。
2. 一个时间节点有多个动画时，DOM 的结构要同级（除第一层 DOM 外，其他不要出现父子结构）。
3. 默认在不传动画展示 DOM 情况下，不显示整个动画过程及 DOM。
4. 使用 AnimationControl 组件时，确保 serializeData 有值。推荐写法： javascript {this.state.serializeData.length !== 0 && ( <AnimationControl src={video1} serializeData={serializeData} serializeDom={this.getDom} /> )}

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】