SOURCE

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

  var videoNode = editor.video("//sf1-ttcdn-tos.pstatp.com/obj/ttfe/video_editor/alphaheart.mp4");
  videoNode.timelineStart(0);
  videoNode.timelineStop(5);
  var effectnNode = editor.effect(Editor.DEFINITIONS.ALPHAVIDEO);
  var flag = false;
  videoNode.connect(editor.output);

  var imageNode = editor.image("//sf1-ttcdn-tos.pstatp.com/obj/ttfe/video_editor/16v9.jpg");
  imageNode.timelineStart(0);
  imageNode.timelineStop(5);
  imageNode.connect(editor.output);

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

  function initButton() {
    var playButton = document.getElementById('play-button');
    var pauseButton = document.getElementById('pause-button');
    var replayButton = document.getElementById('replay-button');
    var filter1Button = document.getElementById('filter1-button');
    
    playButton.onclick = editor.play.bind(editor);
    pauseButton.onclick = editor.pause.bind(editor);
    replayButton.onclick = function() {
      editor.currentTime = 0;
      editor.play();
    }
    filter1Button.onclick = function() {
      flag = !flag;
      if(flag) {
        videoNode.disconnect();
        videoNode.connect(effectnNode);
        effectnNode.connect(editor.output);
      } else {
        videoNode.disconnect();
        effectnNode.disconnect();
      }
    }
  }

<canvas width="640" height="360" id="canvas"></canvas>
  <p>
    <button id="play-button">play</button>
    <button id="pause-button">pause</button>
    <button id="replay-button">replay</button>
    <button id="filter1-button">透明视频贴图</button>
  </p>
  <p id="current"></p>
  <p>
      <canvas id="timeline-canvas" width="640", height="10"></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 {
  -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;
}