console
var canvas = document.getElementById('canvas');
var editor = new Editor(canvas);
var videoNode = editor.video("//sf1-ttcdn-tos.pstatp.com/obj/ttfe/video_editor/example1.mp4", {
attributes: {
loop: true,
volume: 0
}
});
videoNode.timelineStart(0);
videoNode.timelineStop(60);
var audioNode = editor.audio('//sf1-ttcdn-tos.pstatp.com/obj/ttfe/video_editor/example.mp3');
audioNode.timelineStart(0);
audioNode.timelineStop(60);
videoNode.connect(editor.output);
playButton.onclick = editor.play.bind(editor);
pauseButton.onclick = editor.pause.bind(editor);
destroyButton.onclick = () => audioNode.destroy();
InitVisualisations(editor, 'timeline-canvas', 'current')
<canvas width="640" height="360" id="canvas"></canvas>
<p>
<button id="playButton">play</button>
<button id="pauseButton">pause</button>
<button id="destroyButton">destroy</button>
</p>
<p id="current">
</p>
<p>
<canvas id="timeline-canvas" width="640", height="20"></canvas>
</p>
html {
font-family: monospace;
color: #333;
}
#canvas {
width: 640px;
height: 360px;
}
#current {
font-size: 12px;
}
input {
width: 50px;
}
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;
}