PIXILAB Wiki

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
blocks:app-note:subtitles [2022-01-03 12:48] – [How it is done] mattiasblocks:app-note:subtitles [2025-12-09 07:47] (current) – admin
Line 1: Line 1:
 ======Subtitles and Closed Captions====== ======Subtitles and Closed Captions======
  
-This application note provides an example of how to build content using the subtitle feature of Blocks.. +This application note shows how to use the Subtitle Blocks, including features such as locally synchronized subtitles and subtitles playing on Visitor Spot synchronized to a Display Spot. Here's a video introducing some of of the concepts described below.  
-The examples cover features such as local synchronised subtitles, subtitles provided on a visitor spot that synchronises to a display spot. + 
 +{{vimeo>622564037?full}}
  
      
Line 15: Line 16:
 {{ :blocks:app-note:subtitles:subtitles-root.zip |Download this ZIP file and unpack it}} {{ :blocks:app-note:subtitles:subtitles-root.zip |Download this ZIP file and unpack it}}
  
-then follow the instructions in the [[https://int.pixilab.se/docs/blocks/app-note/start|general setup section.]]+then follow the instructions in the [[blocks:app-note:start|general setup section]].
  
 Once you've done the general setup, copied the files and pointed your Blocks server to this root folder, follow these steps to run this application: Once you've done the general setup, copied the files and pointed your Blocks server to this root folder, follow these steps to run this application:
Line 65: Line 66:
 {{:blocks:app-note:subtitles:locatedcontent.jpg?800|}} {{:blocks:app-note:subtitles:locatedcontent.jpg?800|}}
  
-===== Style the subtitles=====+===== Subtitle .srt files===== 
 + 
 +The files used for subtitles in Blocks is .srt aka [[ https://en.wikipedia.org/wiki/SubRip|SubRib files]]. It is basic text files that is easy to edit in any text editor. Thera are also more professional subtitle editors that can be used for creating such files. It is important that the text file is encoded with utf-8. This method makes it easy to make corrections to the subtitles without having to re-render a whole video file.  
 +The formatting looks like this example taken from the english exemple subtitle in this application note.  
 + 
 +<code> 
 +1 
 +00:00:02,000 --> 00:00:05,450 
 +You're a fool for traveling alone, 
 +so completely unprepared. 
 + 
 +2 
 +00:00:05,750 --> 00:00:08,800 
 +You're lucky your blood's still flowing. 
 + 
 +3 
 +00:00:09,250 --> 00:00:10,300 
 +Thank you. 
 +</code> 
 + 
 + 
 +===== Basic inline formatting of the subtitles===== 
 + 
 +It is possible to apply some basic formatting on the text inside the .srt file itself, which may be useful if a single word or sentence should be formatted. 
 + 
 +<code> 
 +Bold – <b>…</b> 
 +Italic – <i>…</i> 
 +Underline – <u>…</u> 
 +Font color – <font color="color name or #code">…</font> (as in HTML) 
 +</code> 
 + 
 +===== Styling of the subtitles=====
  
 As everything else in Blocks, also the subtitles can be styled using CSS. The selectors to use looks as in this example that styles any subtitle in the block: As everything else in Blocks, also the subtitles can be styled using CSS. The selectors to use looks as in this example that styles any subtitle in the block:
Line 86: Line 119:
 }. }.
 </code> </code>
 +
 +===== Other applications=====
 +
 +The subtitle block has additional use cases in addition to the standard subtitling, such as Closed Captions. Since the text can be styled and positioned anywhere on the screen (or even on other screen) it can also be used in any other application where one want to show some text in sync with a video for any purposes.