PLAY CLOSED SUBTITLE WITH VIDEO (iframe api). Test file a5-play-vtt-red-hood.html
Let’s use the youtube video “Little red riding hood in chinese”
https://youtu.be/zvHovAPggEE
This video has audio in Chinese (zh) with closed English (en) subtitles.
Many videos on youtube.com have open (or hard, burned in) subtitles. We can't close (or hide) open subtitles. On youtube.com sometimes (rarely) we 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.
When you know that the specific video possess closed subtitles, let use the website downsub.com to get srt file.
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.
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 convert.
Usually people use html5 video with text track 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 search for documents on style (CSS) for text track (I am so annoyed because so far I can't control line-height for subtitles)
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.
At this point I have avoided learning about subtitle track styles, just using what I already know, regular css.
Both srt and vtt can be used. No need to change from srt to vtt format.
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 setInterval and player.getCurrentTime functions to control the display of subtitles
Of course users are not required to have knowledge of javascript. Everyone can consider there is a black box containing html, css, javascript in it and just knowing what is input, what is output is enough.
https://youtu.be/zvHovAPggEE
This video has audio in Chinese (zh) with closed English (en) subtitles.
Many videos on youtube.com have open (or hard, burned in) subtitles. We can't close (or hide) open subtitles. On youtube.com sometimes (rarely) we 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.
When you know that the specific video possess closed subtitles, let use the website downsub.com to get srt file.
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.
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 convert.
Usually people use html5 video with text track 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 search for documents on style (CSS) for text track (I am so annoyed because so far I can't control line-height for subtitles)
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.
At this point I have avoided learning about subtitle track styles, just using what I already know, regular css.
Both srt and vtt can be used. No need to change from srt to vtt format.
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 setInterval and player.getCurrentTime functions to control the display of subtitles
Of course users are not required to have knowledge of javascript. Everyone can consider there is a black box containing html, css, javascript in it and just knowing what is input, what is output is enough.
time
/
duration
Show vtt subtitles in div underneath the player (yt iframe api)
All files are created on Ipad, using Koder code editor app
Tap button "Begin" or type start point (in seconds) then tap "Begin"
SELECT VTT SUBTITLE FILE
in en, fr, de, ru or vi (vietnamese) language
DOWNLOAD FILES TO YOUR IPAD
Instead of downloading 1 html file and 5 vtt files you can download just 1 zip file
a5-play-vtt.zip
a5-play-vtt-red-hood.html
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
a5-play-vtt-red-hood.html
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
HELP
You need to download one html file and several vtt files into the Documents folder on your ipad.
Then tap share button (an open rectangle with an arrow pointing from bottom to top), select "Copy to Documents".
Then tap share button (an open rectangle with an arrow pointing from bottom to top), select "Copy to Documents".
CURRENLY USED VTT FILE
