console
var canvas = document.getElementById('canvas');
var editor = new Editor(canvas);
let track_video = editor.track({ type: 'video', zIndex: 0 });
let videoNode = editor.video("https://tosv.byted.org/obj/eden-internal/uhyuhybd/video-editor-resource/assets/example2.mp4", {
useEffect: true,
type: 'fade',
fade: {
inTime: 5,
outTime: 3,
},
attributes: {
volume: 1
}
});
videoNode.timelineStart(0);
videoNode.timelineStop(10);
track_video.addNode({ node: videoNode });
let wrapper = document.getElementById('wrapper');
let interactiveBox = editor.initInteractiveBox(wrapper, {
rotatable: true
});
initButton();
InitVisualisations(editor, 'timeline-canvas', 'currentTime');
let graphCanvas = document.getElementById('graph');
Editor.utils.visualiseVideoContextGraph(editor, graphCanvas);
editor.on('timeupdate', () => {
Editor.utils.visualiseVideoContextGraph(editor, graphCanvas);
})
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 changeButton = document.getElementById('changeTransition');
changeButton.onclick = () => {
videoNode.timelineStart(3);
}
let addTransitionDom = document.getElementById('addTransition');
addTransitionDom.onclick = () => {
imageNode.addTransition({ transition: motionbroTransition, secondaryNode: [imageNodeTransformCrop] })
}
let removeTransitionDom = document.getElementById('removeTransition');
removeTransitionDom.onclick = () => {
imageNode.removeTransition({ transition: motionbroTransition })
}
}
<div class="wrapper" id="wrapper">
<canvas width="640" height="360" id="canvas" style="border: 1px solid red;"></canvas>
</div>
<canvas width="640" height="360" id="graph"></canvas>
<p>
<button id="play-button">play</button>
<button id="pause-button">pause</button>
<button id="addTransition">添加转场</button>
<button id="removeTransition">删除转场</button>
<button id="changeTransition">修改时长</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;
}
#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: 640px;
height: 360px;
position: relative;
}
html {
font-family: monospace;
color: #333;
}
#canvas {
width: 640px;
height: 360px;
display: block;
}
#typeSetting {
width: 200px;
}
#alignType {
width: 370px;
}