SOURCE

canvas = document.getElementById('canvas');
editor = new Editor(canvas);
videoNode1 = editor.video("https://cdn.jsdelivr.net/gh/shanyutongxue/cdnCache/example1.mp4");
videoNode2 = editor.video("https://cdn.jsdelivr.net/gh/shanyutongxue/cdnCache/example1.mp4");

function setVideoTimeline() {
  videoNode1.setSourceOffset(parseFloat(offset1.value));
  videoNode1.timelineStart(parseFloat(start1.value));
  videoNode1.timelineStop(parseFloat(stop1.value));
  videoNode2.setSourceOffset(parseFloat(offset2.value));
  videoNode2.timelineStart(parseFloat(start2.value));
  videoNode2.timelineStop(parseFloat(stop2.value));
  editor.currentTime = 0;
}  

videoNode1.connect(editor.output);
videoNode2.connect(editor.output);  
setVideoTimeline();

playButton.onclick = editor.play.bind(editor);
pauseButton.onclick = editor.pause.bind(editor);
changeButton.onclick = function() {
  videoNode1.disconnect(editor.output);
};
rotationButton.onclick = function() {
  editor.isRotation = !editor.isRotation;
}

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

<canvas width="640" height="360" id="canvas"></canvas>
<p>
  <button id="playButton">play</button>
  <button id="pauseButton">pause</button>
  <button id="rotationButton">横竖屏切换</button>
</p>
<p class="box">
    视频1 
    sourceOffset：<input type="text" value="0" id="offset1"> 
    timelineStart：<input type="text" value="0" id="start1"> 
    timelineStop：<input type="text" value="10" id="stop1"> 
</p>
  <p class="box">
    视频2 
    sourceOffset：<input type="text" value="10" id="offset2"> 
  timelineStart：<input type="text" value="10" id="start2"> 
  timelineStop：<input type="text" value="20" id="stop2">
</p>
<p>        
  <button id="changeButton">trigger disconnect</button>
</p>
<p id="current"></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 {
  -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;
}