Arhn - архитектура программирования

Заставьте onYouTubeIframeAPIReady() работать в обратном вызове успеха Ajax

Я получаю видеоданные через Ajax из своей БД, и мне нужно загрузить видео YouTube в проигрыватель в обратном вызове Ajax success.

Вне Ajax onYouTubeIframeAPIReady() работает нормально. Но внутри Ajax это не работает. Ошибок нет, вроде не срабатывает.

Вот весь мой код:

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

// JS
var tag = document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player, video;

$('.content').on('click', '.view', function() {
    video = $(this).data('id');
    
    $.ajax({
        type: 'POST',
        url: '/scripts/video-view.php',
        dataType: 'json',
        data: {video_id:video},
        success: function(data) {
            window.onYouTubeIframeAPIReady = function() {
                player = new YT.Player('player', {
                    height: '390',
                    width: '640',
                    videoId: 'M7lc1UVf-VE',
                    playerVars: {
                        'modestbranding': 1
                    }
                });
            }
        }
    });
});

Любые идеи, почему это не работает в обратном вызове успеха Ajax?

P.S. Причина, по которой мне это нужно через Ajax, заключается в том, чтобы динамически загружать videoId и некоторые playerVars. videoId — это статическое значение в приведенном выше примере для демонстрационных целей. В реальном времени это динамическое значение, полученное из БД. Кроме того, я тестирую это на реальном сервере, а не на локальном хосте.

javascript ajax youtube-iframe-api
06.05.2021

  • Где твой звонок из Аякса? 06.05.2021
  • @Reyno Добавил весь мой код. 06.05.2021

Ответы:


1

Кажется, я нашел один из способов сделать это. Это может быть не лучший или идеальный способ, но, похоже, он делает большую часть того, что мне нужно.

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

// JS
var player, videoId;

var tag = document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        playerVars: {
            'fs': 0,
            'modestbranding': 1,
            'playsinline': 1
        }
    });
}

$('.content').on('click', '.view', function() {
    videoId = $(this).data('id');
    
    $.ajax({
        type: 'POST',
        url: '/scripts/video-view.php',
        dataType: 'json',
        data: {video_id:videoId},
        success: function(data) {
            player.loadVideoById({'videoId':data.id, 'startSeconds':data.start});
        }
    });
});

Ajax возвращает data.id в качестве идентификатора видео и data.start в качестве времени начала видео. Приведенной выше настройки достаточно для динамического идентификатора видео и времени начала, полученных из БД. Думаю, я могу жить со статическими значениями playerVars.

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

06.05.2021
Новые материалы
Коллекции публикаций по глубокому обучению
Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
Представляем: Pepita
Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
Советы по коду Laravel #2
1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
3 способа решить квадратное уравнение (3-й мой любимый) -
1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
Создание VR-миров с A-Frame
Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
Демистификация рекурсии
КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..