Follow

Create Interactive video for Video Installations and Urban Screen Experiences

 

Table of Contents

1.  Scope

1.1 How does it work?.

1.2 Definitions.

2. Recipe

2.1 Ingredients.

2.2 Preparation.

2.3 Method.

2.3.1 Create the triggers.

2.3.2 Update the code.

 

1  Scope

This article describes how to create a single screen experience such as for a video installation or urban screen experience. It’s called “single screen” because only one instance of the video can be playing at any time. This approach is not suitable for general web video for which you must use one of the other code snippets.

1.1  How does it work?

The code snippet we provide must be embedded into a web page where it will load and play a YouTube video.

As the video plays, the code watches the video and sends triggers to your Conducttr project to tell it how far along the playback time line it is. It doesn’t do this continually – you must identify the cues and modify the snippet before embedding it.

The code can also ask your project if it should be playing a different video. For example, you might ask the audience to vote for which video to play next or you might play a different video depending on how many people have gathered in a room – less than 5 people, play video A; more than 5, play video B. Again, the code doesn’t continually ask Conducttr which video to play next, you identify the start and end cues and the code will poll every 5 seconds during this period.

1.2  Definitions

Client - Typically, a client is a computer application, such as a web browser, that runs on a user's local computer or workstation and connects to a server as necessary.

Cue – A specific moment in the video’s reproduction, when you want to start an interaction.

Polling – Interval of time during which the code will “ask” actively Conducttr for the nextvideo.

Server – Processing or content generation that is done on the web server or other server, as opposed to on the client computer where the web browser is running. 

 

2  Recipe

Each recipe has the following sections:

  • Ingredients           - what you need to complete this project
  • Preparation          - how to prepare
  • Method                 - step-by-step guide

 

2.1  Ingredients

You will need:

I.    A website. This recipe will work with any website including free website builders like Wix.com

II.   A YouTube video or videos

III.  The “single screen code snippet”

IV.   Basic text-ending software to edit the code such as Notepad

V.    A Conducttr project

 

2.2  Preparation

Before following the Method section, please do the following:

I.   Create a Conducttr project

II.   Add a new Video Asset that links to the YouTube video

III.  Create a new Project Attribute called NextVideo of type Integer

IV.  Create new API entry inside Conducttr (call it Website)

V.   Create a new method called “unauth/NextVideo”

VI.  It’s not a requirement that you create a storyboard for the interaction but you may find it helpful. The image below shows a number of screen grabs from the video uploaded onto the Whiteboard. Vertical guides were then added with the timeline cues.
The benefit of this becomes clear when you start to write and add the Conducttr content that accompanies the video interaction.

 

2.3  Method

Now you have all the ingredients and you’ve followed the preparation, you’re now ready to configure the project. The steps are:

I.    Create unauth API triggers in Conducttr that will fire when the video calls them

II.   Update the code snippet with details from your project

III.  Embed the code at the website

IV.   Check log to see that video is calling Conducttr as expected

 

2.3.1  Create the triggers

Create an unauth API trigger for each video cue – like the one shown below

 

2.3.2  Update the code

When you open the code snippet, the area that you edit is between two comment lines. The start of the editable area says “Edit the information below” – as shown in the image.

You need to update the following information:

  • CONSUMER  KEY – you’ll find this in the Authentication section of the API pop-up
  • PROJECT ID – this is found in the top header bar
  • VIDEOS – make a list of all the videos you’re going to play. Each vide is identified by the code immediately after the first / - as shown below.
  • VIDEO WIDTH AND HEIGHT
  • VIDEO JOURNEY – this tells the code what to do with each video. The image below shows an example. Video 2 for example (which will be “tRErcBV3KZE”) should next play video 3. 
  • TELL_CONDUCTTR_IM_HERE – this is the array of video cues. The first number indicates the video (i.e. the position in the VIDEOS list), the second text is the time in minutes:seconds  in the playback that an API call to Conducttr should be made and the final text is the API trigger
  • ASK_FOR_NEXT_VIDEO – this tells the code if it should check for any updates in Conducttr which might cause it to play another video.
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments