X

Smart Advice. Agile. Personalized. Transparent.

How to play a video in an Intelligent Advisor interview

Sue Novak
Senior Technical Writer

In this example we are going to show how to add a video to an Intelligent Advisor interview screen.

Prerequisites

To add a video to an interview, you will need:

  1. A policy model with an interview screen where you want to include the video.
  2. A video. This can be either:
    • a video file that you will include with the project. Note that only small videos can be included in a Policy Modeling project as you cannot deploy a project that is larger than 64MB.
    • a video at an external location. For example, a video file located on a website or a YouTube video.
  3. A basic familiarity with using interview extensions in a Policy Modeling project.

Add the interview extension file to the project

You need to add the JavaScript file to your Policy Modeling project that provides the interview extension for the video. You can download an example file here (you only need one):

  • video_local.js – use this JavaScript file if you want to use a video that will be stored locally in the Policy Modeling project
  • video_external.js – use this JavaScript file if you want to use a video file that will be located on an external website
  • video_YouTube – use this JavaScript file if you want to embed a YouTube video in your interview

Copy this file into the /interview-theme/resources folder for your project. (This folder is created when you click the Custom Files button in the Styles dialog box on the Interview tab in Policy Modeling.)

If you are using a video file that will be stored locally in the Policy Modeling project, you also need to add that file to the /interview-theme/resources folder for your project.

Modify the interview extension file to refer to your video

Open the JavaScript interview extension file for your project. You need to edit the src attribute to refer to your own video. That is:

  • If you are using the video_local.js file, replace the name of the video file here:
    • videoEl.src = interview.resourcePath + "/my_video.mp4";
  • If you are using the video_external.js file, replace the URL for the video here:
    • videoEl.src = "http://techslides.com/demos/sample-videos/small.mp4";
  • If you are using the video_youtube.js file, replace the unique code for the YouTube video here:
    • iframe.src = "https://www.youtube.com/embed/mTHtn0FRMWw";

Pro Tip! Depending on the height and width of the video you are using, you may need to also change the following values in the example interview extension file:

  • videoEl.width = 320;
  • videoEl.height = 180;

Add the video to the interview screen

On the screen where you would like to include the video:

  1. Add a label control. It doesn't matter what the text of the label is because the video will be shown instead of the label text.
  2. Define the following custom property for the label control:
    • Key: name; Value: exampleVideo

Custom property for the label control in Oracle Policy Modeling

Pro Tip! If you want to use a different name for the custom property (that is, something other than exampleVideo), you will need to also change the name of it in the JavaScript interview extension file here: (control.getProperty("name") == "exampleVideo")

Test the interview

To test the playback of the video in the interview, you will need to run the interview in a browser. 

A video displayed in the Student Benefits interview in a browser

Further information

If you would like further information on any of the concepts covered in this example, please visit these topics in the Intelligent Advisor Documentation Library:

Credits

Ian Clough (Oracle) and Richard Napier (Intelligent-Advisor.com) for guidance on the implementation

Federal Student Aid (Office of the US Department of Education) for the video used in the YouTube example

Kelly Sikkema (unsplash.com) for the original iPad image

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.