Play Vimeo Video with Javascript

Using JavaScript with Hype
1

I have a vimeo video background and want the video to start playing at a certain point in the timeline. Is there any JavaScript action I could add to trigger the video?

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
4

Hi Jonathan @jon4896

You would have to implement the Javascript API to control the vimeo via Javascript.

Luckily, Jonathan has posted a nice tip on this. (I also shared a post about syncing vimeo and youtube with the timeline before)

The following method makes it quite simple (ish):smile:

Step 1: Follow @jonathan’s post [here][1] to familiarise yourself with how to implement the API

Step 2: use this code on scene load to setup the API Note you can then call this entire function with a timeline action whenever you want the video to start (providing it’s greater than 4 secs which can be changed)

// unique ID set in both the &player_id part of the iFrame URL and the unique identifier here in Hype
	var playerIFrameID = "vimeoplayer";
		
	if (hypeDocument.currentTimeInTimelineNamed('Main Timeline' > 4)) { // timeline is greater than 4 secs (just a simple check)
		post('play'); // play the video
	}
		
	function onFinish() {
	
		// do an action when the video is finished, such as changing scene:
		//hypeDocument.showSceneNamed("Other Scene", hypeDocument.kSceneTransitionCrossfade, 1.1);
		console.log("finished");
	}
	
	function onPause() {
		console.log("Paused")
	}
	
	// do not modify below here  ------------------------------------
	
	// Handle messages received from the player
	window.onMessageReceived = function (event) {
		// Handle messages from the vimeo player only
		if (!(/^https?:\/\/player.vimeo.com/).test(event.origin)) {
			return false;
		}
		
		var data = JSON.parse(event.data);
		if(data.event == "finish") {
			onFinish();
		} else if (data.event == 'pause') {
			onPause();
		} else if (data.event == "ready") {  
			post('addEventListener', 'finish');
			post('addEventListener', 'pause');
		}
	}
	
	// Helper function for sending a message to the player
	function post(action, value) {
		var data = {
			method: action
		};
	
		if (value) {
			data.value = value;
		}
	
		var message = JSON.stringify(data);
		document.getElementById(playerIFrameID).firstElementChild.contentWindow.postMessage(message, "*");
	}
	
	// Listen for messages from the player
	if (window.addEventListener) {
		window.addEventListener('message', window.onMessageReceived, false);
	} else {
		window.attachEvent('onmessage', window.onMessageReceived, false);
	}

Example: vimeoSync.zip (17.0 KB)
[1]: Changing a scene when a Vimeo video has ended

2 Likes
5

I tried both versions and neither of them worked for my particular file for some reason. Here’s the file if you want to take a look and see if you can spot my mistake:

6

Hi @jon4896

I’ve changed the vimeo_play() code so you can now play anywhere you call this code

• change var playerFrameID … to … window.playerFrameID (to make it global) in vimeo_code() and
• Place this in the vimeo_play() function:


	post('play');
		
	
	// Helper function for sending a message to the player
	function post(action, value) {
	        var data = {
			method: action
		};
	
		if (value) {
			data.value = value;
		}
	
		var message = JSON.stringify(data);
		document.getElementById(playerIFrameID).firstElementChild.contentWindow.postMessage(message, "*");
	}
7

That's weird, it's still not work for me... Here's the file with the changes: Dropbox - File Deleted - Simplify your life

8

sorry there’s a typo BUT you must change all of what I said not just playerIFrameID

change:

var playerIFrameID

to

window.playerIFrameID // don't include var