rrweb实现用户对网页操作过程录制及回放功能代码-html代码-BFW代码库

rrweb实现用户对网页操作过程录制及回放功能代码

代码语言：html

所属分类：其他

代码描述：rrweb实现用户对网页操作过程录制及回放功能代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/rrweb.min.css">
        <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/rrweb-player.css">
    <style>
        #playIfrm {
          height: 400px;
          border: 1px solid;
        }
    </style>



</head>

<body>
    <button id="btnRecord">Record</button>
    <button id="btnPlay">Play</button>
        <button id="btnSave">Save</button>
    
    <form>
        <div>
            <label>名称</label>
            <input type="text">
        </div>
        <div>
            <label>年龄</label>
            <input type="number">
        </div>
        <div>
            <label>类型</label>
            <select>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
        </div>
        <div>
            <label>文件</label>
            <input type="file" />
        </div>
    </form>
    <div id="playIfrm"></div>
    <div id="playIfrm2"></div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/rrweb.min.js"></script>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/rrweb-player.js"></script>
    <script>
        let timer,currentTime = 0,replayer,playState = 0;
        const loopTimer = () => {
          stopTimer();
          function update() {
            const meta = replayer.getMetaData();debugger;
            currentTime = replayer.getCurrentTime();
            if (currentTime < meta.totalTime) {
              timer = requestAnimationFrame(update);
            }
          }
          timer = requestAnimationFrame(update);
        };
        const stopTimer = () => {
          if (timer) {
            cancelAnimationFrame(timer);
            currentTime = 0;
            timer = null;
          }
        };
        const recordBtn = document.getElementById('btnRecord');
        
          const savedBtn = document.getElementById('bt.........完整代码请登录后点击上方下载按钮下载查看