Как определить, когда заканчивается воспроизведение видео на YouTube?

93

Я работаю над сайтом, на котором есть множество встроенных видеороликов YouTube, клиент хочет показывать всплывающее окно, когда видео перестает отображаться.

Я посмотрел на youtube api и, похоже, есть способ определить, когда заканчивается видео:

http://code.google.com/apis/youtube/js_api_reference.html

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

Есть ли способ определить окончание этих видео, не изменяя ни одно из существующих видео (с помощью javascript)?

TK123
источник
2
Единственное, что я могу предложить, - это программно изменить встраиваемые записи для включения enablejsapi=1. Если они находятся в базе данных, изменить srcатрибут будет довольно просто . Вам может понадобиться регулярное выражение, если они статически вставлены в файлы HTML.
скачать

Ответы:

175

Это можно сделать через API плеера YouTube:

http://jsfiddle.net/7Gznb/

Рабочий пример:

    <div id="player"></div>

    <script src="http://www.youtube.com/player_api"></script>

    <script>

        // create youtube player
        var player;
        function onYouTubePlayerAPIReady() {
            player = new YT.Player('player', {
              width: '640',
              height: '390',
              videoId: '0Bmhjf0rKe8',
              events: {
                onReady: onPlayerReady,
                onStateChange: onPlayerStateChange
              }
            });
        }

        // autoplay video
        function onPlayerReady(event) {
            event.target.playVideo();
        }

        // when video ends
        function onPlayerStateChange(event) {        
            if(event.data === 0) {          
                alert('done');
            }
        }

    </script>
TK123
источник
1
Как вы интегрировали это с несколькими видео на одной странице?
motoxer4533
@ motoxer4533 ну, мне не приходилось иметь дело с несколькими видео на одной странице, а только с одним на странице. Не уверен, что API позволяет создавать несколько игроков и обнаруживать их отдельные конечные точки.
TK123
1
не должно быть сложно настроить для нескольких игроков - просто установите несколько var player1, var player2, var player 3 и т. д., а затем запустите код настройки несколько раз - с каждой новой var
codeguy
Также полный пример выполнения чего-то подобного с использованием iframe api можно
найти
3
Для удобства чтения я бы посоветовал YT.PlayerState.ENDED при проверке состояния.
Барт Бург,
-7

Что вы можете сделать, так это включить скрипт на все страницы, который выполняет следующие действия ... 1. Найдите youtube-iframe: ищите его по ширине и высоте по заголовку или находя www.youtube.com в его источнике. Вы можете сделать это ... - пройдя через window.frames цикл for-in, а затем отфильтровать по свойствам

  1. вставить jscript в iframe текущей страницы, добавив обязательную функцию onYoutubePlayerReady http://shazwazza.com/post/Injecting-JavaScript-into-other-frames.aspx

  2. Добавьте слушателей событий и т. Д.

Надеюсь это поможет

Yshouman
источник
1
не уверен, возможно ли это из-за правил междоменного доступа
Ашер Гарланд