react自定义video视频播放样式(鼠标移入播放,移出停止)
video标签默认视频播放样式：
文章图片
更改后的播放效果：
代码：
const [playStatus, setPlayStatus] = useState(new Array(4));
// 视频的播放状态，用于控住播放按钮的显示与隐藏const videos = () => {
const ref: (HTMLVideoElement | null)[] = [];
return (
// videosConfig存储一组视频的url
{videosConfig.map((e, i) => (
);
【react自定义video视频播放样式(鼠标移入播放,移出停止)】Play组件：
const Index = () => (
<>
);
export default Index;
样式代码： 使播放按钮居中
.video-item {
position: relative;
}
svg {
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}推荐阅读
- SpringBoot调用公共模块的自定义注解失效的解决
- python自定义封装带颜色的logging模块
- 列出所有自定义的function和view
- react|react 安装
- Spring|Spring Boot 自动配置的原理、核心注解以及利用自动配置实现了自定义 Starter 组件
- 自定义MyAdapter
- React.js学习笔记(17)|React.js学习笔记(17) Mobx
- Android自定义view实现圆环进度条效果
- React.js的表单(六)
- 【React|【React Native填坑之旅】从源码角度看JavaModule注册及重载陷阱