SOURCE

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

var videoNode1 = editor.video("https://sf1-ttcdn-tos.pstatp.com/obj/ttfe/video_editor/example1.mp4");
videoNode1.timelineStart(0);
videoNode1.timelineStop(8);
var imageNode1 = editor.image("https://sf1-ttcdn-tos.pstatp.com/obj/ttfe/video_editor/example.png", {
        width: 100,
        height: 100,
        top: 0, 
        left: 100
    });
imageNode1.timelineStart(0);
imageNode1.timelineStop(8);

var videoNode2 = editor.video("https://sf1-ttcdn-tos.pstatp.com/obj/ttfe/video_editor/example2.mp4")
videoNode2.timelineStart(6);
videoNode2.timelineStop(20);

var compositingNode = editor.compositing();
var transitionNode1 = editor.transition(Editor.DEFINITIONS.WINDOWSLICE);
var transitionNode2 = editor.transition(Editor.DEFINITIONS.BURN);
var transitionNode3 = editor.transition(Editor.DEFINITIONS.SIMPLE_ZOOM);


imageNode1.connect(compositingNode);
videoNode1.connect(compositingNode);

compositingNode.connect(transitionNode1);
videoNode2.connect(transitionNode1);

transitionNode1.connect(editor.output);
transitionNode1.transition(6,8,0.0,1.0);

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

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);

  var transition1Button = document.getElementById('transition1-button');
  var transition2Button = document.getElementById('transition2-button');
  var ratationButton = document.getElementById('ratation-button');

  transition1Button.onclick = function() {
    reConnect(transitionNode1);
  };
  transition2Button.onclick = function() {
    reConnect(transitionNode2);
  };
  ratationButton.onclick = function() {
    editor.isRotation = !editor.isRotation;
  };
}

function reConnect(transitionNode) {
  videoNode2.disconnect();
  compositingNode.disconnect();
  transitionNode1.disconnect();
  transitionNode2.disconnect();
  transitionNode3.disconnect();
  compositingNode.connect(transitionNode);
  videoNode2.connect(transitionNode);
  transitionNode.connect(editor.output);
  editor.currentTime = 0;
  transitionNode.transition(6,8,0.0,1.0);
}

<canvas width="640" height="360" id="canvas"></canvas>
<p>
  <button id="play-button">play</button>
  <button id="pause-button">pause</button>
  <button id="transition1-button">WINDOWSLICE</button>
  <button id="transition2-button">BURN</button>
  <button id="ratation-button">横竖切换</button>
</p>
<p id="currentTime"></p>
<p>
    <canvas id="timeline-canvas" width="640", height="20"></canvas>
</p>

html {
  font-family: monospace;
  color: #333;
}
#current {
  font-size: 12px;
}
#canvas {
  width: 640px;
  height: 360px;
}

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;
}