camtasia 2018 how to start html5 videos in full screen automatic

  • 1
  • Question
  • Updated 2 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 1 year ago

  • 1
Photo of Dubie

Dubie

  • 1447 Posts
  • 1169 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

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

Dubie

  • 1447 Posts
  • 1169 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

  • 270 Posts
  • 111 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
Photo of karuna.vnks

karuna.vnks

  • 2 Posts
  • 1 Reply Like
i have Use  these above code its working but exitFullscreen button is not working....

Error : 

techsmith-smart-player.min.js:21 Uncaught (in promise) TypeError: Document not active
    at D (techsmith-smart-player.min.js:21)
    at F (techsmith-smart-player.min.js:21)
    at G (techsmith-smart-player.min.js:21)
    at J (techsmith-smart-player.min.js:21)
    at HTMLButtonElement.<anonymous> (techsmith-smart-player.min.js:21)
    at HTMLButtonElement.dispatch (techsmith-smart-player.min.js:4)
    at HTMLButtonElement.q.handle (techsmith-smart-player.min.js:4)

Please help me
(Edited)
Photo of Ben Rhodes

Ben Rhodes, Employee

  • 270 Posts
  • 111 Reply Likes
It looks like our code around our full-screen controls does not initialize correctly when running this code.  We'd have to make some changes to the player to fix the error.  Unfortunately, I can't commit to working on this right now.
Photo of karuna.vnks

karuna.vnks

  • 2 Posts
  • 1 Reply Like
Thank you Sir,

Today i have resolved these issue its working fine  for me : 

Some modify  : techsmith-smart-player.min.js  this js file  and used this code :

TSC.mediaInterface.addEventListener(TSC.events.External.VideoStart, function () {
                $('.fullscreen-button').click();

                $('.fullscreen-button').find('span').removeClass('fullscreen-button-glyph');
                $('.fullscreen-button').find('span').addClass('fullscreen-button-active-glyph');
                isloadedfirsttime = false;

            });

I hope you have nice day as well.


(Edited)
Photo of Ftbagkicker

Ftbagkicker

  • 1 Post
  • 0 Reply Likes
Where exactly do you insert the code inside techsmith-smart-player.min.js ?
(Edited)