Question

HY，

我需要开发一个可以嵌入Vimeo视频的网站。如果我使用VimeoAPI，可以在视频播放完毕时隐藏吗？如果它完成了，我可以从Vimeo开始另一个视频吗？

谢谢，戴夫。

Answer 1

是的，请查看播放器API，了解视频完成后如何获得通知以及如何开始新视频的信息https://developer.vimeo.com/player/js-api

Answer 2

假设您使用了Vimeo Api页面中提供的代码，则应使用以下内容显示初始视频：

<!doctype html>
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="custom.js" ></script>
    </head>

    <body>
        <iframe id="vimeoplayer"
            src="//player.vimeo.com/video/76979871?api=1&player_id=vimeoplayer"
            width="100%" height="100%" webkitallowfullscreen mozallowfullscreen
            allowfullscreen ></iframe>

        <div>
            <button>Play</button>
            <button>Stop</button>
            <p>Status: <span class="status">&hellip;</span></p>
        </div>
    </body>
</html>

确保iframe ID与＆＃34; player_id＆＃34;相同。

然后在 custom.js 文件中使用Vimeo API页面中的代码：

$(function() {
    var player = $('#vimeoplayer');
    var url = window.location.protocol + player.attr('src').split('?')[0];
    var status = $('.status');

    // Listen for messages from the player
    if (window.addEventListener){
        window.addEventListener('message', onMessageReceived, false);
    }
    else {
        window.attachEvent('onmessage', onMessageReceived, false);
    }

    // Handle messages received from the player
    function onMessageReceived(e) {
        var data = JSON.parse(e.data);

        switch (data.event) {
            case 'ready':
                onReady();
                break;

            case 'playProgress':
                onPlayProgress(data.data);
                break;

            case 'pause':
                onPause();
                break;

            case 'finish':
                onFinish();
                break;
        }
    }

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

    // 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);
        player[0].contentWindow.postMessage(data, url);
    }

    function onReady() {
        status.text('ready');

        post('addEventListener', 'pause');
        post('addEventListener', 'finish');
        post('addEventListener', 'playProgress');
    }

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

    // when the video is finished
    function onFinish() {
        status.text('finished');

        // load the next video
        document.getElementById('vimeoplayer').src = "//player.vimeo.com/video/104990881?api=1&player_id=vimeovideo";
    }

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

完成第一个视频后，更改视频的代码位于 onFinish（）功能中。此函数中的代码将iframe源（src）更改为您要播放的下一个视频。

您可以使用其他方法显示另一个视频，上述方法只是显示所请求的功能，非常基本。

Answer 3

几个月前我写了jQuery Vimeo plugin。使用此插件，代码将类似于：

$("#somevideo").on("finish", function(){

    $("#anothervideo").vimeo("play");

});

原始视频完成后我可以开始播放另一个视频了吗？（Vimeo的）

3 个答案:

原始视频完成后我可以开始播放另一个视频了吗？ （Vimeo的）

3 个答案:

原始视频完成后我可以开始播放另一个视频了吗？（Vimeo的）