SOURCE

let fontData, textAnimationData;
let type = "flower";//transition 、effect 、text 、flower、animation
let canvas = document.getElementById('canvas');
let editor = new Editor(canvas);
let wordArt, wordArt1;
let fontNum = 0;
let animation1, animation2, animation3, textType, stickerNode, textNode, sticker_url, text_url;


let audioNode = {};
let audioTrack = {};
let effectNode = {};
let effectTrack = {};
let materialNode = {};
let videoTrack = {};
let transitionNode = {};
let extraNode = {};

effectNode['l-p4zQvoy9cnbZ1Yje31Sle'] = editor.effect({
  "title": "lut",
  "vertexShader": "#define GLSLIFY 1\nattribute vec2 a_position;\nattribute vec2 a_texCoord;\nvarying vec2 v_texCoord;\n\nvoid main() {\n    gl_Position = vec4(a_position, 0.0, 1.0);\n    v_texCoord = a_texCoord;\n}\n",
  "fragmentShader": "precision mediump float;\n#define GLSLIFY 1\n\nuniform float power;\nuniform sampler2D from;\nuniform sampler2D lut;\n\nvarying vec2 v_texCoord;\n\nvec4 transition(vec2 invUv){\n    vec2 useUv = vec2(invUv.x, invUv.y);\n\n    vec4 textureColor = texture2D(from, useUv);\n\n    float blueColor = textureColor.b * 63.0;\n\n    vec2 quad1;\n    quad1.y = floor(floor(blueColor) / 8.0);\n    quad1.x = floor(blueColor) - (quad1.y * 8.0);\n\n    vec2 quad2;\n    quad2.y = floor(ceil(blueColor) / 8.0);\n    quad2.x = ceil(blueColor) - (quad2.y * 8.0);\n\n    vec2 texPos1;\n    texPos1.x = (quad1.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);\n    texPos1.y = 1. - ((quad1.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g));\n\n    vec2 texPos2;\n    texPos2.x = (quad2.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);\n    texPos2.y = 1. - ((quad2.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g));\n\n    vec4 newColor1 = texture2D(lut, texPos1);\n    vec4 newColor2 = texture2D(lut, texPos2);\n\n    vec4 newColor = mix(newColor1, newColor2, fract(blueColor));\n    return mix(textureColor, vec4(newColor.rgb, textureColor.w), power);\n}\n\nvoid main() {\n    gl_FragColor = transition(v_texCoord);\n}\n\n",
  "inputs": [
    "from",
    "lut"
  ],
  "properties": {
    "power": {
      "type": "uniform",
      "value": 1
    }
  }
})
effectNode['l-p4zQvoy9cnbZ1Yje31Sle'].power = 0.5
effectNode['l-p4zQvoy9cnbZ1Yje31Sle'].effect(0, 3)
extraNode['6vlgbefvrb3'] = editor.image('https://sf1-ttcdn-tos.pstatp.com/obj/ad-material-store/image/de766d2227c0ac2963590ed14c9af5ca')
extraNode['6vlgbefvrb3'].timelineStart(0)
extraNode['6vlgbefvrb3'].timelineStop(3)
effectTrack['w-ZOTlC6DGYzKQ18mXGn31q'] = editor.track({ type: 'effect' })
effectTrack['w-ZOTlC6DGYzKQ18mXGn31q'].addEffect({
        effect: effectNode['l-p4zQvoy9cnbZ1Yje31Sle'],
        secondaryNode: [extraNode['6vlgbefvrb3']],
      })
effectNode['l-p4zQvoy9cnbZ1Yje31Sle'].effect(0, 3)
extraNode['6vlgbefvrb3'].timelineStart(0)
extraNode['6vlgbefvrb3'].timelineStop(3)

initEvent();
initEditor();

function initEvent() {
    let removeNodeDom = document.getElementById('removeNode');
    removeNodeDom.onclick = () => {
        effectNode['l-p4zQvoy9cnbZ1Yje31Sle'].power = 1
    }
     let addNodeDom = document.getElementById('addNode');
    addNodeDom.onclick = () => {
        effectNode['l-p4zQvoy9cnbZ1Yje31Sle'].power = 0.5
    }
}

function initEditor() {
    let graphCanvas = document.getElementById('graph');
    Editor.utils.visualiseVideoContextGraph(editor, graphCanvas, true);
    editor.on('timeupdate', () => {
        Editor.utils.visualiseVideoContextGraph(editor, graphCanvas);
    })
    InitVisualisations(editor, 'timeline-canvas', 'currentTime');
    playButton.onclick = () => {
        editor.play();
    }
    pauseButton.onclick = editor.pause.bind(editor);
    let interactiveBox = editor.initInteractiveBox(wrapper, {
        rotatable: true,
    });
}

 <div class="wrapper" id="wrapper">
    <canvas width="720" height="1280" id="canvas"></canvas>
  </div>
  <button id="playButton">play</button>
  <button id="pauseButton">pause</button></br>
  <button id="removeNode">power = 1</button>
  <button id="addNode">power = 0.5</button>
  <p id="currentTime">
  </p>
  <p>
    <canvas id="timeline-canvas" width="640" height="20"></canvas>
  </p>
  <canvas width="640" height="360" id="graph"></canvas>

html {
    font-family: monospace;
    color: #333;
    /* background-color: black; */
  }
  #current {
    font-size: 12px;
  }
  #canvas {
    width: 320px;
    height: 640px;
  }
  #canvas2 {
    width: 640px;
    height: 360px;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 10;
  }
  #container {
    position: relative;
  }

  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: 50px;
  }

  .wrapper {
    width: 320px;
    height: 640px;
    position: relative;
  }

@font-face {
  font-family: "hardFont";
  src: url('./../../assets/hardFont.ttf');
}
#bg-video{
    width:640px;
    height:400px;
}
#changeSrc{
    width:80%;
    height:40px;
    line-height: 40px;
}