Changing a scene when a Vimeo video has ended

youtube

(Jonathan Deutsch) #1

Here are the steps you can use to change a scene (or run other actions) when a video hosted on vimeo has ended:

1: On the video page, click the ‘share’ paper airplane icon shown when hovering over the video.

2: Copy the Embed code show, for example:

<iframe src="https://player.vimeo.com/video/7654375?color=E7E7D3&byline=0&portrait=0" width="500" height="375" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="https://vimeo.com/7654375">Star Wars Uncut - Scene 113 - &quot;Hello there&quot;</a> from <a href="https://vimeo.com/animalcolm">Malcolm Sutherland</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

3: Find just the src part:

https://player.vimeo.com/video/7654375?color=E7E7D3&byline=0&portrait=0

4: Add “&api=1&player_id=vimeoplayer” to the end:

https://player.vimeo.com/video/7654375?color=E7E7D3&byline=0&portrait=0&api=1&player_id=vimeoplayer

5: In Hype, create a new HTML Widget

6: In the Element inspector, change the HTML Widget option to Specified URL and paste the composed URL from step 4.

7: Go to the Identity Inspector and give the HTML Widget a Unique Element ID (for example, I am using “vimeoIFrame”

8: Add an On Scene Load action that is set to run the following JavaScript:

``

// this must be the unique element id of the HTML Widget in Hype
var playerIFrameID = "vimeoIFrame";

function onVideoFinished() {

	// do an action when the video is finished, such as changing scene:
	hypeDocument.showSceneNamed("Other Scene", hypeDocument.kSceneTransitionCrossfade, 1.1);

}


// 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") {
		onVideoFinished();
	} else if(data.event == "ready") {  
		post('addEventListener', 'finish');
	}
}

// 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);
}

``

9: Modify the onVideoFinished function to show a different scene name or run a different action

10: Add an On Scene Unload action to run the following Javascript:

``

// unregister so handlers aren't called twice
if (window.removeEventListener) {
	window.removeEventListener('message', window.onMessageReceived);
} else {
	window.detachEvent('onmessage', window.onMessageReceived);
}

``

Here’s a sample document showing it in action:

vimeo.hype.zip (75.0 KB)


Play Vimeo Video with Javascript
(Hans-Gerd Claßen) #2

vimeo also offers a javascriptlibrary for their player to simplify those postMessage-eventhandling. Api


#3

Yep @h_classen they sure do.

Here is a post I made a while back showing both YoutubeAPI and vimeoAPI in use.

@jonathan nice example of use without froogaloop to handle post messages