SOURCE

console 命令行工具 X clear

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

var videoNode = editor.video("https://cdn.jsdelivr.net/gh/shanyutongxue/cdnCache/example1.mp4", 10, 20);
videoNode.timelineStart(0);
videoNode.timelineStop(30);
videoNode.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');
  playButton.onclick = editor.play.bind(editor);
  pauseButton.onclick = editor.pause.bind(editor);
  replayButton.onclick = function() {
    editor.currentTime = 0;
    editor.play();
  }
}

function InitVisualisations(editor, visualisationCanvasID, logPanelId){
  var visualisationCanvas = document.getElementById(visualisationCanvasID);
  var logPanel = document.getElementById(logPanelId);
  function render () {
    Editor.utils.visualiseVideoContextTimeline(editor, visualisationCanvas, editor.currentTime);
    logPanel.innerHTML = `currentTime:${editor.currentTime.toFixed(3)}`;
    if (editor.currentTime > editor.duration) editor.currentTime = 0;
    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);

  visualisationCanvas.addEventListener('mousedown', function(evt){
    var x;
    if (evt.x !== undefined){
      x = evt.x - visualisationCanvas.offsetLeft;
    } else {
      x = evt.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
    }
    var secondsPerPixel = editor.duration / visualisationCanvas.width;
    if (secondsPerPixel * x !== Infinity) editor.currentTime = secondsPerPixel * x;
  }, false);
}
<canvas width="640" height="360" id="canvas"></canvas>
<p>
  <button class="button" id="play-button">play</button>
  <button class="button" id="pause-button">pause</button>
  <button class="button" id="replay-button">replay</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;
}

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