Як визначити, коли відео з YouTube закінчується?


93

Я працюю на сайті, на якому є маса вбудованих відео YouTube, клієнт хоче показати спливаюче вікно, коли відео припиняє показ.

Я подивився YouTube api, і, здається, є спосіб виявити, коли закінчується відео:

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

але я не можу вставити відео, як вони згадали на цій сторінці, оскільки всі відео вже є на сайті (тисячі, додані вручну шляхом вставлення коду для вставки).

Чи є спосіб виявити закінчення цих відео, не змінивши жодне з існуючих відео (за допомогою javascript)?


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>

1
Як ви інтегрували це з кількома відео на одній сторінці?
motoxer4533

@ motoxer4533 ну мені не довелося мати справу з кількома відео на одній сторінці, а лише по одному на сторінку. Не впевнений, чи дозволяє API створювати декілька гравців та виявляти їхні окремі кінцеві точки.
TK123

1
не повинно бути важко налаштувати для кількох гравців - просто налаштуйте декілька var player1, var player2, var player 3 тощо, потім запустіть код налаштування кілька разів - з кожним новим var
codeguy

Також повний приклад того, як зробити щось подібне, використовуючи iframe api тут developers.google.com/youtube/…
JeremyWeir

3
Для читабельності я порадив би YT.PlayerState.ENDED під час перевірки стану.
Барт Бург

-6

Що вам може знадобитися, так це включити на всі сторінки скрипт, який робить наступне ... 1. знайдіть youtube-iframe: шукайте його за шириною та висотою за заголовком або за адресою www.youtube.com у його джерелі. Ви можете зробити це за допомогою ... - перегляду циклу window.frames за вхідним циклом, а потім відфільтрувати за властивостями

  1. ввести jscript в iframe поточної сторінки, додавши функцію onYoutubePlayerReady, що повинна включати функцію http://shazwazza.com/post/Injecting-JavaScript-into-other-frames.aspx

  2. Додайте слухачів події тощо.

Сподіваюся, це допомагає


1
не впевнений, що це можливо через міждоменні правила
Ашер Гарланд
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.