Work In Progress!

This application note provides an example of how to build content using the subtitle feature of Blocks.. The examples cover features such as local synchronised subtitles, subtitles provided on a visitor spot that synchronises to a display spot.

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 Download this ZIP file and unpack it

then follow the instructions in the 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:

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

If you open the display spot you should be able to see a video with subtitles in two languages on the screen.

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.

Then use the locator to locate the displayspot with its location ID that is set to 10 in this example.

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

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.

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.

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.

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:

.subtitle {
background-color: black; 
}

.subtitle > span {
color: red;
}

This selector assumes the custom css class red is applied to the subtitle block.

.subtitle.red > span {
color: red;
}.