Fire Event When Vimeo Video Stops Playing

Vimeo Player attaching events - ended

To fire an event after the video is completed you should use player.onfinish() - please see the code below for more information.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://player.vimeo.com/api/player.js"></script>
    <form id="form1" runat="server">
        <div>
            <%--<iframe id="player1" src="https://player.vimeo.com/video/76979871?api=1&player_id=player1" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>--%>
            <iframe id="player1" src="https://player.vimeo.com/video/76979871?api=1" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            <%--<iframe width="560" height="315" src="//player.vimeo.com/video/5705212?api=1&player_id=video1" id="video1"></iframe>--%>
            <iframe width="560" height="315" src="//player.vimeo.com/video/5705212?api=1" id="video1"></iframe>
        </div>

        <script>

            $(document).ready(function () {
                var x = document.querySelectorAll("iframe");
                var nodelist = x.length;
                alert(nodelist);

                for (i = 0; i < nodelist; i++) {

                    var player = new Vimeo.Player(x[i]);

                    player.on('play', function () {
                        console.log('played the video!');
                    });

                    player.on('ended', function () {
                        console.log('ended the video!');
                    });

                    player.on('finish', function () {
                        console.log('finished the video!');
                        player.getDuration().then(function (duration) {
                            // duration = the duration of the video in seconds
                            console.log('video length is:', duration);
                        }).catch(function (error) {
                            // an error occurred
                        });
                    });

                    player.on('playProgress', function () {
                        console.log('Video in progress!');
                    });

                    //player.getVideoTitle().then(function (title) {
                    //    console.log('title:', title);
                    //});
                }
            });

        </script>

how to trigger an event when embedded vimeo video starts to play

You can use the Froogaloop library. Here is a link to download:
https://github.com/vimeo/player-api/tree/master/javascript

There is a detailed example of using it on the Vimeo developer website under the section "Calling the API with Froogaloop":
http://developer.vimeo.com/player/js-api

Vimeo Api - Can't fire playProgress event using Froogaloop

I had the same problem and after a long time looking at every detail of the vimeo example:

http://player.vimeo.com/playground

I found a solution for this, just send as parameter to the url vimeo name "player_id", ie the id of your iframe.

http://player.vimeo.com/video/76979871?player_id=player_1

Fire Event When Vimeo Video Stops Playing

Vimeo Player attaching events - ended

how to trigger an event when embedded vimeo video starts to play

Vimeo Api - Can't fire playProgress event using Froogaloop

Related Topics

Leave a reply