CAWI - How to Play Videos/Audios in Questions

Customer Support Manager

December 14, 2021 11:37

Overview

This guide will describe how to play videos and audio files in questions running on CAWI

Steps

Video

To display videos in CAWI you can choose one of 2 options:

1. Hosted Video

Use a video hosted outside STG, for example YouTube, follow these steps:

1. In the start script of the question you want to display the video in add this code - SetTextFormat(CurrQues, "<div><iframe width=100% height='300' src='https://www.youtube.com/embed/2wuDMt4Zr2g?autoplay=1' frameborder='0' allow='autoplay; encrypted-media'></iframe></div>");
2. In the src='' - paste the link where the video is located
3. In the Question text add the piping place holder {0}
4. When running in the web the video will be displayed in the question

2. Video attached to the survey

Follow the below steps to implement:

Add the video to the survey using the 'Edit Survey Attachments'
Navigate to the Survey Properties and enable the 'Client Side Scripts'

Add the below script to the Question that you wish to display the video in the Start Script.

SetTextFormat(CurrQues, "<head><script type='text/javascript'> jQuery(document).ready(function(){ jQuery('body').on('contextmenu', 'video', function() { return false; }); }); </script></head><body> <video width=60% autoplay playsinline style='pointer-events: none;'><source src='\dblstgatc://" + GetAttachmentID("<YourVideoName>")+ "\' type='video/mp4; codecs='H.264/MPEG-4''></video></body>");

Add the below code in the client side scripts tab

window.onload = function () {
var element = document.getElementById('video');
element.muted = false;
}

Please Note: iOS platform doesn't support playing a video/audio automatically, therefore in order to implement the above you will need to remove the autoplay and add the controls to the video so the respondent will be able to click on 'play' below is the adjusted relevant code

SetTextFormat(CurrQues, "<head><script type='text/javascript'> jQuery(document).ready(function(){ jQuery('.stgNextButton').hide(); jQuery('.stgNextButton').delay(60000).fadeIn(600);jQuery('body').on('contextmenu', 'video', function() { return false; }); });</script></head><body> <video width=60% controls playsinline style='pointer-events: active;'><source src='\dblstgatc://" + GetAttachmentID("<YourVideoName>")+ "\' type='video/mp4; codecs='H.264/MPEG-4''></video></body>");

Audio

Attach the audio file to your survey
in the start script of the question you would like to play the audio file add the below code: SetTextFormat(CurrQues, "<audio controls autoplay><source src='\dblstgatc://" + GetAttachmentID("SONG_1.mp3")+ "\' type='audio/mpeg'></audio>");

Please Note: The auto-play attribute will make the audio start playing without the user pressing the play button BUT recently chrome changed it's auto-play policy as you can see in this link: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
So, If the tag is placed in the first question in the survey the song does not auto play since chrome now lets you auto play only if the user interacted with the domain (click, tap, etc.) so you should notice that

That's It !