As a developer/platform architect I was really dismayed to see that a lot of the videos on websites either didn’t have a Call To Action to gather emails, feedback or questions, or had a primitive Call To Action that was just a link to somewhere else. If you wanted to ask the viewers to leave a message and record that in a database, you had to do it in a separate div on the page. What was needed was a video player that could pause, ask questions of the viewers, record their answer in a database and continue on with the video – right in the frame of the video player. So I wrote one.
Any developer can integrate it. There is sample javascript to pop the user answers into a database. The player supports html like checkboxes, select drop-downs, text inputs and text areas. It supports all html in the frame of the video player . Also supported is programmatically adding several pauses to ask for input and resumes automatically.
There’s no documentation on that page on how to use the player or its limitations.
Where does the video come from?
Would it be compatible with Zoho Sites? The comment here on using an embed link suggests that may be possible but depends on how complex your embedding is
Installing CTA Player is relatively simple. Copy the js folder to html directory. The rest is html and modifying javascript files. There are 3 javascript files that you need to modify. First you must determine how many times you want to interact with the viewers and at what time intervals (in seconds) throughout the video, including the special case of just interacting at the end of the video. You may choose to just interact at the end of the video.
The first javascript file is time_interval.js:
/* This javascript file creates an array of time markers where the video is interrupted with
html content. An array is created and populated with elements that denote which
second in the video that you want the specific content to pop up in. The units are
integers in seconds. These are just examples that you can change. In this example,
the first interactive html element is introduced at 10 seconds into the video. The
video player will stop at 10 seconds and fill the player window with the html file that you
specify in content_file_names.js.
There are three other parameters in this file. The first is in the rare case that you want the video to play through without interruption. You would uncomment time.length = 0, otherwise leave it commented out.
The second is the const endScreen. If you want to display an interaction at the end of the video when it finishes playing, you will have endScreen = true. Otherwise it will be endScreen = false. The final screen time is automatically determined by the video player.
The third value is bias. You can generally leave that at one. What happens in some videos is that if you want to stop it at 10 seconds, and the frame rate is such that the next frame doesn’t exactly have a 10 second marker, and your content isn’t shown. The bias is the plus or minus time of the indicated interrupt time. One second works fine, but it can be as low as 0.3. You can fiddle with it if you need to.
*/
The second javascript file that you modify is content_filenames.js:
/*
This javascript file creates an array of html file names that contain the html content
to pop up in the videos at the intervals in time_intervals.js file. The modalFile array elements correspond 1:1 to the time array elements in time_interval.js. For example if you want the first stop in the video to be at 10 seconds, and use the html in extern1.html modalFile[0] would be equal to “extern1.html” and time_interval.js would have time[0] = 10, which would be the 10 second mark in the video.
When the video player reaches 10 seconds, it will stop and the frame will be filled
with the html contents of extern1.html. If extern1.html is not in the same directory, you will have to specify file path and file name.
Also, the message at the end of the video is always a special case. The html content is always called from an html file named exitScreen.html You will put your end of video content there only. You should not declare it in the modalFile array.
*/
The third javascript file to modify is dbaction.js:
/* This script does the submits to the form action html page to save the inputs to the database. You must modify this file to reflect your input parameter names in the html files in video player frame. The parameter names are what you name your html input and database elements. The example shows how the parameters come from the names in extern1.html. Do not rename the javascript functions in this file.
*/
After you have modified the above file, you add the video to the video folder. At this point you can create a cover poster, a jpg or png image that is placed in the video window before the video starts. This presents another opportunity for an advertising message. The poster image goes in the posters directory.
Then you create the html snippets that you want to appear in the player and put them in the files whose names that you have specified in the content_filenames.js. An example is shown in extern1.html in the examples folder. Once you have the html inactivity files done, on the index page in the body section you need a video tag as shown below:
Further video tag parameters are in the docs folder. You can style the div any way that you want. Be sure to copy over the css file for the video player and you are on your way.
