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

materialNode['8-bCG7N9jMZ1Zp6QIiFC8mm'] = editor.image('https://p6-tada-sign.byteimg.com/tos-cn-i-lqsqysnsqa/5f57f73a8a604116afb324892f39e326~tplv-lqsqysnsqa-image.jpeg?x-expires=1633761589&x-signature=Fl44kP2k%2F21lSciQGdHA%2FCg2Pus%3D', {
    "width": 720,
    "height": 540,
    "left": 0,
    "top": 370,
    "useSourceResolution": false
})
materialNode['8-bCG7N9jMZ1Zp6QIiFC8mm'].timelineStart(0)
materialNode['8-bCG7N9jMZ1Zp6QIiFC8mm'].timelineStop(3)
materialNode['5-bCG7N9jMZ1Zp6QIiFC8mm'] = editor.image('https://p3-tada-sign.byteimg.com/tos-cn-i-lqsqysnsqa/5f57f73a8a604116afb324892f39e326~tplv-lqsqysnsqa-image.jpeg?x-expires=1633761589&x-signature=GrLGZ%2FD7gBRs7ZLrbKWCXl85tHU%3D', {
    "width": 720,
    "height": 540,
    "left": 0,
    "top": 370,
    "useSourceResolution": false
})
materialNode['5-bCG7N9jMZ1Zp6QIiFC8mm'].timelineStart(2.5)
materialNode['5-bCG7N9jMZ1Zp6QIiFC8mm'].timelineStop(5.5)
transitionNode['e-bCG7N9jMZ1Zp6QIiFC8mm'] = editor.transition({
    "title": "fire",
    "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 progress;\nvarying vec2 v_texCoord;\nuniform sampler2D u_image_a, u_image_b;\n\nvec4 getFromColor (vec2 v_texCoord) {\n    return texture2D(u_image_a, v_texCoord);\n}\n\nvec4 getToColor (vec2 v_texCoord) {\n    return texture2D(u_image_b, v_texCoord);\n}\n\nfloat Hash( vec2 p)\n{\n    vec3 p2 = vec3(p.xy,1.0);\n    return fract(sin(dot(p2,vec3(37.1,61.7, 12.4)))*3758.5453123);\n}\n\nfloat noise(in vec2 p)\n{\n    vec2 i = floor(p);\n    vec2 f = fract(p);\n    f *= f * (3.0-2.0*f);\n\n    return mix(mix(Hash(i + vec2(0.,0.)), Hash(i + vec2(1.,0.)),f.x),\n    mix(Hash(i + vec2(0.,1.)), Hash(i + vec2(1.,1.)),f.x),\n    f.y);\n}\n\nfloat fbm(vec2 p)\n{\n    float v = 0.0;\n    v += noise(p*1.)*.5;\n    v += noise(p*2.)*.25;\n    v += noise(p*4.)*.125;\n    return v;\n}\n\nvec4 transition( vec2 uv )\n{\n    //         vec2 uv = (fragCoord - iResolution.xy*.5)/iResolution.y;\n\n    if  (progress <= 0.0) {\n        return getFromColor(uv);\n    } else if (progress >= 1.0) {\n        return getToColor(uv);\n    }\n\n    vec3 src = getFromColor(uv).rgb;\n\n    vec3 tgt = getToColor(uv).rgb;\n\n    vec3 col = src;\n\n    uv.x -= 1.5;\n\n    float ctime =  progress * 1.5;//mod(iTime*.5,2.5);\n\n    // burn\n    float d = uv.x+uv.y*0.5 + 0.5*fbm(uv*15.1) + ctime*1.3;\n    if (d >0.35) col = clamp(col-(d-0.35)*10.,0.0,1.0);\n    if (d >0.47) {\n        if (d < 0.5 ) col += (d-0.4)*33.0*0.5*(0.0+noise(100.*uv+vec2(-ctime*2.,0.)))*vec3(1.5,0.5,0.0);\n        else col += tgt;\n    }\n    return vec4(col, 1.);\n}\n\nvoid main() {\n    gl_FragColor = transition(v_texCoord);\n}\n",
    "inputs": [
        "u_image_a",
        "u_image_b"
    ]
})
transitionNode['e-bCG7N9jMZ1Zp6QIiFC8mm'].transition(2.5, 3)
videoTrack['9-bCG7N9jMZ1Zp6QIiFC8mm'] = editor.track({ type: 'video', zIndex: 100 })
videoTrack['9-bCG7N9jMZ1Zp6QIiFC8mm'].addNode({ node: materialNode['8-bCG7N9jMZ1Zp6QIiFC8mm'] })
videoTrack['9-bCG7N9jMZ1Zp6QIiFC8mm'].addNode({ node: materialNode['5-bCG7N9jMZ1Zp6QIiFC8mm'] })
materialNode['8-bCG7N9jMZ1Zp6QIiFC8mm'].timelineStart(0)
materialNode['8-bCG7N9jMZ1Zp6QIiFC8mm'].timelineStop(3)
materialNode['5-bCG7N9jMZ1Zp6QIiFC8mm'].timelineStart(2.5)
materialNode['5-bCG7N9jMZ1Zp6QIiFC8mm'].timelineStop(5.5)
// 放在这里有问题
materialNode['8-bCG7N9jMZ1Zp6QIiFC8mm'].addTransition({
    transition: transitionNode['e-bCG7N9jMZ1Zp6QIiFC8mm'],
    secondaryNode: [],
    autoTargetTime: false,
})
effectNode['5-JADAj8K_zeY_mPDDI1EZ-'] = 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['5-JADAj8K_zeY_mPDDI1EZ-'].power = 1
effectNode['5-JADAj8K_zeY_mPDDI1EZ-'].effect(3.29, 6.29)
extraNode['l96ouljbqoh'] = editor.image('https://sf1-ttcdn-tos.pstatp.com/obj/ad-material-store/image/de766d2227c0ac2963590ed14c9af5ca')
extraNode['l96ouljbqoh'].timelineStart(3.29)
extraNode['l96ouljbqoh'].timelineStop(6.29)
effectTrack['6-JADAj8K_zeY_mPDDI1EZ-'] = editor.track({ type: 'effect' })
effectTrack['6-JADAj8K_zeY_mPDDI1EZ-'].addEffect({
    effect: effectNode['5-JADAj8K_zeY_mPDDI1EZ-'],
    secondaryNode: [extraNode['l96ouljbqoh']],
})
effectNode['5-JADAj8K_zeY_mPDDI1EZ-'].effect(3.29, 6.29)
extraNode['l96ouljbqoh'].timelineStart(3.29)
extraNode['l96ouljbqoh'].timelineStop(6.29)

// 放在这里没问题
// materialNode['8-bCG7N9jMZ1Zp6QIiFC8mm'].addTransition({
//     transition: transitionNode['e-bCG7N9jMZ1Zp6QIiFC8mm'],
//     secondaryNode: [],
//     autoTargetTime: false,
// })

initEvent();
initEditor();

function initEvent() {
    let removeNodeDom = document.getElementById('removeNode');
    // removeNodeDom.onclick = () => {
    //     audioNode['a-THmwCZf0cMOmWUGVOmZ9H'] = editor.audio('https://lf3-static.bytednsdoc.com/obj/eden-cn/4201eh7nuhpephbozupq/creative-video-editor/1234.m4a', {
    //         "attributes": {
    //             "loop": true,
    //             "volume": 1
    //         },
    //         "sourceOffset": 0,
    //         "useEffect": true,
    //         "type": "fade",
    //         "fade": {
    //             "inTime": 0,
    //             "outTime": 0
    //         },
    //         "playbackRate": 1,
    //         "playbackRateType": "wasm",
    //         "useSourceResolution": true
    //     })
    //     audioNode['a-THmwCZf0cMOmWUGVOmZ9H'].timelineStart(0)
    //     audioNode['a-THmwCZf0cMOmWUGVOmZ9H'].timelineStop(30.898)

    //     audioNode['7-THmwCZf0cMOmWUGVOmZ9H'].setSourceOffset(0)
    //     audioNode['7-THmwCZf0cMOmWUGVOmZ9H'].timelineStart(0)
    //     audioNode['7-THmwCZf0cMOmWUGVOmZ9H'].timelineStop(3)

    //     audioTrack['8-THmwCZf0cMOmWUGVOmZ9H'].addNode({ node: audioNode['a-THmwCZf0cMOmWUGVOmZ9H'] })
    //     audioNode['a-THmwCZf0cMOmWUGVOmZ9H'].volume = 1
    // }
}

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">轨道一移除节点</button>
  <button id="addNode">轨道二添加节点</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;
}