======Subtitles and Closed Captions======

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 [[https://vimeo.com/showcase/8066220/video/622564037|video]] introducing some of of the concepts described below. 

  



===== Installation =====

You need a computer with a running blocks server and a web browser to use this application note.

Here's a PIXILAB-blocks-root folder containing everything you need for this application
{{ :blocks:app-note:subtitles:subtitles-root.zip |Download this ZIP file and unpack it}}

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:

  - Start Blocks.
  - Open the editor using the Admin button.
  - Log in using the name admin and the password pixi.
  - Open a second browser window and type in the URL: http://localhost:8080/spot/
  - 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 =====

In the display spot you should be able to see a video with subtitles in two languages on the screen.
 
{{:blocks:app-note:subtitles:displayspotoutput.jpg?800|}}

The two subtitle tracks will be played back in sync with the video. 


You can now try to use the visitor spot and locate to the same screen.  Select your preferred language on the welcome page.

{{:blocks:app-note:subtitles:language.jpg?300|}}

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|}}

You should now be able to see your preferred language subtitles on the visitor spot in sync with the video on the display spot.

{{:blocks:app-note:subtitles:visitorinsync.jpg?800|}}

===== How it is done=====

This application is very similar to a normal audio guide application where we synchronise audio rather than the subtitles. 

The root block is a synchroniser. The composition named DisplaySpotContent has a matching tag to the display spots default tag. 

{{: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 have the //Locally Synchronised// checkbox ticked. 

{{:blocks:app-note:subtitles:video.jpg?800|}}

The rest of the Compositions is tagged with tags used to match to a selected language on the visitors spot.  Note the checkbox //Override Dimensions// used in scenarios where we use different layouts in the same synchronizer. 
{{:blocks:app-note:subtitles:locatedcontent.jpg?800|}}

===== 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:

<code>
.subtitle {
background-color: black; 
}

.subtitle > span {
color: red;
}

</code> 
This selector assumes the custom css class //red// is applied to the subtitle block.

<code>
.subtitle.red > span {
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.