If you’ve ever wanted to create an interactive video, Camtasia will likely come into the picture. It is one of the most popular video editing software which allows you to add interactivity to your video project.
In this article, we will show you how to protect an interactive video exported from TechSmith Camtasia with the following steps:
Before you begin, please make sure you have created a private S3 bucket and configured CloudFront distribution.
(1) Create pda-iframe.js file
First of all, you need to create a JavaScript file named “pda-iframe.js” which includes the code below:
Replace your-website-domain.com with your Site Address (URL), which hosts the interactive videos. You can find it under the General sub-menu of WordPress Settings page.
After created, this file should be added to the same folder with your video. Please note that in this folder, you also see an HTML file named something likes your-video_player.html. Edit this file and add the following codes right above the </body> tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="pda-iframe.js"></script> 
Don’t forget to save the changes.
(2) Upload video folder to S3 bucket
Upload your Camtasia folder to your S3 bucket that has been configured under PDA Protect Videos Settings page. Please make sure you keep your Camtasia folder structure as they are when uploading to your S3 bucket.
After that, make public all files under this folder except your mp4 video and your-video_player.html.
Copy the URL of your-video_player.html and move to the final step.
(3) Generate and embed shortcode to content
Replace S3 URL you have got in step 2 to the shortcode below and then embed it to content.
[pda-tech-smith url="S3 URL of your-video_player.html"]
You can also use our shortcode generator instead.
It’s very important to remember that your site and S3 link have to use the same SSL rule. In other words, if your site is http://preventdirectaccess.com, your S3 link should be something likes http://your-S3-bucket.com/your-video_player.html. If you don’t follow the rule, you will come across the error as below:
Please double-check everything before publishing your video.
Limitation:
The control bar of TechSmith Smart Player would disappear sometimes due to our protection mechanism. If you’re using desktop, just hover your mouse to the player’s area, it will show again. There is no perfect solution yet on mobile.
