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?
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)
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)
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
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:
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, "*");
}
That's weird, it's still not work for me... Here's the file with the changes: Dropbox - File Deleted - Simplify your life
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