Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
164
rated 0 times [  168] [ 4]  / answers: 1 / hits: 12597  / 10 Years ago, wed, april 2, 2014, 12:00:00

We have a video (vimeo) link we would like our users to watch.



Each video is followed by a short questionnaire.



Our intent is to not make the questionnaire visible to the user until the user had clicked open the video for viewing.



I can only think of embedding the code below inside another iframe just to hide the link.



Is this possible?



Is there an alternative approach to this?



<!DOCTYPE HTML>
<html>
<head>
<meta name=google value=notranslate />
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
<meta http-equiv=X-UA-Compatible content=IE=edge,chrome=1>
<title>Dog Smoking</title>

<style type=text/css>
body {
padding-top:0;
padding-bottom:0;
padding-left:0;
padding-right:0;
margin-top:0;
margin-bottom:0;
margin-left:0;
margin-right:0;
}
</style>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js></script>
<script src=javascript/froogaloop.js></script>
<script src=javascript/froogaloop.min.js></script>
<script type=text/javascript>
var iframe = $('#player1')[0],
player = $f(iframe),
status = $('.status');

// When the player is ready, add listeners for pause, finish, and playProgress
player.addEvent('ready', function() {
status.text('ready');

player.addEvent('pause', onPause);
player.addEvent('finish', onFinish);
player.addEvent('playProgress', onPlayProgress);
});

// Call the API when a button is pressed
$('button').bind('click', function() {
player.api($(this).text().toLowerCase());
});

function onPause(id) {
status.text('paused');
}

function onFinish(id) {
status.text('finished');
}

function onPlayProgress(data, id) {
status.text(data.seconds + 's played');
}
player.addEvent('ready', function() {
status.text('ready');
$(#survey_button).show(); // <-- or whatever
});
</script>
</head>
<body>
<iframe src=http://player.vimeo.com/video/4644119?api=1 width=400 height=375 frameborder=0 webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<a href=http://show.aspx?testid=27#activate
target=target-iframe
onclick=frames['target-iframe'].document.getElementById('activate')
.scrollIntoView();return false>Click</a>
</body>
</html>

More From » jquery

 Answers
2

I would use the JS API for video and use the event callbacks built into the player to make the questionnaire visible.



==UPDATE==



Ok - so that link is a step by step example of how to incorporate the JS controls and callbacks for the player. But... here we go..



step 1 is to add the ?api=1 after your initial embed code.



step 2 is to load their Froogaloop library so you can listen for events...



step 3 would be to set up a callback to handle whatever event you want to listen to... The example right from this page is fantastic:



var iframe = $('#player1')[0],
player = $f(iframe),
status = $('.status');

// When the player is ready, add listeners for pause, finish, and playProgress
player.addEvent('ready', function() {
status.text('ready');

player.addEvent('pause', onPause);
player.addEvent('finish', onFinish);
player.addEvent('playProgress', onPlayProgress);
});

// Call the API when a button is pressed
$('button').bind('click', function() {
player.api($(this).text().toLowerCase());
});

function onPause(id) {
status.text('paused');
}

function onFinish(id) {
status.text('finished');
}

function onPlayProgress(data, id) {
status.text(data.seconds + 's played');
}


So, depending on when you want your survey to show, you can just tap into one of those...



player.addEvent('ready', function() {
status.text('ready');
$(#survey_button).show(); // <-- or whatever
});


make sense?



============= ANOTHER UPDATE ================



here's a working fiddle: http://jsfiddle.net/QkGRd/10/. You may want to read a bit about embedding resources and how the jsfiddle works as well.


[#46340] Tuesday, April 1, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
pranavrorys

Total Points: 466
Total Questions: 87
Total Answers: 115

Location: Barbados
Member since Sun, Nov 27, 2022
2 Years ago
pranavrorys questions
Fri, May 27, 22, 00:00, 2 Years ago
Thu, Oct 28, 21, 00:00, 3 Years ago
Sat, May 30, 20, 00:00, 4 Years ago
Fri, Dec 20, 19, 00:00, 5 Years ago
;