TEST a1-capture-flaming.html (DOWNLOAD FILE)

From (sec)

Wait a few seconds while this page is loading.
- Tap the button "Begin"
Please watch the video carefully.
- Whenever you see a new subtitle line appear in the aqua color frame, immediately tap the "Capture" button
Note: do not move the aqua color frame to another place

Press each image to save it to Photos

A- HOW TO PLAY VIDEO WITH SUBTITLES ON IPAD

First of all you should read my post PROGRAM JAVASCRIPT ON IPAD at the following address
https://phanhung20.blogspot.com/2022/11/program-javascript-on-ipad.html

Then you need to install on your ipad the following apps:

Apps for html and javascript editing

Koder code editor
Web play grounds

Text scanner app

Photo Translator (by Tiemei Yan)

Translator app

Google translate (133 languages)
DeepL translate (29 languages)

NOTE:
1- Using the App Store you can find a lot of Text scanners and Translators. But it is necessary to exclude apps that are only free to use for a few days and apps that cause errors when scanning and translating documents. After trying some apps, I found the above apps should be selected for use.
2- When the text is too long (more than 5000 characters), don't use translator apps but use https://translate.google.com service online
3- In one of my posts
https://phanhung20.blogspot.com/2022/11/test-a3-play-flaming.html
show how to display English (or other) subtitles and Chinese text with pinyin simultaneously. For this you need to use the site:
https://www.chineseconverter.com/en/convert/chinese-to-pinyin

After creating html file to play video with subtitle on ipad. You can use screen record function to turn html into mp4 video with open subtitles and then upload this video to youtube.com.

STEPS TO MAKE SUBTITLE TEXT

- Open "Koder" app
- Create a folder for the specific video. For example folder "FLAMING SUB" for the video "Flaming mountain"
- Open "Safari browser". Open youtube.com.
- Search for "西游记连环画" (that means "Picture story book Journey to the West"
- You can find the video clip
https://youtu.be/Vjd4NSiYikk (西游记连环画火焰山 Flame Mountain)

- Copy the video adress https://youtu.be/Vjd4NSiYikk, open the webpage "y2mate.com", paste this adress and dowload Flame Mountain video to your ipad.
- Rename this video as "flaming-mountain.mp4"
- Copy or move the video "flaming-mountain.mp4" to the folder "FLAMING SUB"
- In this folder create a new (empty) html file named as "a1-capture-sub-flame.html"
- Return to this post, scroll down to see SOURCE CODE of a1-capture-flaming.html, tap button "Copy code to clipboard"
- Return to the empty new file in Koder editor, paste the code there. (Koder automatically saves this file).
- Tap the name of this html to open it by using the Koder local browser

The following video show you how to use "a1-capture-sub-flame.html" to take a picture of the subtitle's text.
+ Type the number of seconds from which the video must to play
+ Tap the button "Begin"
Please watch the video carefully.
+ Whenever you see the subtitle line appear, immediately tap the "Capture" button
+ After tapping the "Capture" button 14 times, the video automatically stops.
+ Tap the button "Make last canvas" then tap "To image"
+ Now you can see that an image is created. Press this image then choose "Add to Photos".

The following video show you how to use the app "Photo Translator (by Tiemei Yan)" to convert our image to text

The following video show you how to use the app "Google translate"; to translate the above text into other language

The following video show you how to use the file "a3-play-sub-flame.html" to play the embedded video "Flame Mountain" with the subtitles just made by us

B- RE-READ AND CORRECT THE MACHINE TRANSLATION

In part A above we used machine translation. Machine translation needs to be reviewed to correct words or sentences that are confusing, incorrect, or sound unnatural. This job is difficult because the number of people who are fluent in both languages, the source language and the target language are very few.
Nor can we spend money to hire experts to translate (Le jeu n'en vaut pas la chandelle). So you should try to do this yourself.

You should have some dictionary apps or use online dictonaries.

You should also download to your ipad and read ebooks like “Journey to the West” (english language), or Tây du ký (vietnamese language) …

Sometimes you need to use “Ask google for the meaning” for example let ask "what mean 西天”.
One of the answers is:
https://www.wordsense.eu/西天/
where we see
Noun
西天
(Buddhism) the western skies; ancient India
(Buddhism) Western Paradise; Sukhavati
(euphemism) heaven, the place that a person goes to after death

And in the ebook "Journey to the West", 西天 is translated as Western Heaven (they pressed on toward the Western Heaven).

C- SOURCE CODE OF HTML FILES

I will publish the code of html files in next post

SOURCE CODE of a1-capture-flaming.html

<!DOCTYPE html> 
<html>

<meta charset="utf-8"> 
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

  <script src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>

<style>
      #div1 {
        position: absolute;
        left: 40px;
        top: 180px; 
        width: 60px;
        height: 60px;
        min-width: 30px;
        min-height: 30px;        
        /* background-color: #ccc; */
        border: 1px solid red;
      }

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

	body{
	margin:0px;
	padding:0px;
	font-size: 16pt;
	background-color:#d7ecd9; /* #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;
	}

.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="flaming-mountain.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>

<div id="bag">
<div id= "main1">

  	<div class="box" id="div1">
    	<div class="dragger"></div>
    </div>

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

<textarea id="area1new" style="width:288px;height:50px">
</textarea>
<textarea id="area1" style="width:380px; height:50px; font-size:12pt">
</textarea>
<br>
<button onclick="copy('area1new')">Copy parameters</button>
From (sec)
<input type="text" id="bBox" size="10" value="0" style="text-align:center">
<button id="begBut" onclick='vidBegin()'>Begin</button>


<input type="button" onclick="shoot()" style="background: #66FF00; font-size:22pt; font-weight:bold; font-family:Georgia; color:#006400; font-style:italic" value = "Capture">
  <br/>
  <button type="button" onclick="pauseVid();">Pause</button>
    <button type="button" onclick="playVid();">Play</button>
<input type="text" id="nnBox" size="10" value="" style="text-align:center">
 <input type="button" onclick="screenshot()" style="background:gold" value="Make last canvas">
  <input type="button" onclick="canvas2img()" style="background:gold" value="To image">
<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="a1-capture-flaming.html">Download</a>
(use it only when this file is uploaded on internet)
  <br>
</div>

<script>

$('#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(){
  		outputd.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(){ 
	     nn = 0;
	     	outputd.innerHTML = '';
	     document.getElementById('imgDiv').innerHTML = '';
          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');
let outputd = document.getElementById('output');

useW = 720;

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

function onloading(){ 
leftV = '31px'; topV = '562px' ; widthV = '645px';
heightV = '35px';

ele.style.left = leftV
ele.style.top = topV
ele.style.width = widthV;
ele.style.height = heightV;

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

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

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

$('#main1').css({'width': wpx});
$('#main1').css({'height': hpx});
// maind.style.width = wpx
// maind.style.height = hpx

$('#bag').css({'width': wpx});
// bagd.style.width  = wpx
$('#bag').css({'height': hpx});
// bagd.style.height = hpx 
}

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

	   xx = "[-]" + Math.round((video.currentTime - 0.800)*1000)/1000 + "[-]"
	 if(nn == nnMax){
	$('#bBox').val(Math.round((video.currentTime )*10)/10 + '');
}
        point.push(xx);
   nnT = nn + '/' + nnMax
document.getElementById("nnBox").value = nnT

         // snapshots.push(canvas);
        // output.innerHTML = '';
        // for (var i = 0; i < 150; i++) { 
            outputd.appendChild(canvas);
        // }
     }else{
        dw = Math.round(parseInt((ele.style.width).replace('px',''))*0.8);
         var canvas = document.createElement('canvas');
        canvas.width = dw
        canvas.height = 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 + "#"+
"NOTE " + $('#bBox').val();
// alert(xx);
	   ctx.fillStyle = "black";
	   ctx.fillText(xx, 230, 14); // 16
        outputd.appendChild(canvas);
	   pauseVid();
	   nn = 0;
	   // snapshots = [];
	   alert("Click buttons (Last canvas),\n(To images),\n" +
	            "(New), (Play)");
     }
    }

var ratioWH, ratio;

    function capture() {
pp = "'"
inf = 'leftV = ' + pp + ele.style.left +pp + '; topV = ' + 
pp + ele.style.top + pp +
        '\nwidthV= ' + pp + ele.style.width + pp + '; heightV = ' + pp + ele.style.height +pp;
        
$('#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 + 
	    '; dw = ' + dw + '\ndh = ' + dh + 
	    '; ratio = ' + vidW + '/' + useW + '; ratioWH = ' +  		video.videoWidth + '/' +  video.videoHeight;  

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

//// SELECT, COPY TO CLIPBOARD
var copy = function(elementId) {
	var input = document.getElementById(elementId);
	var isiOSDevice = navigator.userAgent.match(/ipad|iphone/i);
	if (isiOSDevice) {
		var editable = input.contentEditable;
		var readOnly = input.readOnly;
		input.contentEditable = true;
		input.readOnly = false;
		var range = document.createRange();
		range.selectNodeContents(input);
		var selection = window.getSelection();
		selection.removeAllRanges();
		selection.addRange(range);
		input.setSelectionRange(0, 999999);
		input.contentEditable = editable;
		input.readOnly = readOnly;
	} else {
	 	input.select();
	}
	document.execCommand('copy'); 
	alert('The content has been copied to the clipboard');
	$('#' + elementId).blur();
}


/* gdrive flaming mountain
https://drive.google.com/u/0/uc?id=1J9gAIAZMYbYzUZoxR88Qplv6XBq80ddM&export=download#.mp4
*/

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

Download

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