Javascript Show controls

Using JavaScript with Hype
1

Hello,

I have a problem. I have created a page on which a background video is running. The background video should run permanently in a loop. There are several buttons above the video. If you click on one of the buttons, a new timeline starts and another video appears above the background video. To start the video I have programmed it with Javascript:

hypeDocument.getElementById('video').play();

The problem is that even if I switch on the controls in Hype, the controls are not visible in the Safari browser. It works with other browsers. However, my customer wants to present on an iPad with Safari.

Is there a way to force the display of the controls with Javascript?

Thanks

Thomas

2

Can you share a simple example so we can take a look?

Are you setting a 'controls' option in your code or checking the 'controls' checkbox in the Element inspector within Hype for the video?

3

Hi Daniel,

thanks for your reply. Sorry I can not sent you the data, because it's confidential.
I tried different settings. Also switched on the controls mute, inline, controls in the element information. If i switch on controls it works properly in chrome and firefox, but not in safari. As i wrote i start the video with javascript.

hypeDocument.getElementById('video').play();

It should be possible to add a row of code that says the video "show the controls". I'm new in javascript, so for me it is difficult to find the right programming.

Thomas

4

The actual video element is what gets the instructions to have 'controls' and you can set that up by using this code:

<video id="video" width="320" height="240" controls> ...</video>

The inclusion of 'controls' here tells browsers to show controls.

5

Thank you for your answer. Unfortunately it does not work with the script. The hype document is a bit more complicated, so there is probably no simple solution. I have now asked a friend who is familiar with javascript to have a look at it.

But I still have a question:
I want to jump from one scene to another scene in which a film is running. This film should not start at the beginning, but at second 10. Do I have to work with an eventListener or can I do it without?

If I do this the film starts at the beginning:

hypeDocument.getElementById('videoKurz').play();

I then tried this, but the film also starts from the beginning:

let mainVid = hypeDocument.getElementById('videoKurz');
mainVid.currentTime = 10;
mainVid.play();

And here it doesn't work at all:

hypeDocument.getElementById('videoKurz').addEventListener('timeupdate', function() {

let mainVid = hypeDocument.getElementById('videoKurz');
mainVid.currentTime = 10;
mainVid.play();
}

What am I doing wrong?

Thank you very much

Thomas

6

This code looks correct on the surface; does it log any errors in the developer console? I'd say the most likely probability is that the video has not yet been loaded, so it may be producing an exception.

While your actual document is confidential, if you have a minimal non-confidential version that reproduces your basic video setup, I think that would be useful. It is a bit hard to say what might be happening (and provide a solution) without a bit more context.

7

You want the video to start from the point of ten seconds in, when you go to the second scene.

I don't see how a video would be running on the second scene in the background before you go to it, so I will take that as you will have a video that will run on the second scene.

An on update listeners will be listening for a video playing. You should not need the listener.

All you should need is your code

let mainVid = hypeDocument.getElementById('videoKurz');
mainVid.currentTime = 10;
mainVid.play();

Inside a Hype function.

When the scene loads you can have a scene or keyframe action call this function.

Video_time.zip (1.2 MB)

If it is as @Jonathan says, and the video has not loaded fully yet.
You could change the code so it waits for enough video data to have been loaded by using a can play listener.

let mainVid = hypeDocument.getElementById('videoKurz');
	
	mainVid.addEventListener("canplay", function() {
    	mainVid.currentTime = 10;
		mainVid.play();
	}, false);
2 Likes
8

Thanks a lot. The canplay event made it work.

2 Likes