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 13:12] – [Style the subtitles] 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 67: Line 68:
 ===== Subtitle .srt files===== ===== 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. 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 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.  The formatting looks like this example taken from the english exemple subtitle in this application note. 
  
Line 86: Line 87:
  
  
-===== Formatting and styling of the subtitles=====+===== Basic inline formatting of the subtitles=====
  
-It is possible to apply some basic formatting inside the .srt file itself, which may be useful if a single word or sentence should be formatted.+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> <code>
Line 96: Line 97:
 Font color – <font color="color name or #code">…</font> (as in HTML) Font color – <font color="color name or #code">…</font> (as in HTML)
 </code> </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 116: 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.