Differences

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

--- blocks:app-note:subtitles [2022-01-03 12:31] – [Try it] mattias
+++ blocks:app-note:subtitles [2025-12-09 07:47] (current) – admin
@@ Line 1: / Line 1: @@
 ======Subtitles and Closed Captions======
-Work In Progress!
+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.
-This application note provides an example of how to build content using the subtitle feature of Blocks..
+{{vimeo>622564037?full}}
-The examples cover features such as local synchronised subtitles, subtitles provided on a visitor spot that synchronises to a display spot.
@@ Line 17: / Line 16: @@
 {{ :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:
@@ Line 27: / Line 26: @@
   - Open a third browser window and type in the URL: http://localhost:8080/spot?mobile=Mob1, this is your visitors view, representing the Visitor Spot.
+Make sure the example blocks have been published to the display spot and the visitor spot respectively
+{{:blocks:app-note:subtitles:editor.jpg?800|}}
 ===== Try it =====
@@ Line 41: / Line 43: @@
 {{:blocks:app-note:subtitles:language.jpg?300|}}
-Then use the locator to locate the displayspot with its location ID that is set to 10 in this example.
+Then use the locator to locate the display spot with its location ID that is set to 10 in this example.
 {{:blocks:app-note:subtitles:locator.jpg?300|}}
@@ Line 57: / Line 59: @@
 {{:blocks:app-note:subtitles:displayspotcontent.jpg?800|}}
-Inside the composition we can see the, note the videos //Local Sync Slave// checkbox that is unticked since this video is our master. The subtitle blocks has the Locally Synchronised checkbox ticked.
+Inside the composition we can see the, note the videos //Local Sync Slave// checkbox that is unticked since this video is our master. The subtitle blocks have the //Locally Synchronised// checkbox ticked.
 {{:blocks:app-note:subtitles:video.jpg?800|}}
@@ Line 64: / Line 66: @@
 {{:blocks:app-note:subtitles:locatedcontent.jpg?800|}}
-===== Style the subtitles=====
+===== Subtitle .srt files=====
-As everything else in  Blocks the subtitles can be styled using CSS. The selectors to use looks as in this example that styles any subtitle in the block:
+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>
+
+:00:02,000 --> 00:00:05,450
+You're a fool for traveling alone,
+so completely unprepared.
+
+:00:05,750 --> 00:00:08,800
+You're lucky your blood's still flowing.
+
+: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:
 <code>
@@ Line 84: / Line 118: @@
 color: red;
 }.
 </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.