SOURCE

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

  var videoNode = editor.video("https://cdn.jsdelivr.net/gh/shanyutongxue/cdnCache/example2.mp4");
  videoNode.timelineStart(0);
  videoNode.timelineStop(20);
  //HORIZONTALBLUR,VERTICALBLUR,GAUSSIANBLUR
  var effectNode = editor.effect(Editor.DEFINITIONS.MONOCHROME);
  var effectNode2 = editor.effect(Editor.DEFINITIONS.GAUSSIANBLUR());
  var effectNode3 = editor.effect(Editor.DEFINITIONS.GAUSSIANBLUR(true));

  videoNode.connect(editor.output);
  effectNode.connect(editor.output);
  effectNode2.connect(effectNode3);
  effectNode3.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');
    var filter2Button = document.getElementById('filter2-button');
    var clearButton = document.getElementById('clear-button');
    var ratationButton = document.getElementById('ratation-button');
    
    playButton.onclick = editor.play.bind(editor);
    pauseButton.onclick = editor.pause.bind(editor);
    replayButton.onclick = function() {
      editor.currentTime = 0;
      editor.play();
    }
    filter1Button.onclick = function() {
      videoNode.disconnect();
      videoNode.connect(effectNode);
    }
    filter2Button.onclick = function() {
      videoNode.disconnect();
      videoNode.connect(effectNode2);
    }
    clearButton.onclick = function() {
      videoNode.disconnect();
			videoNode.connect(editor.output);
    }
    ratationButton.onclick = function() {
      editor.isRotation = !editor.isRotation;
      editor.isBlurBackground = !editor.isBlurBackground;
    }
  }

<canvas width="1280" height="720" 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>
  <button id="filter2-button">高斯模糊</button>
  <button id="clear-button">clear</button>
  <button id="ratation-button">横竖切换（背景高斯模糊）</button>
</p>
<p id="current"></p>
<p>
    <canvas id="timeline-canvas" width="640", height="10"></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;
}