Can I start playing another video after the original video finished? (Vimeo)

问题

Hy,

I need to develeop a site, that will embed videos from Vimeo. If I use VimeoAPI, can Ilisten when the video is finished? And if it finished, can I start another video from Vimeo?

Thanks, Dave.

回答1:

Assuming that you have used the code provided in the Vimeo Api page you should be using the following to show an initial video:

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

Make sure that the iframe ID is the same with the "player_id".

Then in your custom.js file use the code from the Vimeo API page:

$(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');
    }
});

The code that changes the video, once the first one is finished, is inside the onFinish() function. The code inside this function changes the iframe source (src) to the one of the next video that you want to play.

You could use alternative methods of displaying another video and the above method is a very basic one just to display the requested functionality.

回答2:

I wrote a jQuery Vimeo plugin a few months ago. Using this plugin, the code would be something like:

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

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

});

回答3:

Yes, check out the player API for information on how to be notified when a video is complete, and how to start new videos https://developer.vimeo.com/player/js-api

来源：https://stackoverflow.com/questions/22246262/can-i-start-playing-another-video-after-the-original-video-finished-vimeo

标签

javascript

vimeo

vimeo-api

vimeo-player