CAPTURE OPEN SUBTITLE TEXT OF AN VIDEO (under contruction)

The video need to be download to your ipad and saved in the same folder with this html file
The youtube video https://youtu.be/8Nukkm4jc7s is used in this html file
You can use y2mate.com to download this video to your ipad

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8"> 
<head>

.dragger {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 60px;
        height: 60px;
      }

body{
	margin:0px;
	padding:0px;
	font-size: 16pt;
	background-color:#ccc;
	}

#main{
	position:relative;
	width:720px;
	height:402px; /*574px;*/
	border:1px solid green;
	overflow: hidden;
	}
	
video{
position:relative;
width:720px;
/* border:1px solid green; */
}

#bag{
	position:absolute;
	left: 0; 
	right: 0; 
	margin-left: auto; 
	margin-right: auto; 
	width:722px;
	height:402px; /* 574px; */
	top:0px;
	z-index:20;
	border:1px solid blue;
	}

canvas{
}

.theimg{
position:absolute;
left:-30px;
top:-410px;
width:720px;
height: 402px; /* 574px; */
}

input{
font-size:14pt;
}

button {
    position: relative;
    background-color:white; /*#4CAF50;*/
    border: none;
    font-size: 24px;
    color: black; /* #FFFFFF; */
    padding: 2px 12px;
    text-align: center;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;

border-top: 5px solid #c0ffff ;
    border-right: 5px solid #00f ;
    border-bottom: 5px solid #00f ;
    border-left: 5px solid #c0ffff ;
    border: 5px outset #b37d00 ;
    border-style: outset;
}

button:after{ 
    content: "";
    background:magenta; /*red; #90EE90; */
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px!important;
    margin-top: -120%;
    opacity: 0;
    transition: all 1.8s;
}

button:active:after {
    padding: 0;
    margin: 0;
    opacity:  1; 
    transition: 0s
}

.boxDiv{
position:relative;
overflow:hidden;
width:708px;
height:75px;
border:1px solid green; 
}

#kq{
text-align:center; /* orig left */
width:722px;
border:1px solid brown;
font-size:12pt;
}

textarea{
width:720px;
height:300px;
font-size:14pt;
}

#div1{
    border: 2px  aqua; /* #ffb3de; /* lightblue; */
    border-block-start-style: ridge;
    border-inline-start-style: ridge;
    border-inline-end-style: groove;
    border-block-end-style: groove;
}

#div2{
border:1px solid green;
width:730px;
}

/*======= */

.wrap {
  border: solid 1px #ccc;
  padding: 10px;
  text-align: center;
}
#output {
  text-align:center;
  display: block; /*inline-block;*/
  top: 4px;
  position: relative;
  border: dotted 1px red; /* #ccc; */
  padding: 2px;
  width:720px;
}
.button {
  font-size:16pt;
}
canvas{ 
display:block;
}
video{
position:relative;
width:720px;
}
#main{
height:582px; /* need dynamicaly update: bớt 10 (592 - 10) */
}
#bag{
height:584px;
}

#div1{
   position: absolute;
left:20px;
top:523px;
width:673px;
height:36px;
}
</style>
</head>
<body id="body">
<div align="center">

<video id="video">
<source src="si-ma-guan.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>

</div>
</div>
  <br/>
<div style="width:2px;height:190px">
</div>

<textarea id="area1" style="width:370px; height:50px">
</textarea>
<br>
<button onclick= "removeEle()">New</button>
sec:
<input type="text" id="bBox" size="10" value="0" style="text-align:center">
<button id="begBut" onclick='vidBegin()'>Begin</button>

  <button type="button" onclick="pauseVid();">Pause</button>
    <button type="button" onclick="playVid();">Play</button>
  <button id="cit" onclick="shoot()">Capture</button>
  <br/>
<input type="text" id="nnBox" size="10" value="" style="text-align:center">
<button onclick="screenshot()">Last canvas</button>
<button onclick="canvas2img()">To image</button>
<br>
  <div id="output"></div>

<br>
Press each image to save it to Photos
<br>
<div id="imgDiv" style="width:720px">
</div>
<br><br>
<div id="canLast" style="width:720px; display:none">
</div>
</div>

function removeEle(){
  		output.innerHTML = '';
   }

function screenshot(){
                divX = document.getElementById("output")
                html2canvas(divX).then(function(canvas) {
            document.getElementById("canLast").appendChild(canvas);
                });
            }

function canvas2img(){
 cvas = document.getElementsByTagName('canvas').length;
last = cvas - 1;
 canvasL = document.getElementsByTagName('canvas')[last];
 img = document.createElement('img');
            img.src = canvasL.toDataURL("image/jpeg");
            document.getElementById('imgDiv').appendChild(img);
}

// jQuery UI implementation for mouse drag/resize   
   $( function() {
    $( ".box" ).resizable();
    $( ".box" ).draggable();
    video = document.getElementById('video');
    video.style.width = useW + 'px';
  });

var snapshots = [];
    var point = [];

function vidBegin(){ 
          video.currentTime = 			Number(document.getElementById('bBox').value);
		video.play();
}

function playVid() { 
    video.play(); 
}

function pauseVid() { 
    video.pause(); 
}

function crShow(){
	tt = parseInt($('#div1').css("top"))
	ll =  parseInt($('#div1').css('left'))
	ww = $('#div1').css("width");
	hh =  $('#div1').css('height');
	alert( 'Croping area\n\n' +
	'left: ' + ll + 'px; top: ' + tt + 'px' +'\n' +
	        'width: ' + ww + '; height: ' + hh);
	document.getElementById('lefttop').value = ll + 'px; ' + tt + 'px';
	document.getElementById('d1size').value = ww + '; ' + hh;
}

var vidw, vidh, wpx, hpx;

let video = document.getElementById('video');
let ele = document.getElementById('div1');
let maind =  document.getElementById('main');
let bagd =  document.getElementById('bag');

useW = 720;

video.onloadedmetadata = function() {
    // alert("Meta data for video loaded");
    onloading()
};

function onloading(){ 
/* ele.style.width = '645px';
ele.style.height = '35px';
ele.style.left = '38px';
ele.style.top = '525px'; */

ele.style.left = '36px';
ele.style.top = '357px';
ele.style.width = '645px';
ele.style.height = '35px';

vwidth = video.videoWidth;         
vheight = video.videoHeight;        
ratioWH = Math.round(vwidth/vheight*100)/100;
vidw = 720;
vidh = Math.round(vidw/ratio)
$('#vidw').val(vidw +'px; '+ vidh + 'px');

wpx = vidw + 'px'
hpx = vidh + 'px'

$('#video').css({"width": wpx});
$('#video').css({"height": hpx});

maind.style.width = wpx
maind.style.height = hpx

bagd.style.width  = wpx
bagd.style.height = hpx 
}

function shoot() {
        nn++;
        if(nn <= nnMax){
        var output = document.getElementById('output');
        var canvas = capture(video);

xx = "[-]" + Math.round((video.currentTime - 0.800)*1000)/1000 + "[-]"
        point.push(xx);
   nnT = nn + '/' + nnMax
document.getElementById("nnBox").value = nnT
         snapshots.push(canvas);
        output.innerHTML = '';
        for (var i = 0; i < 150; i++) { 
            output.appendChild(snapshots[i]);
        }
     }else{
	   pauseVid();
	   nn = 0;
	   snapshots = [];
	   alert("Click buttons (Last canvas),\n(To images),\n" +
	            "(New), (Play)");
     }
    }

var ratioWH, ratio;

function capture(video) {
inf = 'left = ' +ele.style.left + '; top = ' + ele.style.top + '\n' +
        'width = ' + ele.style.width + '; height = ' +ele.style.height +
         '; ratioWH = ' + ratioWH;
$('#area1new').val(inf);

vidW= video.videoWidth;
        vidH = video.videoHeight; 
        ratio = Math.round(vidW/useW*100)/100;
	   
	   lf = (ele.style.left).replace('px', '');
        sx = Math.round(parseInt(lf)*ratio);
        
        tp = (ele.style.top).replace('px', '');
        sy = Math.round(parseInt(tp)*ratio);
       
        dw = Math.round(parseInt((ele.style.width).replace('px','')));
        sw = Math.round(dw*ratio);
        
	   dh = Math.round(parseInt((ele.style.height).replace('px','')));
        sh = Math.round(dh*ratio);

txt = 'sx = ' + sx + '; sy = ' + sy + 
         '; sw = ' + sw + '; sh = ' + sh + '\n' +
	    'dw = ' + dw + '; dh = ' + dh + 
	    '; ratio = ' + vidW + '/' + useW + ' = ' + ratio;
	  $('#area1').val(txt);
	
        document.getElementById('output').style.width = dw + 'px'
        document.getElementById('imgDiv').style.width = dw + 'px'
        
        var canvas = document.createElement('canvas');
        canvas.width = dw
        canvas.height = dh + 22
        var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.rect(0, 0, canvas.width, canvas.height)
ctx.fillStyle = "white";
ctx.fill();
ctx.font = "18px Arial";
xx = "#" + Math.round((video.currentTime - 0.800)*1000)/1000 + "#"
ctx.fillStyle = "black";
ctx.fillText(xx, 300, 16);
        sx = sx + 4;
        sy = sy + 4;
        ctx.drawImage(video, sx, sy, sw , sh, 0,22, dw, dh);
        return canvas;
    }

</script>
</body>
</html>

HOW TO USE

Use scanner app to get chinese texts (time lines are unchanged)

Using Google translate app we have english text

In google translate app tap copy english text
Open Koder app, open file “a2-make-vtt.html”
Parse english text to a textarea
Tap button “Make VTT” to create final vtt file

JAVASSCRIPT ON IPAD (to see the list click ← then click ≡ and ⌄)

CAPTURE OPEN SUBTITLE TEXT OF AN VIDEO (under contruction)

Popular posts from this blog

PHP JQUERY PROXY DEMO

WEB PROGRAMMING ON IPAD. Search yt videos by keyword and load js file to play

SEARCH FOR PIXABAY PHOTOS