USE JAVASCRIPT TO CAPTURE OPEN SUBTITLES

Open youtube.com
Open this video
https://youtu.be/NvqWkVapZOc
Copy link to this video

Open y2mate.com
Paste the link
Download video to your phone
Rename the file name to "flame-mountain.mp4"

Copy the html code (press the button below)
Open "Notepad" app
Create new file. Paste html code. Save as "flame-mountain.html" in the same folder, where the mp4 file is saved

Press on the file
flame-mountain.html" Choose "Chrome"
Press "JUST ONCE"

HOW TO USE THIS html FILE
1- In the input text box at the button "New" type the time point (in seconds) you want this video to start playing
2- Press the button "Begin"
3- Every time you see a new subtitle appear, you need to immediately press the "Capture" button.
4- After 8 or 10 times pressing the "Capture" button, press the "Pause" button and then press the "Merge Canvases" button
5- A new tab will open, with images of the subtitles you got when you pressed the "Capture" button.
6- Download this image to your phone.

<!DOCTYPE html> <html>
<head>
<meta charset="utf-8"> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>

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

body{
	width:100%;
	margin:0px;
	padding:0px;
	font-size: 1.3em;
	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:720px; /*402px;  574px; */
	top:0px;
	z-index:20;
	border:1px solid blue;
	}

canvas{
}

input{
font-size:1.2em;
}

button {
    position: relative;
    background-color:white; /*#4CAF50;*/
    border: none;
    font-size: 1.6em;
    font-weight:bold;
    margin:0.2em;
    color: black; /* #FFFFFF; */
    padding: 0.2em; 0.6em;
    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
}

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

#output {
  text-align:center;
  display: block; /*inline-block;*/
  top: 4px;
  position: relative;
  border: dotted 1px red; /* #ccc; */
  padding: 2px;
  width:720px;
}
.button {
  font-size:1.5em;
}
canvas{ 
display:block;
}
video{
position:relative;
width:100%;
}
#main{
height:575px; /* need dynamicaly update: bớt 10 (592 - 10) */
}
#bag{
height: 575px;
/* 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="flame-mountain.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>

</div>

<button id="begBut" onclick='vidBegin()'>Begin</button>

<button id="cit" onclick="shoot()">Capture</button>
  <br/>
  	<button onclick="mergeCanvases(snapshots)">Merge Canvases</button>
  <button type="button" onclick="pauseVid();">Pause</button>
    <button type="button" onclick="playVid();">Play</button>

<br>
  <div id="output"></div>
  <br>
<textarea id="area1new"
  	style="width:90%; height:120px; padding:1em">
</textarea>
<br><span style="color:red; font-size:1.4em">
If you use smartphone<br>
1- Pinch with two fingers to zoom out?<br>
2- Let use Chrome browser to open this html file<br>
Make sure the width of the html file is equal to the width of the phone, when held vertically.
</span>
<br>
  <textarea id="area1" style="width:90%; height:120px; padding:1em">
</textarea>
<br>
<button onclick= "removeEle()">New</button>
 
sec:
<input type="text" id="bBox" size="10" value="0" style="text-align:center">
<br>

</div>

</div>
<script>
  nn = 0;
  nnMax = 20; // 13;
  output = document.getElementById("output");

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

// 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.left = '38px';
ele.style.top = '484px';
ele.style.width = '640.44px';
ele.style.height = '80.44px';

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);

nnT = nn + '/' + nnMax
document.getElementById("nnBox").value = nnT
         snapshots.push(canvas);
        output.innerHTML = '';
        for (var i = 0; i < snapshots.length; 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 + '; \nsh = ' + sh + 
	    'dw = ' + dw + '; dh = ' + dh + 
	    '; \nratio = ' + vidW + '/' + useW + ' = ' + ratio;
	  $('#area1').val(txt);
	
        document.getElementById('output').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;
    }
    
 /////////////

var totalWidth 
var totalHeight
var mergedCanvas
function mergeCanvases(canvases) {
    var mergedCanvas = document.createElement('canvas');
    var context = mergedCanvas.getContext('2d');
    totalWidth = canvases[0].width;
    totalHeight = canvases[0].height*canvases.length;// Calculate total height
// alert('TotalH = ' + totalHeight);
    mergedCanvas.width = totalWidth;
    mergedCanvas.height = totalHeight;
 mergedCanvas.style.display = "none";

var offsetY = 0; // Track the vertical offset

for (var i = 0; i < canvases.length; i++) {
        context.drawImage(canvases[i], 0, offsetY); // Draw each canvas at the current offset
        offsetY += canvases[i].height; // Update the offset
    }

document.body.appendChild(mergedCanvas);
    // context = mergedCanvas.getContext('2d');
  combinedImage = mergedCanvas.toDataURL('image/png');
  // Open the combined image in a new tab
  
var newTab = window.open('about:blank', '_blank');
  newTab.document.write('<img src="' + combinedImage + '" width="' + totalWidth + '" height="' + totalHeight + '">' + '<br><br>' +
'<div style="color:red; font-size:1.4em; width:' + totalWidth + 'px'+ '">You have to download the above image to your device.<br><br>If you used the Android Chrome browser to open this html file, you will download the above image to your phone as follows:<br><b>Press your finger on the photo above<br>When the menu appears, select "Download image"("Tải hình ảnh về")</b></div>'); 
}

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

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

USE JAVASCRIPT TO CAPTURE OPEN SUBTITLES

Popular posts from this blog

PHP JQUERY PROXY DEMO

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

EXAMPLE ON MODIFYING HTML5 MEDIAELEMENT.JS PLAYER