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.
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.
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 would be equal to “extern1.html” and time_interval.js would have time = 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.
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.