I have bunch of videos which I am working on. Currently, users have to click the "button" to make sure that they have watched the video before moving on to next one. I want to change this feature so whenever a user watches videos the "button" automatically clicks and next video uploads. Clicking of button is something important in order to save the user data.
For now this is what I have implemented(Test Code):
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<p style="text-align: center;"><iframe id="player1" src="https://player.vimeo.com/video/156873237?title=0" width="500" height="281" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>
<button type="button" onclick= "showMsg();">Click Me!</button>
<script>
function showMsg(){
alert('you clicked');
}
</script>
<script>
var $ = jQuery.noConflict();
$(function() {
var iframe = $('#player1')[0];
player = $f(iframe);
player.addEvent('ready', function() {
player.addEvent('finish', onFinish);
});
$('button').bind('click', function() {
player.api($(this).onFinish());
});
function onFinish() {
alert('finished');
}
});
Using this, whenever the video ends it does not give any response. Is there anything I am missing or doing something wrong.
According to their document here, you should add more parameter on the embed url api=1&player_id=player1 which is enabling the API and indicate the playerId
<p style="text-align: center;"><iframe id="player1" src="https://player.vimeo.com/video/156873237?title=0&api=1&player_id=player1" width="500" height="281" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>
<button type="button" onclick= "showMsg();">Click Me!</button>
<script>
function showMsg(){
alert('you clicked');
}
$(function() {
var iframe = $('#player1')[0];
player = $f(iframe);
player.addEvent('ready', function() {
player.addEvent('finish', onFinish);
});
function onFinish(id) {
alert('finished');
}
});
</script>