Media - Video hosting process

If you have suitably formatted .mp4 files available, you can upload these to your survey's file directory as follows:

1. From your Survey Dashboard menu, go to Structure, Files button. Select the _s folder, and click on the Upload button.
2. Upload your video files.
3. Use the Copy Path tool to copy the video link to your clipboard for use in your survey code.

The following code will outline setting up a test video as it would be shown in the survey screening section. To ensure that respondents can view video in the main survey, we always use the same format for the test and main videos. The video subject and sound track allow us to ask follow up questions to verify that the respondent properly sees and hears the content.

While use of a basic HTML video element is supported, we've customized a player to ensure respondents watch the video before proceeding. With this player, respondents are unable to use the scrubber to jump to the end of the video. You'll also note that the continue button is not shown initially. Once the player reaches the end of the video, it triggers the button's display. As a backup, we have an optional setting that will force the button to be revealed after a defined amount of time has elapsed. This allows respondents who are unable to play the video to proceed to the follow up questions for proper termination. Lastly, we've built in optional functionality to record video error occurrence and the number of times the video is played into the survey data.

We integrate this custom player into the code using our templating system. We're able to use an html or text widget and override the default widget with our custom player code via the template tag.  We're also use template_data to pass parameters to our templated code.

The first step is to load this template to your survey:

1. Download videojs.tx by clicking here.
2. From your Survey Dashboard menu, go to Structure, Files button. Click on the theme folder, and click on the Upload button.
3. Upload videojs.tx .

In your survey source, copy and paste the code below where you want to display the video file.

• mp4 (required) contains the link to the .mp4 file being played. The link in this example is a standard test video file IntelliSurvey hosts permanently on our CDN. If you've upload the file to the survey's _s directory, navigate to the file, select it, use the Copy Path tool, and paste the results between the single quotes.
• backup_button (optional) is set to the number of seconds you want to wait before forcing the continue button to show. This is generally a few seconds longer than your video and accounts for instances where a user cannot play the video. If this is not included, the player will trigger the continue button to appear when the video has finished playing.
• error_question(optional) points to a unique question for each video that will be punched with option '1' if there is an error with playback. Errors will also cause the continue button to appear.
• times_question(optional) points to a unique question for each video that will record how many times the respondent viewed the video.

The backup button, error tracking, and playback count questions are optional. If they are not included, their references should be removed from the template data. S0 and S0A are included to show standard screening questions that follow the initial video test.

html: <p class="subvidtxt">Please click above to play the video.</p>
template: videojs.tx
template_data: <<EOTD
{
mp4 => 'https://d34zhlehhiq5vp.cloudfront.net/feec596a-1eab-45b3-b63a-6c0239ff7637/mp4/test_video_Mp4_Avc_Aac_16x9_1280x720p_24Hz_8.5Mbps_qvbr.mp4',
backup_button => '10',
error_question => 'QTEST_VIDEO_ERROR',
times_question => 'QTEST_VIDEO_TIMES_PLAYED'
}
EOTD

TEST_VIDEO_ERROR. Test video error (player returned error)
type: radio
required: n
ap: n
css: {display: none;}
1. Error detected

TEST_VIDEO_TIMES_PLAYED. Times the video was played
type: text
datatype: number
required: n
ap: n
css: {display: none;}

S0. What did you see in the video you just viewed?
type: radio
scale: y
randomize: y
1. Train
2. Barking Dog
3. Fireworks
4. Race Car
5. Tree
termif: noneChecked($QS0,5) {text: S0 - Did not select Tree}

S0A. What did you hear in the video you just viewed?
type: radio
scale: y
randomize: y
1. Train
2. Cat Meowing
3. Fireworks
4. Airplane
5. Piano Music
termif: noneChecked($QS0A,5) {text: QS0A - Did not select Piano Music}

This same code (html with template, X_VIDEO_ERROR and X_VIDEO_TIMES_PLAYED) will be used to display each video instance in your survey. If used the error/times question IDs should be updated for each video instance in your study.

The examples below show how you would format the template_data for a locally hosted file without error or time questions. The first exhibits a shorter backup button display time, and the second doesn't use the back up button feature.

# Shorter delay stall button 
html: <p class="subvidtxt">Please click above to play the video.</p> 
template: videojs.tx 
template_data: {mp4 => '/survey/demo_local_video/_s/videoname.mp4', backup_button => '5'} 

# No stall button, show when video is finished 
html: <p class="subvidtxt">Please click above to play the video.</p> 
template: videojs.tx 
template_data: {mp4 => '/survey/demo_local_video/_s/videoname.mp4'}

We can show the video to users again later in the survey. Download the following files by clicking on the links: videojs_pop.tx  and vid_pop_js.tx. Upload them to your local theme directory as you did the initial .tx file. 

The code below exhibits how to show the video later in the survey as a pop-up. This is done in three steps:

1. Use settext (VIDPOP1) to call in a player instance via template (videojs_pop.tx) that can be displayed in the pop-up modal, and feed it the video links via template_data.
2. Use settext (VIDWATCH1) to set up the text shown to trigger the pop-up. Include dialog: y to display a pop-up modal instead of a mouseover, then set the contents of the pop-up to the player instance.
3. Use settext (VIDPOPJS) to call in the JavaScript needed to support the player via template (vid_pop_js.tx).

Repeat steps 1 and 2 for each video. Step 3 only needs to be done once. When you're ready to call the pop-up video, place the settext calls for the video pop-up and the JavaScript inline as seen in (WATCH_AGAIN_POP).

settext: VIDPOP1
html: <p class="subvidtxt">Please click above to play the video.</p>
template: videojs_pop.tx
template_data: {mp4 => '/survey/demo_local_video/_s/videoname.mp4'}

set text: VIDWATCH1
text: click here to re-watch the video.
dialog: y
explain: __VIDPOP1__

settext: VIDPOPJS
text: JavaScript needed to support the video pop up
template: vid_pop_js.tx

# The video pop-up javascript needs to be outside of the dialog to ensure things work correctly:

showtext: WATCH_AGAIN_POP
text: If you need to refresh your memory __VIDWATCH1__ __VIDPOPJS__

If you need to host a file on the CDN, or if you need your file processed to create an .mp4 or .m3u8 stream, create a help ticket (click on Submit a request at the top of this page) requesting video processing and hosting. Here are the basic details to include in the ticket:

1. Subject: [Server] [Survey ID] Video Hosting Request
2. Description
   1. Include Server and SID again.
   2. Link to the video file (large files) OR attach smaller items to the ticket.
      1. Check the file's user access permissions. If you cannot give permission to access the client link, upload the file to Google Drive, and paste a shareable link in the ticket.
      2. Request high resolution .mov or .avi video files if available. If not, .mp4 video files will work.
   3. Name the Survey Programmer (SP) to contact if there are any further questions.
   4. Provide the SP's email address (if different from above) to be copied on the Amazon Web Services (AWS) automatic emails.

Once the ticket has been submitted, our Support staff will upload the files for processing and will share the links for accessing via the support ticket. The links provided will take the place of the links noted in the article above (mp4 template data).

• The same file formats and pairings should be used throughout the survey.
• If files will not play for some respondents, or play slowly, hosting via CDN can help.
• High resolution videos (+10Mb) are less likely to play well for respondents on all devices. When possible request files optimized for a cross section of devices (~512 Kbps bit rate)
• The video controls can be hidden with CSS. For quick reference, here is a list of their selectors:
  • .video-js .vjs-play-control
  • .video-js .vjs-volume-panel
  • .video-js .vjs-progress-control
  • .video-js .vjs-remaining-time
  • .video-js .vjs-picture-in-picture-control
  • .video-js .vjs-fullscreen-control .