DOWNLOAD HTML CODE FOR THE POST Play closed subtitle with yt video

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

<style>
body{
font-family:Arial; 
font-size:14pt;
background-color:#8F916B;
margin:0px; padding:0px;
color:white;
}

button, input, textarea, span{
font-size:14pt;
}

textarea{
width:620px; 
height:200px;
}

#header1{
color:white; font-weight:bold; 
width:720px; 
height:40px;
background-color:#006699; padding-top:3px; padding-bottom:3px;
top: 0px;
left: 0; 
right: 0; 
margin: 0 auto; 
}

#header1 td {border: none;}

span{font-size:16pt}

.me{
color: #AAFF00;
font-size:20pt;
}

.select {
cursor: pointer;
display: inline-block;
position: relative;
font: normal 12pt Arial, Sans-Serif;
color: black;
border: 1px solid #ccc;
}

.my-select-menu::part(button) {
color: white;
background-color: #f00;
padding: 5px;
border-radius: 5px;
}

.my-select-menu::part(listbox) {
padding: 10px;
margin-top: 5px;
border: 1px solid red;
border-radius: 5px;
}

</style>
</head>

<body>
<div align="center">
<div style="width:700px; padding:10px; text-align:justify">
Let’s use the youtube video “Little red riding hood in chinese”<br>
<b>https://youtu.be/zvHovAPggEE</b>
<br>
This video has audio in Chinese (zh) with closed English (en) subtitles.<br>
Many videos on youtube.com have open (or hard, burned in) subtitles. We can't close or hide open subtitles. On youtube.com we rarely find videos with closed (soft) subtitles. Unlike open subtiles, with closed subtitles we can turn it off or choose to view subtitles in another language.<br>
When you know that the specific video possess closed subtitles, let use the website downsub.com to get srt file.<br>
But using html5 video tag on Ipad you cannot work with srt file. So you need to use the online srt to vtt service for the convert. <br>
If you like to learn javascript programming on ipad, you can install ios app "Koder code code editor". You can write your own or look online for js code for this porpuse
<br><br>
Usually people use html5 video with text tract to display subtitles.
The advantage of this way is that the html code is short and easy to remember.
The downside is that the video has to be downloaded to the ipad (or PC). This will reduce the capacity of ROM memory.
Also you have to learn more about style (CSS) for text tract (so far I can't control line-height for subtitles)
<br><br>
This post covers another way. It is displaying subtitles below (or next to) the embedded yt video using google iframe api.
Using this way memory is not wasted and the CSS for the div is rich and easy to learn.
However, you only understand this method well when you know how to use javascript to get 3 arrays from the srt file ( start, end, sub arrays). Then use the setTimeout and player.getCurrentTime functions to control the display of subtitles
</div>
<br>
<div id="header1">
<div id="curTimeDiv" style="margin-left:5px;padding-top:3px;width:100px;text-align:right;font-weight:normal; display:inline-block">
time
</div>
<div style="margin-left:0px;padding-top:3px;width:10px;text-align:center;font-weight:normal;display:inline">
/
</div>
<div id="durationDiv" style="margin-left:0px;padding-top:3px;width:100px;text-align:left;font-weight:normal;display:inline-block;">
duration
</div>
<input type="text" id="bBox" size="10" value="0" style="text-align:center; color:black">
 
<button onclick="beginV()">Begin</button>
<button type="button" onclick="pauseYoutube();">Pause</button>
<button type="button" onclick="playYoutube();">Play</button>
</div>
<div id="player" style="background-color:black;margin:0px;margin-bottom:0px">
</div>

<div id="subDiv" style="width:640px;min-height:78px;background-color:#006699; padding-top:14px; padding-bottom:6px;padding-left:40px; padding-right:40px; font-size:20pt; text-align:left; font-family:Helvetica; line-height:140%; color:yellow;margin-top:-6px">
</div>
<br>
<span style="font-family:Times; font-size:18pt">
<b>Show vtt subtitles in div underneath the player (yt iframe api)</b>
<br>
All files are created on Ipad, using Koder code editor app
<br><span style="color: #FF160C; font-size:18pt">
Tap button "Begin" or type start point (in seconds) then tap "Begin"</span></span>
<br>
<br>
SELECT VTT SUBTITLE FILE<br>
in en, fr, de, ru or vi (vietnamese) language
<br>
<select name="select" size="8" class="select">

</select>
<br><br>
DOWNLOAD FILES TO YOUR IPAD
<br>
<div style="width:620px; background-color:white; overflow:auto; padding:10px; line-height:160%;text-align:left; color:#333">

<a href="https://drive.google.com/uc?export=download&id=1uNkOyAAdzjCM8LZX8ZFRBQO4xNG89tdG">a5-play-vtt.zip</a>
<br>
Instead of downloading each file below, you just need to download this zip file
<br>
<a href="https://drive.google.com/uc?export=download&id=1KxBt06hMJyfyZpvU10vXj1a7zVxpSVna">a5-play-vtt-red-hood.html</a>
<br>
<a href="https://drive.google.com/uc?export=download&id=1zJmVBD64ZLonNEj17Ufc5A3-EjbuZ8of">a5-en-red-hood.vtt</a>
<br>
<a href="https://drive.google.com/uc?export=download&id=1vDXgK12-IuWyXiEnDMDobqjnLXFPmlY2">a5-fr-red-hood.vtt</a>
</a>
<br>
<a href="https://drive.google.com/uc?export=download&id=1dOqNEZztEp_Hc61Dx42hvj7Uqn4KyQZm">a5-de-red-hood.vtt</a>
<br>
<a href="https://drive.google.com/uc?export=download&id=1SoIAu8eojmRl9kNw3ITbQqjMNj9pwJNw">a5-ru-red-hood.vtt</a>
<br>
<a href="https://drive.google.com/uc?export=download&id=1rgSIXR3eJsipPbmcGOkFupizRM1IWH2z">a5-vi-red-hood.vtt</a>

</div>

<br>HELP<br>
<div style="color:black; background-color:#ffffe0;display:block;width:610px;height:300px; overflow:auto;padding:15px;line-height:150%; text-align:left">

You need to download one html file and several vtt files into the Documents folder on your ipad. 
<br>
Then tap share button (an open rectangle with an arrow pointing from bottom to top), select "Copy to Documents".
</div>
<br>
CURRENLY USED VTT FILE
<br>
<textarea id="vttArea" style="color:black; display:block">
WEBVTT

1
00:00:01.000 --> 00:00:05.300
<span class="me"><b>DEMO</b> To make VVT subtitle you need to use screen snapshot, scan and translator apps.</span>

3
00:00:05.500 --> 00:00:09.620
<span class="me"><b>To speed up this tast </b>you need use Javascript programming on ipad</span>

4
00:00:11.640 --> 00:00:12.440
Once upon a time

5
00:00:12.700 --> 00:00:14.700
there was a lovely little girl.

6
00:00:17.000 --> 00:00:20.100
She always wore a red riding hood made by her grandma.

7
00:00:21.620 --> 00:00:25.520
Everyone called her Little Red Riding Hood.

8 
00:00:26.160 --> 00:00:27.600 
<span class="me">[vietnamese] </span>Xin chào, Cô bé quàng khăn đỏ! 

9 
00:00:27.860 --> 00:00:28.360 
Xin chào! 

10 
00:00:28.760 --> 00:00:30.620 
Bạn sẽ đi đâu, Cô bé quàng khăn đỏ? 

11 
00:00:31.560 --> 00:00:32.220 
Một ngày 

12 
00:00:32.680 --> 00:00:35.760 
Mẹ của Cô bé quàng khăn đỏ đã nhờ cô ấy giúp đỡ. 

13 
00:00:37.840 --> 00:00:38.340 
Cưng ơi

14 
00:00:38.780 --> 00:00:40.080 
Bà ngoại cảm thấy không khỏe lắm 

15 
00:00:40.560 --> 00:00:43.520 
Con sẽ đưa những chiếc bánh quy và bánh mì này cho bà chứ? 

16 
00:00:44.200 --> 00:00:46.760 
Hãy chắc chắn rằng con đi thẳng đến nhà bà, được chứ? 

17 
00:00:47.300 --> 00:00:47.860 
Đồng ý! 

18
00:00:48.200 --> 00:00:58.000
<span class="me">In order for the demo code not to be too long, I will stop showing the subtitles from here on out</span>

</textarea>
<br>
</div>

<script>

vttArr = [
"a5-en-red-hood.vtt",
"a5-fr-red-hood.vtt",
"a5-de-red-hood.vtt",
"a5-ru-red-hood.vtt",
"a5-vi-red-hood.vtt"
];

var select = document.querySelector('select');

function selFunction(){
for (var i = 0; i < vttArr.length; i++) {
opt = document.createElement('option');
opt.text = vttArr[i]
select.add(opt);
}
select.addEventListener('change',function() {
// alert(select.value);
readTextFile(select.value);
});
}

/////////

gInterval = 10;

$(document).ready(function(){
selFunction()
interval = setInterval(myTime, gInterval); 
});

var curTime;

function myTime(){ 
curTime = player.getCurrentTime();
document.getElementById('curTimeDiv').innerHTML = sformat(curTime);
// if(curTime >0){
if(YT.PlayerState.PLAYING){
subPlay(); 
}
}

///////////////////4A- PLAY VIDEOS //////////////////

normalW = '720';
normalH = Math.round(720*349/620).toString();

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: normalH,
width: normalW,
videoId: 'zvHovAPggEE', // hvEtErLxPm4',
playerVars: {'autohide': 0,
'cc_load_policy': 0,
'controls': 2,
'disablekb': 1,
'iv_load_policy': 1, /* 3 */
'modestbranding': 1,
'playlist': 'zvHovAPggEE',
'rel': 0,
'showinfo': 0,
'start': 0 /* 3 */
},
events: {

'onStateChange': onPlayerStateChange
// 'onError': onPlayerError
}
});
}

var playerState;

function onPlayerStateChange(event) {
if(YT.PlayerState.PLAYING){
document.getElementById('durationDiv').innerHTML = 
sformat(player.getDuration());
}
}

function playYoutube() {
player.playVideo();
}

function pauseYoutube() {
player.pauseVideo();
}

function sformat( s ) {
var fm = [
Math.floor(Math.floor(s/60)/60)%60, //HOURS
Math.floor(s/60)%60, //MINUTES
Math.floor(s%60) //SECONDS
];
var xx = $.map(fm,function(v,i){ 
return ( (v < 10) ? '0' : '' ) + v; }).join( ':' );
var yy = xx.replace(/^0:|^00:|^0/g,'');
zz = yy.replace(/^0/g,'');
return zz
} 

// var dif

function beginV(){
// interval = setInterval(myTime, gInterval); 
init();
vidBegin()
}

function init() {
var subtitle = document.getElementById('vttArea');
cont = subtitle.value;
vParser(cont); 
}

point = [];
en = [];
sub = [];

function vParser(vtt) {
point = [];
en = [];
sub = [];

var lines = vtt.trim().replace('\r\n', '\n').split(/[\r\n]/).map(function(line) {
return line.trim();
});
var start = null;
var end = null;
var payload = null;
for (var i = 0; i < lines.length; i++) {
if (lines[i].indexOf('-->') >= 0) {
var splitted = lines[i].split(/[ \t]+-->[ \t]+/);
if (splitted.length != 2) {
throw 'Error when splitting "-->": ' + lines[i];
}
// Already ignoring anything past the "end" timestamp (i.e. cue settings).
start = to_sec(splitted[0]);
point.push(start);
end = to_sec(splitted[1]);
en.push(end)
} else if (lines[i] == '') {
if (start && end) {
start = null;
end = null;
payload = null;
}
} else if(start && end) {
if (payload == null) {
payload = lines[i];
} else {
payload += '\n' + lines[i];
}
sub.push(payload);
}
} //for
}

function to_sec(s){
var match = s.match(/^(?:([0-9]+):)?([0-5][0-9]):([0-5][0-9](?:[.,][0-9]{0,3})?)/);
if (match == null) {
throw 'Invalid timestamp format: ' + s;
}
var hours = parseInt(match[1] || "0", 10);
var minutes = parseInt(match[2], 10);
var seconds = parseFloat(match[3].replace(',', '.'));
return seconds + 60 * minutes + 60 * 60 * hours;
}

function vidBegin(){ 
player.seekTo(Number(document.getElementById('bBox').value),
true);
player.playVideo();
}

div1 = document.querySelector('#subDiv');
bul = false;
count = 0

function subPlay(){
if(curTime > point[count]){
bul=true
}
if(bul){
div1.innerHTML = sub[count]
bul = false
}
if(curTime > en[count]){
bul=true
}
if(bul){
div1.innerHTML = '';
bul = false
count++
}
}

function readTextFile(file)
{
var rawFile = new XMLHttpRequest();
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
var allText = rawFile.responseText;
// alert(allText);
document.getElementById("vttArea").value = allText
}
}
}
rawFile.send(null);
}

</script>
</body>
</html>
JAVASSCRIPT ON IPAD (to see the list click ← then click ≡ and ⌄)

DOWNLOAD HTML CODE FOR THE POST Play closed subtitle with yt video

Popular posts from this blog

PHP JQUERY PROXY DEMO

EXAMPLE ON MODIFYING HTML5 MEDIAELEMENT.JS PLAYER

PLOTTING FUNCTION GRAPH USING JAVASCRIPT (Part 2)
