Known Participant

Answered

HTML5 Canvas how to set video component fullscreen with script

Forum|Forum|8 years ago
January 16, 2018
1 reply
3347 views

I would like to know how I can set the video component to full screen with script. (Not with actionscript off course for it is for html5)

This topic has been closed for replies.

Correct answer ClayUUID

idkoos wrote
The given answer is for people who are able to work with a HTML editor.

The given answer is for JavaScript, which is the scripting language Canvas uses.

This function will fullscreen a video of a fixed name. If needed, you could modify it to pass in the name as an argument.

function doFullscreen() {

var vid = document.getElementById("myVideo");

if (vid.requestFullscreen) {

vid.requestFullscreen();

}

else if (vid.msRequestFullscreen) {

vid.msRequestFullscreen();

}

else if (vid.mozRequestFullScreen) {

vid.mozRequestFullScreen();

}

else if (vid.webkitRequestFullscreen) {

vid.webkitRequestFullscreen();

}

Of course, all this faffing about is why I just enable the browser's native media controls, which always include a fullscreen button.

C

ClayUUID

Legend

Fullscreen API - Web APIs | MDN

I

idkoosAuthor

Known Participant

Thank you, for your quick reply. I looked at it just now, but this is not exactly what I mean. Since I thougt this was the Animate CC forum I forgot to tell that it had to work in this environment. The situation is this, I have the video component placed in the work area. I can make it play or stop with these scripts:

//Play video

this.Button_play.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler()

{

$("#movieClip_1")[0].play();

}

//pause video

this.Button_stop.addEventListener("click", fl_MouseClickHandler_2.bind(this));

function fl_MouseClickHandler_2()

{

$("#movieClip_1")[0].pause();

}

Is there a way to do it the same way but then set the video fullscreen?

Such as:

this.Button_Fullscreen.addEventListener("click", fl_MouseClickHandler_2.bind(this));

function fl_MouseClickHandler_2()

{

$("#movieClip_1")requestFullscreen();

}

The given answer is for people who are able to work with a HTML editor. My skills are animating in Animator CC (Formaly Flash) with a tiny knowledge of Javascript within Animator CC canvas.

C

ClayUUIDCorrect answer