Play Vimeo Video with Javascript

Using JavaScript with Hype
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