Play Vimeo Video with Javascript

Using JavaScript with Hype
3

Ok.

This should work. Vimeo have a API that you can hook into to control embedded videos.

1, Add to your head file a link to the vimeo API js.

<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>

2, Once you have the embed code, you need to enable the API.

It is suggested that you do this by adding ?api=1 to the end of the video src URL.

So:
src=“https://player.vimeo.com/video/160106895?title=0&byline=0&portrait=0&badge=0”

would become

src=“https://player.vimeo.com/video/160106895?api=1?title=0&byline=0&portrait=0&badge=0”

But I found that it works without doing that so try it without first ( in all browsers)

3,

I will assume that you have embedded the embed code into a Rectangle Element’s innerTML…

Give the Rectangle an ID. Mine is ‘videoRectangle.’

4,

Add you Timeline Action with call to a Javascript function.

5,

Add this code to the Javascript Function.

var videoRectangle = hypeDocument.getElementById('videoRectangle')
	
	
	
	var iframe = videoRectangle.childNodes[0];
	
	var player = $f(iframe);
	
	player.api("play");

That should be it

playVimeoControl_API.hype.zip (12.6 KB)

1 Like