SOURCE

console 命令行工具 X clear

                    
>
console
function start() {
    let events = [];

    rrweb.record({
        emit(event) {
            if (events.length > 10) {
                play(events);
                // 当事件数量大于 10 时停止录制
                return;
            } else {
                console.log(event);
                // 将 event 存入 events 数组中
                events.push(event);
            }
        },
    });
}

function play(events) {
    const replayer = new rrweb.Replayer(events);
    // i = 0;
    // setTimeout(() => {
    //     console.log(i++)
    //     replayer.play();
    // }, 1000);
}
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

	<div class="box" onclick="start()">
		<span>我是按钮</span>
    </div>


    <iframe class="playerBox" id="playerBox">

    </iframe> 


</body>

</html>
.box{
    border-radius: 15px;
    height: 30px;
    width: 70px;
    border: solid 1px #cccccc;
    background: #cc2ccc;
    text-align: center;
    line-height: 30px;
    color: #ffffff;
    transition-delay: 2s;
}
.box:hover {
    cursor: pointer;
    animation: open 1s linear forwards alternate;
}

@keyframes open {
    from {
        width: 70px;
        background: rgb(3, 194, 241);
    }

    to {
        width: 100px;
        background: rgb(46, 252, 217);
    }
}
.playerBox{
    width: 1024px;
    height: 576px;
    border: solid 1px #cccccc;
    margin-top: 20px;
    background: #0c1c0c;
    opacity: 0.2;
}

本项目引用的自定义外部资源