FILE a121-capture-liu-bei-attack.html

sec:

Please note that because this html is saved in google blogger, the two yellow buttons don't work.
But if you download this html and the video to your ipad (put them in the same folder of some html editor app) then those two buttons will work and
help you immediately have the image to save to Photos app, no need to crop image

LET PRACTICE STEP BY STEP
1-If the line number of the subtitle is 1, then write in the html file nnMax = 14
If the line number of the subtitle is 2, then rewrite nnMax = 7 (14/2 = 7);
After you have taped the “Capture sub” button 14 times, the video stops and a message prompts you to take screenshot, crop the image, leaving only the portion with the timeline and subtitles, save this mage to the Photos app. See the picture below

SOURCE CODE

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

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

#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, button{
font-size:14pt;
}

.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;
}
#main1{
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="luu-bi-chinh-ngo.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>

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

<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>
<br>
SOURCE CODE
<br>
<textarea id="sourceT" style="border:1px solid green;width:720px;height:220px">
</textarea>
<br>
    <a id="mybutton" href="" download="a121-capture-sub.html">Download</a>

</div>

$('#mybutton').click(function(){
      var data = $('#sourceT').val();
      this.href = "data:text/html;charset=UTF-8,"  + encodeURIComponent(data);
    });

nn = 0;
  nnMax = 14;
  output = document.getElementById("output");

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

var vidw, vidh, wpx, hpx;

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

useW = 720;

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

function onloading(){ 
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',''))*0.8);
	   dh = Math.round(parseInt((ele.style.height).replace('px',''))*0.8);
	
	   sw = Math.round(parseInt((ele.style.width).replace('px',''))*ratio)
        sh = Math.round(parseInt((ele.style.height).replace('px',''))*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 + 17;
        var ctx = canvas.getContext('2d');
	   ctx.beginPath();
	   ctx.rect(0, 0, canvas.width, canvas.height)
	   ctx.fillStyle = "white";
	   ctx.fill();
	   ctx.font = "16px Arial";
xx = "#" + Math.round((video.currentTime - 0.800)*1000)/1000 + "#"
	   ctx.fillStyle = "black";
	   ctx.fillText(xx, 230, 14); // 16
        sx = sx + 4;
        sy = sy + 4; 
        ctx.drawImage(video, sx, sy, sw , sh, 0,17, dw, dh);
        return canvas;
    }
  
// Convert the div "output" with all canvases inside to one new canvas;

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

// Covert new (last) canvas to on image. After that we need to press this image and choose "Save to Photos";

function canvas2img(){
len = document.getElementsByTagName('canvas') .length;
canvasL = 
document.getElementsByTagName('canvas')[len - 1]
img = document.createElement('img');
img.setAttribute("width", String(dw));
img.src = canvasL.toDataURL("image/jpeg");
document.getElementById('imgDiv') .appendChild(img);
}

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

Download

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

FILE a121-capture-liu-bei-attack.html

Popular posts from this blog

PHP JQUERY PROXY DEMO

EXAMPLE ON MODIFYING HTML5 MEDIAELEMENT.JS PLAYER

COPY SOURCE CODE FOR ytvideo-play.html, test