Play a video full screen 'On Scene load'

Tips & Tricks
1

Hello, i’m trying to get video playing full screen automaticaly after clicking on the button or icon and after video ends tunrs back to home/main scene. Is the way how to do it?

Thank a lot.

vito

2

Hi,

The short answer is yes this should be possible.

But you have not given much away in your question which leaves us assuming things like the device you are using and what you have working if anything and what you can already do within what you are trying to do and the bit/s you are struggling with.

There are plenty of examples on the Forum that show how to listen for video events and when the event happens, use that notification to trigger functions

1 Like
3

I’m working on some video presentation witch will run offline. On main scene I have a small images as a video thumbials. On these thumbials each are the functions “Jump to scene” linked to the scenes with videos. Each video is in another scene. It is working now. But if I want to get video full screen, I have to click on the full screen icon in the player and than I have to click Play.

I would like to click on the thumbial on main scene and then will video start playing full screen automaticly. When the video finishes, automaticly turns back to main scene.

I was looking for some codes but I dont have much skill with coding.

4

Is this on desktop. Smart phone, iPad ???.

So you want the first click not go to a new scene but just play the video in fullscreen.

5

On desktop, yes click to play the video in fullscreen

6

Can you help me with this please? Do you have any idea how to do it?

thanks

7

Cool your jets!!

I assure you @MarkHunte will have plenty of ways of how to do it!! He’s probably busy.

I’ll chime in as it seems important for you to have this done asap :slight_smile:

If I am understanding you correctly. You have an initial scene with some elements that when clicked will take you to the corresponding scene that has a video on it.

A few things:

  1. I am assuming this video is in your resources
  2. I am assuming you dragged and dropped on to the stage.
  3. I am assuming you know how to give it an ID.

That being said … Here is an explanation of how I would do it.

###Step 1.
Name my scenes.

###Step 2.
On the video1 scene I have a dragged in video from the resources.
In the Element inspector I turn off autoplay and controls and in the Identity inspector I give it an ID of video1 (same as the scene name this is important)

###Step 3.

In the Scene inspector I create a New Function… on Scene load.
Call it whatever I want and place this in it:

var el = hypeDocument.getElementById(hypeDocument.currentSceneName()); // 

if (el.requestFullscreen) {
    el.requestFullscreen();
} else if (el.webkitRequestFullscreen) {
    el.webkitRequestFullscreen();
}

el.play();

el.onended = function () {
	if (el.requestFullscreen) {
		el.exitFullscreen();
	} else if (el.webkitRequestFullscreen) {
		el.webkitExitFullscreen();
	}
	
	hypeDocument.showSceneNamed('home', hypeDocument.kSceneTransitionInstant)
}

You can then repeat Steps 2 and 3 to add more videos. And on the home scene add the appropriate elements that link to the scenes.

5 Likes
8

Thank you very much.

Now is playing full screen automaticly. But when the video finished full screen exit to video scene, does not jump back to home scene. I followed your instuctions, it looks I have everything ok (my home scene is called “home”) so I don’t know what is wrong.

9

Sorry. Typo in code above. It has now been changed

hypeDocument.showSceneNamed('home', sceneNameDocument.kSceneTransitionInstant)

is now

hypeDocument.showSceneNamed('home', hypeDocument.kSceneTransitionInstant)
3 Likes
10

Perfect!! it’s working great now.

Many many thanks. :slight_smile:

2 Likes
11

Yep I was. Thanks for chipping in @DBear

2 Likes
12

Hey DBear,

thanks for this info. Works fine in iOS but not in Android.
I am working on a mobile Banner Ad with a button linked to a trailer, which should start in fullscreen mode…

Any idea?

greetings

13

Hi @saico it’s possible that in your situation rather than call the function on scene load you should call it on a touch (click) event. At least in Chrome for Android. So perhaps call the function on a click action.

14

Hi @DBear when I add the function to a click than it does not open anything.

You can test the working version for iOS which does not work on Android here

http://a69.g.akamai.net/n/69/10688/v1/img4.allocine.fr/acmedia/images/rep_difde/03_test/mb_full/v1/mobile_banner.html

attached is the file withe the funcion on click.
mobile_banner.hype.zip (1.8 MB)