console
var canvas = document.getElementById('canvas');
var editor = new Editor(canvas);
var videoNode1 = editor.video("https://cdn.jsdelivr.net/gh/shanyutongxue/cdnCache/example1.mp4", 0, 4);
videoNode1.timelineStart(0);
videoNode1.timelineStop(8);
var videoNode2 = editor.video("https://cdn.jsdelivr.net/gh/shanyutongxue/cdnCache/example2.mp4", 0, 4)
videoNode2.timelineStart(6);
videoNode2.timelineStop(20);
var transitionNode1 = editor.transition(Editor.DEFINITIONS.DREAMFADE);
var transitionNode2 = editor.transition(Editor.DEFINITIONS.WINDOWSLICE);
var transitionNode3 = editor.transition(Editor.DEFINITIONS.DIRECTIONAL);
videoNode1.connect(transitionNode1);
videoNode2.connect(transitionNode1);
transitionNode1.connect(editor.output);
transitionNode1.transition(6,8,0.0,1.0);
initButton();
InitVisualisations(editor, 'timeline-canvas', 'currentTime');
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);
}
function initButton() {
var playButton = document.getElementById('play-button');
var pauseButton = document.getElementById('pause-button');
playButton.onclick = editor.play.bind(editor);
pauseButton.onclick = editor.pause.bind(editor);
var transition1Button = document.getElementById('transition1-button');
var transition2Button = document.getElementById('transition2-button');
transition1Button.onclick = function() {
reConnect(transitionNode1);
};
transition2Button.onclick = function() {
reConnect(transitionNode2);
};
}
function reConnect(transitionNode) {
videoNode1.disconnect();
videoNode2.disconnect();
videoNode1.connect(transitionNode);
videoNode2.connect(transitionNode);
transitionNode.connect(editor.output);
editor.currentTime = 0;
transitionNode.transition(6,8,0.0,1.0);
}
<canvas width="640" height="360" id="canvas"></canvas>
<p>
<button id="play-button">play</button>
<button id="pause-button">pause</button>
<button id="transition1-button">dream fade</button>
<button id="transition2-button">window slice</button>
</p>
<p id="currentTime"></p>
<p>
<canvas id="timeline-canvas" width="640", height="20"></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;
}