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;
}
#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;
}