Как приостановить встроенное видео YouTube на последнем кадре?

При воспроизведении встроенных видео на YouTube я не хочу отображать миниатюру с плохим разрешением после завершения. Вместо этого я хотел бы иметь изображение с высоким разрешением последнего кадра. Это возможно?

Либо я могу сделать паузу на последнем кадре, либо, может быть, есть способ создать миниатюру последнего кадра с высоким разрешением?


youtube-api youtube youtube-javascript-api
person at.    schedule 03.01.2013    source источник

Ответы (4)


arrow_upward
2
arrow_downward

Вы можете использовать API проигрывателя YouTube, чтобы определить, когда воспроизведение закончилось, и в этот момент выполнить некоторые манипуляции с DOM, чтобы заменить проигрыватель и заменить тег img, указывающий на одну из миниатюр видео. Однако обычно для последнего кадра в видео не будет миниатюры, поэтому вам придется выбрать другую миниатюру.

Если вы просто хотите отключить похожие видео, которые отображаются после окончания видео, вы можете использовать rel= 0 player, но это оставит вас с черным экраном.

person Jeff Posnick    schedule 03.01.2013
comment
Мне нравится это решение — если кто-то смотрит в низком разрешении, этот последний кадр может выглядеть довольно грязным на паузе. Замена тега img позволит вам выбрать миниатюру высокого качества. - person andrewb; 15.03.2015

arrow_upward
0
arrow_downward

Видеопроигрыватель отправляет обратный вызов "onStateChange" со статусом YT.PlayerState.PAUSED перед обратным вызовом со статусом YT.PlayerState.ENDED. Вы можете попробовать здесь.

Я также делаю то же самое. Я просто вывожу оверлей, чтобы перекрыть видео кнопкой повтора, но все равно он появляется в конце видео и потом появляется оверлей (наблюдается какой-то глюк)

person Nagaraj    schedule 30.10.2013

arrow_upward
0
arrow_downward

Я столкнулся с той же проблемой, и, потратив кучу времени на игру с ней, лучшим решением для меня было просто приостановить видео за долю секунды до конца, таким образом сохранив его на этом кадре. Что-то вроде этого:

var player;

      function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
          playerVars: { 'autoplay': 1, 'controls': 0,'loop': 1, 'showinfo': 0, 'disablekb': 1, 'version': 3, 'vq': 'large', 'wmode':'opaque','rel': 0 },
          videoId: 'YOURVIDEOID',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onStateChange,
            'onytplayerStateChange': onStateChange }

        });

      }

    var done = false;
    function onStateChange(event){
        var videoDuration = player.getDuration();
        if (event.data == YT.PlayerState.PLAYING && !done) {
            // pause 0.1 seconds before the end
            setTimeout(pauseVideo, (videoDuration-0.1)*1000);
            done = true;
        }
    }

    function pauseVideo() {
        player.pauseVideo();
    }

После запуска видео (которое мы фиксируем с помощью onStateChange), мы можем получить продолжительность видео из API проигрывателя YouTube (используя player.getDuration), а затем использовать setInterval для определения времени функции, которая приостанавливает видео на 0,1 секунды (или любое другое значение, которое мы выберем). ) до конца.

person David R.    schedule 23.01.2015
comment
Это было бы сложно, но это не учитывает, если видео останавливается, то есть для загрузки во время воспроизведения. - person Giorgio; 03.09.2015

arrow_upward
0
arrow_downward

После того, как я столкнулся с этой проблемой, я закончил с этим, который до сих пор работал для меня довольно последовательно:

var player;
var curTimer;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
                    videoId: 'The Video ID',
                    playerVars: { 'rel':0, 'enablejsapi':1, 'autohide':1, 'wmode':'opaque'}
                });
    player.addEventListener('onReady', 'onPlayerReady');
    player.addEventListener('onStateChange', 'onPlayerStateChange');
}
function onPlayerStateChange(event) {
    var videoDuration = event.target.getDuration();
    var curTime = event.target.getCurrentTime();
    if ( curTime ) {
        /**  Video Already Started  */

        /**  Get video time remaining. */
        videoDuration = videoDuration-curTime;

        /**  Remove old 'setTimeout' function */
        removeTimeout(curTimer);
    }
    /**
        Note: The '.25' is time subtracted to stop video on last frame.
        Adjust this as needed.
    */
    /**  Add/Re-Add 'setTimeout' function with video time remaining. */
    curTimer = setTimeout(pauseVideo, (videoDuration-.25)*1000);
}
function removeTimeout(elTimer){
    /** Remove old timer */
    clearTimeout(elTimer);
}
function stopVideo() {
    player.stopVideo();
}

Пояснения и/или примечания находятся в комментариях.

person JamesD    schedule 30.12.2015