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 - "Hello there"</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)