SOURCE

console 命令行工具 X clear

                    
>
console
var canvas = document.getElementById('canvas');
  var textInput = document.getElementById('text-input');
  var fontSizeInput = document.getElementById('font-size-input');
  var fontColorInput = document.getElementById('font-color-input');
  var timelineStartInput = document.getElementById('timeline-start-input');
  var timelineStopInput = document.getElementById('timeline-stop-input');
  var textInput2 = document.getElementById('text-input2');
  var fontSizeInput2 = document.getElementById('font-size-input2');
  var fontColorInput2 = document.getElementById('font-color-input2');
  var timelineStartInput2 = document.getElementById('timeline-start-input2');
  var timelineStopInput2 = document.getElementById('timeline-stop-input2');
  var editor = new Editor(canvas);

  var videoNode = editor.video("http://sf3-ttcdn-tos.pstatp.com/obj/ttfe/video_editor/example2.mp4");
  videoNode.timelineStart(0);
  videoNode.timelineStop(20);

  var textNodeArray = editor.text([
  {
      text: textInput.value,
      timelineStart: timelineStartInput.value,
      timelineStop: timelineStopInput.value,
      options: {
        top: 100,
        timelineStart: 4,
        textStyle: {
          fontColor: '#ff00ff',
          fontSize: 78,
        },
        background: {
          color: 'rgb(0,0,0,0.6)'
        }
      }
  },
  {
      text: textInput2.value,
      timelineStart: timelineStartInput2.value,
      timelineStop: timelineStopInput2.value,
      options: {
        top: 250,
        textStyle: {
          fontColor: '#ff0000',
          fontSize: 48,
          textBaseline: 'top'
        },
        background: {
          color: 'blue'
        }
      }
  },
  {
      text: '他甚至在家门口开起了妖怪牌棉花糖店,这是怎么回事呢?这是怎么回事呢?他甚至在家门口开起了妖怪牌棉花糖店,这是怎么回事呢?这是怎么回事呢?',
      timelineStart: 0,
      timelineStop: timelineStopInput2.value,
      options: {
        top: 450,
        textStyle: {
          fontColor: '#ff0000',
          fontSize: 48,
          textBaseline: 'bottom'
        }
      }
  }
  ]);

  videoNode.connect(editor.output);
  textNodeArray.connect(editor.output);
  initButton();
  InitVisualisations(editor, 'timeline-canvas', 'current');
  console.log(editor.toObject());

  function initButton() {
    var playButton = document.getElementById('play-button');
    var pauseButton = document.getElementById('pause-button');
    var replayButton = document.getElementById('replay-button');
    var changeButton = document.getElementById('change-button');
    var rotationButton = document.getElementById('rotation-button');
    
    playButton.onclick = editor.play.bind(editor);
    pauseButton.onclick = editor.pause.bind(editor);
    replayButton.onclick = function() {
      editor.currentTime = 0;
      editor.play();
    }
    changeButton.onclick = function() {
      textNode.textStyle = {
        fontSize: fontSizeInput.value,
        fontColor: fontColorInput.value
      }
      textNode.text= textInput.value;
      textNode.timelineStart(timelineStartInput.value);
      textNode.timelineStop(timelineStopInput.value);

      textNode2.textStyle = {
        fontSize: fontSizeInput2.value,
        fontColor: fontColorInput2.value
      }
      textNode2.text= textInput2.value;
      textNode2.timelineStart(timelineStartInput2.value);
      textNode2.timelineStop(timelineStopInput2.value);
    }
    rotationButton.onclick = function() {
        editor.isRotation = !editor.isRotation;
    }
  }
<div id=container>
      <canvas width="1280" height="720" id="canvas" style="width: 640px; height: 360px;"></canvas>
  </div>
  <p>
    <button id="play-button">play</button>
    <button id="pause-button">pause</button>
    <button id="replay-button">replay</button>
    <button id="rotation-button">横竖屏切换</button>
  </p>
  <p>
    字幕1: start:<input id="timeline-start-input" value="0"/>
    stop:<input id="timeline-stop-input" value="5"/>
    text:<input id="text-input" value="这是第一一一一一段测试字幕"  style="width: 300px"/>
  </p>
  <p>
    fontSize:<input id="font-size-input" value="48"/>
    fontColor:<input id="font-color-input" value="#00ff00" style="width: 100px"/>
  </p>
  <p>
    字幕2: start:<input id="timeline-start-input2" value="4"/>
    stop:<input id="timeline-stop-input2" value="12"/>
    text:<input id="text-input2" value="香甜香甜、雪白雪白的棉花糖你一定很爱吃,当然,妖怪也不例外"  style="width: 300px"/>
  </p>
  <p>
      fontSize:<input id="font-size-input2" value="48"/>
      fontColor:<input id="font-color-input2" value="#00ff00" style="width: 100px"/>
  </p>
  <p>
      <button id="change-button">change</button>
  </p>
  <p id="current"></p>
  <p>
      <canvas id="timeline-canvas" width="640", height="10"></canvas>
  </p>
html {
    font-family: monospace;
    color: #333;
    /* background-color: black; */
  }
  #current {
    font-size: 12px;
  }
  #canvas {
    width: 640px;
    height: 360px;
  }
  #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 {
    -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;
}

本项目引用的自定义外部资源