twily.info ~/firefox/videoeditor.html

24 items • Download ./*
634• 1 year ago• Download Raw Close
1 year ago• 634
{}
<html lang="en">
<head>
<title>Video editor base framework - Twily</title>

<style type+"text/css">
html,body {
    width: 100%; height: 100%;
    margin: 0; padding: 0;
    color: #eee; background: #17181A;
}

* { box-sizing: border-box; }

.tbl { display: table; table-layout: fixed; }
.tr { display: table-row; }
.td { display: table-cell; vertical-align: top; /*outline: 1px solid #f0f;*/ }

.intd {
    position: relative;
    display: block; white-space: nowrap;
    width: 100%; height: 100%;
    /*flex-wrap: nowrap;
    flex-flow: row;*/
    overflow-x: auto;
    overflow-y: hidden;
    user-select: none;
}
.intd #timeline {
    display: block;
    width: 100%; height: 36px;
   /* outline: 2px solid #00f;*/
}
.intd .slice {
    display: inline-block;
    height: 100%;
    outline: 2px solid #f0f;
    max-height: 148px;
    overflow: hidden;
    padding: 4px 0;
}
.td.thumb {
    width: 180px; height: 140px;
    outline: 1px solid #00f;
}

#drawtime {
    width: 100%;
    height: 100%;
    background: #000;
}

#playtrack {
    position: absolute;
    top: 0; left: 50px;
    width: 3px; height: calc( 140px + 36px );
    background: #ff0;
}
</style>
<script type="text/javascript">
var $=function(id) { return document.getElementById(id); };
var dc=function(typ) { return document.createElement(typ); };

var tl,tld;
function init() {
    pt=$('playtrack');
    tl=$('timeline');
    tld=$('tld');

    tld.addEventListener("wheel",function(event) {
       event.preventDefault();
       if(event.deltaY<0)      { tld.scrollTo(tld.scrollLeft+event.deltaY,0); }
       else if(event.deltaY>0) { tld.scrollTo(tld.scrollLeft+event.deltaY,0); }
    });

    tc=$('drawtime');
    tctx=tc.getContext("2d");

    drawSlices();
}

var tc,tctx;
var tcStep=10; // 10 pixel = 6 seconds ? 100 pixel = 1 minute (60 seconds) ?
function drawTimeCanvas() {
    var elms=tld.getElementsByClassName('slice');
    var tlW=0;
    for(var i=0;i<elms.length;i++) {
        tlW+=elms[i].clientWidth;
    }
    //alert(tlW);
    tl.style.width=tlW+"px";

    var tcW=tl.clientWidth;
    var tcH=tl.clientHeight;
    //tl.style.width=tcW+"px";
    tc.width=tcW;
    tc.height=tcH;
    //alert(tcW+"x"+tcH);

    tctx.clearRect(0,0,tcW,tcH);
    tctx.fillStyle = "#000";
    tctx.fillRect(0, 0, tcW, tcH);
    tctx.strokeStyle="#fff";

    var tM=75;
    var tCount=0;
    var tMinutes=1;
    for(var i=0;i<tcW;i+=tcStep) {
        tM=75;
        if(tCount>=10) {
            tctx.font="12px Arial";
            tctx.fillStyle="#f00";
            tctx.textAlign="center";
            tctx.fillText(tMinutes+"m",i,(tcH*(100-tM))/100);
            tMinutes++;

            tM=50;
            tCount=0;
        }
        tCount++;

        tctx.beginPath();
        tctx.moveTo(i,(tcH*tM)/100);
        tctx.lineTo(i,tcH);
        tctx.stroke();
    }
}

var wrT;
window.onresize=function() {
    clearTimeout(wrT);
    wrT=setTimeout(function() {
        drawTimeCanvas();
    },100);
}

var plX=0;
var plY=0;
var lX,lY;
function mouse_position(e) {
    e=event || window.event;

    lX=e.clientX || e.targetTouches[0].pageX;
    lY=e.clientY || e.targetTouches[0].pageY;
    
    var sY=window.scrollY;
    var sX=window.scrollX;

    if(tracklock) {
        sY=tld.scrollTop;
        sX=tld.scrollLeft;
        
        plX=sX+lX;
        plY=sY+lY;

        pt.style.left=plX+"px";

        updateTrackStats(plX);
    }
}
var pt;
var tracklock=false;
function tracktopos(e) {
    if(e.which==1) { // Left button
        var sY=tld.scrollTop;
        var sX=tld.scrollLeft;
        
        plX=sX+lX;
        plY=sY+lY;

        tracklock=true;

        updateTrackStats(plX);
    }
}
function unlocktrack(e) {
    pt.style.left=plX+"px";

    tracklock=false;
}

function updateTrackStats(cX=0) {
    var tT=(cX/10)*6;
    var tSel=-1;
    var tLen=0;
    var tTim=0;
    var tPer=0;
    
    var elms=tld.getElementsByClassName('slice');
    for(var i=0;i<elms.length;i++) {
        if(elms[i].offsetLeft<=cX && (elms[i].offsetLeft+elms[i].clientWidth)>cX) {
            elms[i].style.background="#060"; // green

            tSel=i;
            if(slices[i]) {
                //tLen=(slices[i]['length']/6)*10;
                tLen=slices[i]['length'];
                tTim=((cX-elms[i].offsetLeft)/10)*6;
                tPer=(tTim*100)/tLen;
            } else {
                elms[i].style.background="#600"; // red
            }
        } else {
            elms[i].style.background=""; // reset
        }
    }
    //

    $('stat_timetrack').innerHTML=tT;
    $('stat_pixeltrack').innerHTML=cX;
    $('stat_sliceselect').innerHTML=tSel;
    $('stat_slicetimesel').innerHTML=tTim;
    $('stat_slicetimeper').innerHTML=tPer;
}

//pixel = (length / 6) * 10 = pixel
//length = (pixel / 10) * 6 = sec
//
//6 sec = 10 pixel
//start,end,length=seconds
//
//start = real video begin seconds
//end = real video end seconds

var slices=[ // array of objects
    {
        start: 225,
        end: 465,
        length: 240
    },
    {
        start: 525,
        end: 765,
        length: 540
    },
    {
        start: 825,
        end: 1065,
        length: 240
    },
    {
        start: 1125,
        end: 1365,
        length: 1240
    }
];

function addSlice() {
    //
}
function removeSlice() {
    //
}

function loadVideo() {
    slices=[];

    drawSlices();
}

function drawSlices() {
    //
    var elms=tld.getElementsByClassName('slice');
    for(var i=0;i<elms.length;i++) {
        elms[i].parentNode.removeChild(elms[i]);
        i--;
    }
    //
    for(var i=0;i<slices.length;i++) {
        var slice=dc('div');

        var tbl=dc('div');
        var tr=dc('div');
        var td1=dc('div');
        var td2=dc('div');

        td1.className="td thumb";
        td2.className="td";
        tr.className="tr";
        tbl.className="tbl";
        slice.className="slice";
        slice.style.minWidth=((slices[i]['length']/6)*10)+"px";

        td1.appendChild(document.createTextNode('Thumb ?'));
        td2.appendChild(document.createTextNode('Text ? or more thumb'));

        tr.appendChild(td1);
        tr.appendChild(td2);
        tbl.appendChild(tr);
        slice.appendChild(tbl);
        tld.appendChild(slice);
    }

    drawTimeCanvas(); // update ruler
}
</script>

</head>
<body onload="init();" onmousemove="mouse_position(event);" ontouchmove="mouse_position(event);">

<div class="tbl" style="width: 100%; height: 100%;">
<div class="tr">
<div class="td" style="text-align: center; height: 300px;">

<div style="border: 1px solid #00f; height: 100%;">
Video preview
</div>

</div>
</div>
<div class="tr">
<div class="td" style="text-align: center;">

<div style="border: 1px solid #f0f; height: 100%;">
Add Slice - Controls
</div>

</div>
</div>
<div class="tr">
<div class="td" style="height: 150px;">

<div style="border: 1px solid #0f0; height: 100%;">
<div class="intd" id="tld" onmousedown="tracktopos(event);" onmouseup="unlocktrack(event);"> <!-- timeline -->
    <div id="timeline"><canvas id="drawtime"></canvas></div>
    <div id="playtrack"></div>

    <div class="slice" style="min-width: 400px;"> <!-- example slice add js -->
    <div class="tbl">
    <div class="tr">
    <div class="td thumb">
    Thumb ?
    </div>
    <div class="td">
    Text ? or more thumbs ?
    </div>
    </div>
    </div>
    </div>

    <div class="slice" style="min-width: 400px;"> <!-- example slice add js -->
    <div class="tbl">
    <div class="tr">
    <div class="td thumb">
    Thumb ?
    </div>
    <div class="td">
    Text ? or more thumbs ?
    </div>
    </div>
    </div>
    </div>

    <div class="slice" style="min-width: 400px;"> <!-- example slice add js -->
    <div class="tbl">
    <div class="tr">
    <div class="td thumb">
    Thumb ?
    </div>
    <div class="td">
    Text ? or more thumbs ?
    </div>
    </div>
    </div>
    </div>

</div>
</div>

</div>
</div>
<div class="tr">
<div class="td" style="text-align: center;">

<div style="border: 1px solid #f00; height: 100%;">
Edit Slice - Controls
<br />
<br />
<div style="text-align: left;">
Pixel track : <span id="stat_pixeltrack"></span>
<br />
<br />
Time track : <span id="stat_timetrack"></span>
<br />
<br />
Slice select : <span id="stat_sliceselect"></span>
<br />
<br />
Slice time s : <span id="stat_slicetimesel"></span>
<br />
<br />
Slice time % : <span id="stat_slicetimeper"></span>
<br />
<br />
</div>
</div>

</div>
</div>
</div>

</body>
</html>
Top
twily at twily dot info
2 167 617 visits