SOURCE

var canvas = document.getElementById('canvas');
var editor = new Editor(canvas);
var backgroundNode = editor.image("http://sf1-ttcdn-tos.pstatp.com/obj/ttfe/video_editor/bg.jpg");
backgroundNode.timelineStart(0);
backgroundNode.timelineStop(20);
backgroundNode.connect(editor.output);

var videoNode2 = editor.video("http://sf1-ttcdn-tos.pstatp.com/obj/ttfe/video_editor/example2.mp4",{
    width: 332,
    height: 202,
    left: 202,
    top: 70
})
videoNode2.timelineStart(2);
videoNode2.timelineStop(18);
videoNode2.connect(editor.output);

console.log(editor.toObject());

initButton();
InitVisualisations(editor, 'timeline-canvas', 'currentTime');

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


function setEnterAnimation() {
  let operations = [];
  if(enterTranslate.checked) { operations.push('translate'); }
  if(enterOpacity.checked) { operations.push('opacity'); }
  if(enterScale.checked) { operations.push('scale'); }
  videoNode2.enterAnimation({
    operations: operations,
    duration: parseFloat(enterDuration.value),
    direction: enterDirection.value,
    opacity: parseFloat(enterOpacityValue.value),
    scaleX: parseFloat(enterScaleValue.value),
    scaleY: parseFloat(enterScaleValue.value)
  });
}
function setLeaveAnimation() {
  let operations = [];
  if(leaveTranslate.checked) { operations.push('translate'); }
  if(leaveOpacity.checked) { operations.push('opacity'); }
  if(leaveScale.checked) { operations.push('scale'); }
  videoNode2.leaveAnimation({
    operations: operations,
    duration: parseFloat(leaveDuration.value),
    direction: leaveDirection.value,
    opacity: parseFloat(leaveOpacityValue.value),
    scaleX: parseFloat(leaveScaleValue.value),
    scaleY: parseFloat(leaveScaleValue.value)
  });
}
function setAnimation() {
    // videoNode2.setSourceOffset(parseFloat(offset1.value));
    videoNode2.timelineStart(parseFloat(start1.value));
    videoNode2.timelineStop(parseFloat(stop1.value));
    setEnterAnimation();
    setLeaveAnimation();
  }
function initButton() {
  var playButton = document.getElementById('play-button');
  var pauseButton = document.getElementById('pause-button');
  playButton.onclick = editor.play.bind(editor);
  pauseButton.onclick = editor.pause.bind(editor);
  editComplete.onclick = function() {
    editor.editNode(null);
  }

  recordButton.onclick = function() {
    editor.record({
      time: 5,
      frameRate: 20,
      completeCallback: (output) => {
        console.log(output);
        const link = document.createElement('a');
          link.href = window.URL.createObjectURL(output);
          link.download = 'editorSDKEncoder';
          link.click();
      }
    });
  }
  changeButton.onclick = setAnimation;
}
setAnimation();

<style>
    .wrapper {
        position: relative;
        width: 640px;
        height: 360px;
        overflow: hidden;
    }
</style>    
<div class="wrapper" id="wrapper">
        <canvas width="640" height="360" id="canvas"></canvas>
    </div>
  <p>
    <button id="play-button">play</button>
    <button id="pause-button">pause</button>
    <button id="editComplete">编辑完成</button>
    <button id="recordButton">record</button>
    <p class="box">
      视频 sourceOffset：<input type="text" value="0" id="offset1"> timelineStart：<input type="text" value="2" id="start1"> timelineStop：<input type="text" value="18" id="stop1"> <br>
    </p>
    <p class="box">
      进入动画： 动画时长 <input type="text" value="1000" id="enterDuration">
      <p class="box">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        移入<input id="enterTranslate" type="checkbox" checked value="translate"/>   
        初始方向：
        <select id="enterDirection">
          <option value="left" selected>left</option>
          <option value="top">top</option>
          <option value="right">right</option>
          <option value="bottom">bottom</option>
          <option value="topLeft">topLeft</option>
          <option value="topRight">topRight</option>
          <option value="bottomLeft">bottomLeft</option>
          <option value="bottomRight">bottomRight</option>
        </select> 
      </p>
      <p class="box">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        渐变<input id="enterOpacity" type="checkbox" value="opacity"/>
        初始透明度 <input type="text" value="1" id="enterOpacityValue"> 
      </p>
      <p class="box">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        缩放<input id="enterScale" type="checkbox" value="opacity"/>
        初始缩放 <input type="text" value="1" id="enterScaleValue"> 
      </p>
    </p>
    
    <p class="box">
      离开动画： 动画时长 <input type="text" value="1000" id="leaveDuration"> 
      <p class="box">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        移出<input id="leaveTranslate" type="checkbox"  checked value="translate"/>   
        最终方向：
        <select id="leaveDirection">
          <option value="left" selected>left</option>
          <option value="top">top</option>
          <option value="right" selected>right</option>
          <option value="bottom">bottom</option>
          <option value="topLeft">topLeft</option>
          <option value="topRight">topRight</option>
          <option value="bottomLeft">bottomLeft</option>
          <option value="bottomRight">bottomRight</option>
        </select> 
      </p>
      <p class="box">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        渐变<input id="leaveOpacity" type="checkbox" value="opacity"/>
        最终透明度 <input type="text" value="1" id="leaveOpacityValue"> 
      </p>
      <p class="box">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        缩放<input id="leaveScale" type="checkbox" value="scale"/>
        最终缩放 <input type="text" value="1" id="leaveScaleValue"> 
      </p>
    </p>
    <p> 说明：时长单位为毫秒，透明度取值0～1之间 </p>
    <p>
        <button id="changeButton">change</button>
    </p>
  </p>
  <p id="currentTime"></p>
  <p>
      <canvas id="timeline-canvas" width="640", height="20"></canvas>
  </p>

html {
  font-family: monospace;
  color: #333;
}
#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[type='text'] {
  -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: 55px;
}