camtasia 2018 how to start html5 videos in full screen automatic

  • 1
  • Question
  • Updated 3 months ago
I use Camtasia 2018 and I produce my videos with html5.
,
When I start the video, by pressing a button on a website, then I want it to start up in full screen.
What changes must I make in the html file or the css file, to make that happen.

When the video is finished, I want automatic to go back to the website. That is possible to do in Camtasia.


Anyone ?


Greetings Bent Hojstrom
Photo of Bent Hojstrom

Bent Hojstrom

  • 2 Posts
  • 0 Reply Likes

Posted 3 months ago

  • 1
Photo of Dubie

Dubie

  • 969 Posts
  • 747 Reply Likes
Assuming you are using in your webpage the html5 <video> </video> tag and just a mp4 video (not the Camtasia smartplayer) then you can make the video full page as a background with CSS and use javascript to jump to a web site after the video ends.

Here is a page I created a while ago. It might be a little more than what you need but does what you are looking for. It's straight HTML5  using the video tags. No iframe.

The page just has a sample video and last roughly about a minute. You need to click the play button at the bottom left to start the video. When done playing it should go to Google automatically.

https://demotestsite.info/sl/fullscreen

Now if you are producing your video with the smartplayer than probably the best way to jump to a website when the video ends is to add a hotspot at the end of the video that jumps to a website when the video ends.







:)


(Edited)
Photo of kayakman

kayakman, Champion

  • 6251 Posts
  • 1835 Reply Likes
alternatively, you can use the player's end action "go to URL" [no hotspot required]
Photo of Dubie

Dubie

  • 969 Posts
  • 747 Reply Likes
I completely forgot about that option. That would be the better option if using the smartplayer.

I rarely ever do a jump to a website at the end of a video and using a hotspot was the first thing that came to mind.

:)
Photo of Ben Rhodes

Ben Rhodes, Employee

  • 100 Posts
  • 32 Reply Likes
Hi Bent,

Our TechSmith Smart Player doesn't directly let you toggle fullscreen mode externally.  However here is a bit of JavaScript you add to the html page that loads the smart player.

TSC.mediaInterface.addEventListener(TSC.events.External.VideoStart, function() {
var smartPlayerContainerEl = $("#tscVideoContent")[0];
if (smartPlayerContainerEl.requestFullscreen) {
smartPlayerContainerEl.requestFullscreen();
} else if (smartPlayerContainerEl.webkitRequestFullscreen) {
smartPlayerContainerEl.webkitRequestFullscreen();
} else if (smartPlayerContainerEl.msRequestFullscreen) {
smartPlayerContainerEl.msRequestFullscreen();
} else if (smartPlayerContainerEl.mozRequestFullScreen) {
smartPlayerContainerEl.mozRequestFullScreen();
}});
You will want to place this JavaScript right above the following line of JavaScript in that html file.
TSC.mediaPlayer.init("#tscVideoContent");
The player should auto exit full screen mode when it ends.

Hope this helps,
Ben