Follow

Create Personalized Interactive Video - Server Side

Check out the demonstration HERE

And find the code at GitHub.

Table of Contents

  1. Scope
  2. What does it do?
    2.1 How does it work?
  3. The Recipe
    3.1 Ingredients
    3.2 Preparation
    3.2.1       Setting up the web host
    3.2.2       Setting up the Conducttr project
  4. Method
    4.1 Edit and upload the code snippets
    4.2 Implement the logic in your Conducttr project
    4.2.1       Create the setup calls to configure the video player
    4.2.2       Create the triggers and actions to determine the interaction

 

1  Scope

This article describes how to create a personalized interactive video experience using Conducttr, YouTube videos and your own web server.

 

2  What does it do?

Every audience member can control their personalized path through a series of videos based on triggers they send from some other device. In the example below, a character from the video texts the viewer… the viewer replies… and the next video loads depending on the instruction given.

All the videos are hosted on YouTube and run on your webpage inside a Conducttr code snippet that listens for and sends instructions.

 

2.1  How does it work?

You’ll need a web server to host three code snippets (“index.html”, “video.php” and “api.php”), the Oauth library and a MySQL database.

The file “api.php” needs to be modified by adding the details of your database and details from your Conducttr project before being uploaded to your web host.

The three files and the Oauth library must be uploaded to the same folder in your Web host, otherwise you will need to change the path to “api.php” in “video.php” and the widget-addon, and the path to the Oauth Library in the “api.php.

The MySQL database remembers which audience member is watching which video. This allows many people to be active at the same time yet each watch a different video and have a personalized experience.

The server is able to send triggers to Conducttr based on video timeline cues (configured by you) and is able to change or select the correct video to play based on API calls from Conducttr.

The figure above shows how it all fits together:

  • the audience visits a web page (hosted on your server) and enters some identification, such as a mobile number, into a modified Conducttr solo sign-up form (“add on” code snippet). This information is sent to Conducttr and it’s also registered in the local database.
  • when the form is submitted the web page redirects to a new page that holds the first video (the file “video.php”). As the video plays, the page watches the video and sends triggers to your Conducttr project to tell it how far along the playback timeline it is (see image below). It doesn’t do this continually – you must identify the cues and configure your video player ( explain in point 3.3.2). You can use the timeline triggers to send content personalized to the audience member watching the video.
  • The audience is also able to send instructions to the video. All audience interaction goes to Conducttr and then Conducttr makes an API Call to the server. The server looks up the video details in the database and then plays the correct video (the file “api.php”)
  • As the author, you will configure a video list, the video size and the video triggers all inside Conducttr. Even if you need someone with more web development experience to set up the website, once that’s done you can fine tune and change the storytelling aspects without further coding.

 

 

3  The Recipe

This recipe has the following sections:

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

 

3.1  Ingredients

You will need:

I.   a web host

II.  a Conducttr project

III. YouTube videos

IV. Twilio account for mobile calls & SMS

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

 

Your web host will need:

  • PHP 5
  • MySQ
  • Code snippets from Conducttr (You can find all the files here):

              - The "index.html" code snippet

              - The “video.php” code snippet

              - The “api.php” code snippet.

              - The OAuth library 

 

3.2  Preparation

To prepare, you’ll need to:

  • Setup your web host
  • Setup your Conducttr project

 

3.2.1  Setting up the web host

 

I.  Register a domain name (e.g.  http://ww.zenfilms.com).  In this document will be using MYURL to indicate where you should replace with your domain name

II. Ensure that your server runs PHP release 5 or higher. Our code will not work with PHP 4

III.  Create a new MySQL Database on your web server.  In most hosts this can be done in the administration panel or via command line. Also the “api.php” file provides a method to create the database that can be called writing this URL in  your browser:

                     http://MYURL/api.php?action=create_db          

Note that only some ISPs allow this. If your ISP doesn’t allow it then you’ll have to create it manually with their admin tool

 

Below is an example of creating the database in GoDaddy:

  1. In the Databases section of the Hosting Control Panel, click the icon corresponding to the database you want to create.
  2. Click Add.
  3. Complete the fields. To allow direct access, click Additional Options.
  4. Verify the settings and click OK

 

 

3.2.2  Setting up the Conducttr project

I.  Create a Conducttr project

Organize your videos

II.  Add a new Video Asset and import links to your videos. This will make it easy to refer to them although we won’t publish anything this way. The videos on YouTube can be public or unlisted.

It’s not a requirement that you create a storyboard for the interaction but you will find it very helpful. The image below shows a number of screen grabs from the video uploaded onto the Whiteboard.

Each video will be referred to be a unique number, starting at 1 for the first video. Use the Whiteboard to label the videos and map the branching. The benefit of this becomes clear when you start to write and add the Conducttr content and logic.

 



Create the basic logic

III.  Create a new Audience Attribute called “NextVideo” of type Integer

IV.  Create a new API entry inside Conducttr called “Website”

V.  Create a new Solo Signup widget to collect the audience phone, with the Success URL pointing to the video page ( http:// MYURL /video.php )

 

 

 

3.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:

  • Edit and upload the code snippets to the web host
  • Implement the logic in your Conducttr project

3.3.1  Edit and upload the code snippets

First you need to edit the code snippets to add your database details and details from your Conducttr project. This will make the code snippets know which database and project you are using.

I.  Update the “api.php” code snippet with details from your project. 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:

  • CONDUCTTR CONSUMER  KEY  & CONSUMER  SECRET – you’ll find this in the Authentication section of the API pop-up

 

 

 

  • CONDUCTTR PROJECT ID – this is found in the top header bar

 

  • MYSQL HOST, DBNAME , USER and PASSWORD – you can check this information in your  web hosting control panel. Below there’s an example of this info in GoDaddy.

 

 

 

II.  Now you need to create the registration page that holds the sign-up widget.

  1. Generate the HTML code of your Conducttr Solo Signup Widget and paste this into the Index.html code snippet at the beginning of the file.
  2. Upload index.html to your web host in the same folder as your “api.php” file.
  3. If you upload index.html to a different folder you will need to update it with the path of the api.php file so that index.html can find it.

 

 

 

III.  Upload the ”video.php” code snippet to your web host in the same folder as your “api.php” file.

If you upload it to a different folder you will need to update the file with the path of the api.php file.

 

 

IV.  Upload the Oauth library files to your server. Extract the “Oauth” folder in the same directory you have uploaded the “api.php” file.  Otherwise you will need to update the “api.php” file with the path of the Oauth files.

 

 

3.3.2  Implement the logic in your Conducttr project

Once you have upload everything to your web host, you don’t need to touch it again – all the remaining configuration can be accomplished inside Conducttr.

In Conducttr, you need to configure the video list, the video size and the video triggers. You’ll also need to determine the interaction between the audience and the video creating triggers and actions. The next sections explain how to do the following:

  • Create the setup calls to configure the video player
  • Create the triggers and actions to determine the interaction

 

3.3.2.1  Create the setup calls to configure the video player

There are three basic components that define the behavior of the video player:

o   VIDEOS:  list of video IDs that identify the video in YouTube

o   VIDEO_JOURNEY:  list of pair of numbers, the first defines the video being played and the second the next video by default (the number refers to the position in the VIDEOS list)

o   TELL_CONDUCTTR_IM_HERE: 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, and the third text is the matchphrase sent to Conducttr.

 

You are going to create five API Calls that will configure the video player. 

You only need to call each method once for each time you make changes to the configuration of the player. This means that these API Calls are only sent by pressing the TEST button in Conducttr’s Content Table.

The calls are:

  • Initialize:  creates the tables in the database
  • Set Videos: ordered list of the videos you’re going to play
  • Set Video_journey: defines with video will be played next by default
  • Set triggers: the list of video cues
  • Video player size: determines the width and height of the player.

 

Complete this configuration in two stages:

  • Configure the API Calls
  • Click TEST from the Content Table to send each API Call

 

Configuring the API Calls

I.  Initialize: This call will create two tables in your database and initialize them. You can do this creating an API call inside Conducttr or pasting the next URL in your browser

 

                      URL: http:// MYURL/api.php?action=initialize

 

II.  Set Videos: If you followed the Preparation section then you’ll have all your YouTube videos inside your project. Go through the videos and copy the Video ID immediately after the first “/” - as shown below – and paste this into an API Call in the Data section.

 

 

                     Your API Call should look like the image below.

 

                     Method: POST

                     Format: JSON

                     URL: http:// MYURL/api.php?action=set_videos

                     DATA:{ "videos" : ["8nG1i7zHeBo","GOTq4N4uz1U","R0EIlG08jKo"] }

 

 

 

III.  Set Video Journey: – this tells the code what to do with each video once it reaches the end of its timeline. In the example image below, Video 1 (i.e. 8nG1i7zHeBo) should loop back to itself; Video 2 (i.e. GOTq4N4uz1U) should play Video 3 (i.e. R0EIlG08jKo)

 

                     Create a new API Call select Method: POST and Format: JSON

                     Method: POST

                     Format: JSON

                     URL: http:// MYURL/api.php?action=set_video_journey

 

                     DATA: {“video_journey” :  [ [1,1], [2,3], [3,1] ] }

 

IV.  Set Triggers – 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 timeline that an API call to Conducttr should be made and the final text is the API trigger  matchphrase sent to Conducttr ( check they are the same used before)

 

                     Method: POST

                     Format: JSON

                     URL: http:// MYURL/api.php?action=set_triggers

                     DATA:{“tell_conducttr_im_here" : [[1,"0:11","one"], [ 2,"0:02","two"],                                                [3,"0:01","three"]]}

 

 

 

V.  SET VIDEO WIDTH AND HEIGHT – set the size of your video player.

 

                     Method: POST

                     Format: JSON

                     URL: http:// MYURL/api.php?action=set_video_size

                     DATA:{“video_width" : 720, “video_height” : 405 }

 

 

Click TEST from the Content Table to send each API Call

For each API Call, selecting the content in the Content Table and clicking the TEST button.

 

 

If the call is OK you should see an alert:

You can also check everything is fine by pasting the following URLs in your browser and checking that the response is the same as in your API Calls

Videos ID: http://MYURL/api.php?action=get_videos

Video Journey: http://MYURL/api.php?action=get_video_journey

Triggers: http://MYURL/api.php?action=get_triggers

Video size: http://MYURL/api.php?action=get_video_size

 

3.3.2.2  Create the triggers and actions to determine the interaction

Everything on the server is now configured.

All that remains is to create API Triggers that will fire when the videos call them and API Calls that we will be sent to the server when some event triggers them (for example, an audience member sends a text message which fires the API Call).

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

You need to an API trigger for each video cue – like the one shown below. You’ve told the video when to call this trigger.

 

 

 

II.  Create the API Calls from Conducttr to the server to change the video. In the example below, the call will cause video 3 to play (i.e. R0EIlG08jKo)

                     Method: GET or POST

                     Format: HTML

                     URL: http://MYURL /api.php?                                                                                                           action=set_NextVideo&audience_phone=|audience_phone|&nextvideo=3

 

 

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

  • Avatar
    Chris Hammersley

    Hello - awesome new functionality! I've reached Step 3.3.2.2 "Create the triggers and actions to determine the interaction", but I'm not quite sure which API Call I should be setting in Step I? Is it the one from inside the 'Content Table'? Or is it from the API tab? Neither option shows me an interface like your first 'API1' screenshot...

    Also, assuming I get Step I completed (with your help :) then in Step II could you provide a little bit more explanation/example when activating 3 or more videos?

    Thank you!
    ~ Chris

  • Avatar
    Eduardo Iglesias

    Hi Chris,

    I'm glad you found it interesting! The idea in step 3.3.2.2 it's to have an "API Trigger" (this will be the call from the Video to Conducttr, this way we need which video they are watching) and an "API Call" (this will be the call from Conducttr to the video, to go to a new video) .

    I use the Beat Sheet to create the logic, but you can also use the Logic Table and the Content table.

    API trigger -> Create this in the Beat Sheet by clicking in the "+" symbol in a cell in the Trigger column, or in the Logic Table, clicking "+" -> Triggers -> API. Then you will see the screen you saw in the step, you need to use one of the matchphrases you are using inside TELL_CONDUCTTR_IM_HERE.
    This means when someone reachs the video specified in TELL_CONDUCTTR_IM_HERE the video will send a call with the matchphrase to Conducttr and the API trigger will fire.

    API Call -> Create this in the Beat Sheet by clicking in the "+" symbol in a cell in the Action column, or in the Content Table, clicking "+" -> API Call. And then fill the call details like this

    Method: GET or POST

    Format: HTML

    URL:
    http://MYURL /api.php?action=set_NextVideo& audience_phone=|audience_phone|&nextvideo=3

    With this you are telling the video player to go to Video "3", you can also attach other content to the API trigger, and send the audience SMS / Phone calls, or others.

    The logic in our demo is: the audience reaches a certain video, the video player sends a call to Conducttr with the matchphrase "welcome" , this fires the API trigger and sends an SMS.

    Then we have an SMS trigger (with the answer we expect from the audience) this fires an API call to go to the next video.

    I hope this makes things a bit clearer, let us know if you need anything else.

    Regards,
    Eduardo