Могу ли я начать воспроизведение другого видео после окончания исходного видео? (Вимео)

Hy,

Мне нужно разработать сайт, который будет вставлять видео с Vimeo. Если я использую VimeoAPI, могу ли я прослушать видео, когда оно будет готово? И если оно закончилось, могу ли я запустить другое видео с Vimeo?

Спасибо, Дэйв.


javascript vimeo vimeo-api vimeo-player
person Dávid Pörös    schedule 07.03.2014    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Предположим, что вы использовали код, представленный на странице 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 совпадает с «player_id».

Затем в файле 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) на один из следующего видео, которое вы хотите воспроизвести.

Вы можете использовать альтернативные методы отображения другого видео, и описанный выше метод является очень простым, он предназначен только для отображения запрошенной функциональности.

person consuela    schedule 06.09.2014

arrow_upward
0
arrow_downward

Несколько месяцев назад я написал плагин jQuery для Vimeo. При использовании этого плагина код будет выглядеть примерно так:

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

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

});
person jrue    schedule 10.09.2014

arrow_upward
-1
arrow_downward

Да, ознакомьтесь с API-интерфейсом проигрывателя, чтобы узнать, как получать уведомления о завершении видео и как запускать новые видео https://developer.vimeo.com/player/js-api

person Dashron    schedule 08.03.2014