Question

I have multiple iFrames within my page. I would like to attach events for "play" and "ended" events. The "play" event gets fired but the "ended" event does not fire. The below is the code that I use to attach the events.

<!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 width="560" height="315" src="//player.vimeo.com/video/5705212?api=1&player_id=video1" id="video1"></iframe>
        </div>
    </form>
    <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!');
                });
            }
        });

    </script>
</body>
</html>

Answer 1

要在视频完成后触发事件，您应该使用player.onfinish（） - 请参阅下面的代码以获取更多信息。

<!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>

Vimeo Player attaching events - ended

1 个答案: