Trigger video play from another client

The following developer blog entry describes how to control videos across devices. In this setting one device acts as a remote control and the other device is the player of the video. This developer blog entry works with SiteKiosk Online for Windows and Android clients.

In this example the project consists of two pages. A player page for the client which displayes the video and a remote page for the client which displays the play button.

1. Create a project using the Empty template. 

2. Press the Settings button in the toolbar on the top and select "Variations" in the treeview.

3. Press the button "Create one variation per client" and check the checkbox Assigned clients for two clients. Close the dialog with save.

 

 

4. Select the page in the Pages section and press the Edit button. Go to the last section Label, user rights, playlog and give the page the title player.

5. Go to the section Assign variations, use the "Activate assignment" switch and select under "Select variations" the variation on which the video should be displayed.

 

6. Add a video element to the "player" page using the "+ New" button.

7. Press the Edit button to open the properties dialog of the video element.

8. In the Video settings section upload a video file and disable "Automatic playback start" and "Loop".

9. Go to the last section Label, user rights, playlog and give the video the tag name "video1" under Tags.

 

10. In the Pages section (upper right) add another page using the + button, select "Empty (no template)" and give it the title remote. 

11. Double click on the "remote" page, go to the "Assign variations" section, press the "Activate assignment" button and select variation (client/s) on which the play button for the video should be displayed under "Select variations".

12. Close the properties dialog with pressing the "Save" button.

 

 

13. Enter &expert in the URL address line at the end of the URL.

 

14. Select the URL and press Enter to reload the project.

15. Add an image element to the remote page using the "+ New Button" to create a play button for the video.

16. Double click to open the properties dialog of the image element.

17. Upload an image file in the Image section.

18. Press the Expert Edit button at the bottom left.

 

19. Go down in the Expert section and enter triggerActions  in the Add properties edit box.

20. Then add the following lines in the box on the bottom and select JSON object:

{
  "pressed": {
    "actions": [
      {
        "type": "sendCommand",
        "command": "call-element-method",
        "commandArguments": {
          "methodArgs": [
            true
          ],
          "methodName": "play",
          "targetTag": "video1"
        },
        "targetMachine": "tags=Remote,Player"
      }
    ]
  }
}

 

21. Press the Add button and close the properties dialog of the image element with pressing Save.

Note: Under methodName you can also use the following methods:

interactivePause pauses the video 

interactiveStop stops the video

22. Leave the "Projects" section, go to the "Monitoring" page and create two tags "Player" and "Remote" (without quotation marks)

23. Add the respective machine to the tag.

 

24. Go back to the project and publish the project to the two clients.

25. After publishing, the Remote page with the Play button is displayed on the Remote client and the Player page with the video is displayed on the Player client. 

Test whether clicking the created play button plays the video.

 

Using tags to display variants of a SiteCaster project on different machines

If you want to display variants of a SiteCaster project that differ only in a few elements, you can use the tag feature in SiteCaster as a display condition.

In the following example, a SiteCaster project is published on two machines to display two variants of a project:

Log into your SiteRemote team and select the Monitoring tab. To generate tags for your machines, right click on a machine in the tree view and select Assign Tags.

 

Then enter the name of your tags e.g. Terminal 1 and Terminal 2 press Add and select it using the checkbox. Confirm the setting with Save.In SiteCaster, generate your sample project using the empty template. Use the Add button to add a swap container to the project. Insert two different images into the swap container. In order to use the Tag display condition, you will need to enable the expert mode in SiteCaster. To do so, you need to insert &expert at the end of the URL in the URL address field of your browser and then press Enter to reload the project. 

After activation of the expert mode you see the Expert Edit button in the tool bar.  

Then select one of the images and open the properties dialog by double-clicking on the image. Go to the section Display condition and select the Display under these conditions option. Activate the check box Tag and enter the tag name Terminal 1. Close the properties dialog with pressing the Save button. Activate the same setting on the other image with the tag name Terminal 2. After publishing the project to both clients the first image is displayed on the device with the tag Terminal 1 and the second image on the device with the tag Terminal 2. The described scenario can be extended with further tags as you like.