SOURCE

canvas = document.getElementById('canvas');
    editor = new Editor(canvas);
    hasEffect = false;

    gifNode1 = editor.gif("https://sf1-ttcdn-tos.pstatp.com/obj/ttfe/video_editor/gif/cat2.gif", {
        width: 150,
        height: 150,
        top: 100, 
        left: 400
    });
    gifNode2 = editor.gif("https://p3-dy.bytecdn.cn/obj/joker/weshine/5f516e67ab98cd393682ac7b3e798cfc.gif", {
        width: 100,
        height: 100,
        top: 50, 
        left: 100
    });
    videoNode = editor.video("https://sf3-ttcdn-tos.pstatp.com/obj/ttfe/video_editor/example2.mp4");

    gifNode1.timelineStart(0);
    gifNode1.timelineStop(8);
    gifNode2.timelineStart(0);
    gifNode2.timelineStop(10);

    videoNode.timelineStart(0);
    videoNode.timelineStop(10);

    var effectNode = editor.effect(Editor.DEFINITIONS.MONOCHROME);
    videoNode.connect(editor.output);
    gifNode1.connect(editor.output);
    gifNode2.connect(editor.output);

    playButton.onclick = editor.play.bind(editor);
    pauseButton.onclick = editor.pause.bind(editor);
    replayButton.onclick = function() {
      editor.currentTime = 0;
      editor.play();
    }

    let wrapper = document.getElementById('wrapper');
    let interactiveBox = editor.initInteractiveBox(wrapper);

    gifNode1.on('drag', (res) => {
        imageInfo.innerHTML = `图片1drag中，left:${res.left}, top:${res.top}`;
    })
    gifNode1.on('resize',(res) => {
        imageInfo.innerHTML = `图片1resize中，left:${res.left}, top:${res.top}, width:${res.width}, height:${res.height}`;
    })
    gifNode1.on('rotate',(res) => {
        imageInfo.innerHTML = `图片1rotate中，degree: ${res.degree}, angle:${res.angle}`;
    })
    gifNode2.on('drag', (res) => {
        imageInfo.innerHTML = `图片2drag中，left:${res.left}, top:${res.top}`;
    })
    gifNode2.on('resize',(res) => {
        imageInfo.innerHTML = `图片2resize中，left:${res.left}, top:${res.top}, width:${res.width}, height:${res.height}`;
    })
    gifNode2.on('rotate',(res) => {
        imageInfo.innerHTML = `图片2rotate中，degree: ${res.degree}, angle:${res.angle}`;
    })

    editImage1.onclick = function() {
        editor.editNode(gifNode1);
    }
     editImage2.onclick = function() {
        editor.editNode(gifNode2);
    }
    editComplete.onclick = function() {
        editor.editNode(null);
    }

    InitVisualisations(editor, 'timeline-canvas', 'current')

    window.editor = editor;

<div class="wrapper" id="wrapper">
        <canvas width="640" height="360" id="canvas"></canvas>
    </div>
    <p>
      <button id="playButton">play</button>
      <button id="pauseButton">pause</button>
      <button id="replayButton">replay</button>
      <button id="editImage1">编辑图片1</button>
      <button id="editImage2">编辑图片2</button>
      <button id="editComplete">编辑完成</button>
    </p>
    <div class="box">
        gif：<span id="imageInfo"></span>
    </div>
    <p id="current">
    
    </p>
    <p>
        <canvas id="timeline-canvas" width="640", height="20"></canvas>
    </p>

html {
  font-family: monospace;
  color: #333;
}
.wrapper {
        position: relative;
        width: 640px;
        height: 360px;
        overflow: hidden;
    }
#canvas {
  width: 640px;
  height: 360px;
}
#current {
  font-size: 12px;
}
input {
  width: 50px;
}
button {
  line-height: 1.499;
  position: relative;
  display: inline-block;
  font-weight: 400;
  white-space: nowrap;
  text-align: center;
  background-image: none;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  height: 32px;
  padding: 0 15px;
  font-size: 14px;
  border-radius: 4px;
  color: rgba(0,0,0,0.65);
  background-color: #fff;
  border-color: #d9d9d9;
  outline: 0;
  transition: all .3s cubic-bezier(.645, .045, .355, 1);
}

button:hover {
  color: #40a9ff;
  background-color: #fff;
  border-color: #40a9ff;
}

.button:active {
  color: #096dd9;
  background-color: #fff;
  border-color: #096dd9;
}
input {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 32px;
  line-height: 32px;
  outline: none;
  padding: 0 8px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 50px;
}