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

YouTube IFrame API, загрузка данных PHP и добавление функции управления проигрывателем

У меня есть видеоплеер YouTube, управляемый базой данных, где видеокоды загружаются из таблицы и воспроизводятся в файле <div>. Но у меня есть 2 проблемы:

1) Как загрузить видеокоды из моего php-кода в Javascript?

Вот мой PHP-код:

<?php
$code_sql = "SELECT * FROM music_codes WHERE id = '$url_id'";
$code_res = mysqli_query($con, $code_sql);
while($code = mysqli_fetch_assoc($code_res)){

    $code_1 = $code["one"];
    $code_2 = $code["two"];
    $code_3 = $code["three"];
    $code_4 = $code["four"];
    $code_5 = $code["five"];
    $code_6 = $code["six"];
    $code_7 = $code["seven"];
    $code_8 = $code["eight"];

};
?>

И Javascript, где мне нужно отобразить php:

<div id="player"></div>
<script src="//www.youtube.com/iframe_api"></script>
<script>
    /**
     * Put your video IDs in this array
     */
    var videoIDs = [
        ' ** $code_1 ** ', // PHP Code Display
        ' ** $code_2 ** ', // PHP Code Display
        etc,
        etc
    ];

    var player, currentVideoId = 0;

    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '350',
            width: '425',
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    function onPlayerReady(event) {
        event.target.loadVideoById(videoIDs[currentVideoId]);
    }

    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) {
            currentVideoId++;
            if (currentVideoId < videoIDs.length) {
                player.loadVideoById(videoIDs[currentVideoId]);
            }
        }
    }
</script>

2) Как улучшить контроль пользователей над пропуском видео? На данный момент он воспроизводит каждое видео одно за другим, но нет возможности позволить им щелкнуть следующее или предыдущее. Это очень необходимо для того, что я пытаюсь сделать.


Ответы:


1

Вам нужно создать функцию для изменения currentVideoId:

function next(){
    currentVideoId++;
    if (currentVideoId < videoIDs.length) {
            player.loadVideoById(videoIDs[currentVideoId]);
    }
}

function prev(){
    currentVideoId--;
    if (currentVideoId >= 0) {
            player.loadVideoById(videoIDs[currentVideoId]);
    }
    else currentVideoId = 0;
}

HTML:

<input type="button" value=""Next" onclick="next()" />
<input type="button" value=""Previous" onclick="prev()" />

И так же для предыдущего.

22.02.2017
  • И может ли это просто идти ниже function onPlayerStateChange(event)? 22.02.2017
  • Основная часть function onPlayerStateChange(event) — это player.loadVideoById(videoIDs[currentVideoId]); функция next(). 22.02.2017
  • function onPlayerStateChange(event) предназначен только для изменения видео когда оно закончилось. Но вы не хотите, чтобы это закончилось. 22.02.2017
  • Я добавил его в конец своего Javascript, и функция next работает отлично. Я, должно быть, ошибся с previous, поскольку я получаю сообщение об ошибке внутри видеоплеера. Какую часть кода мне нужно изменить? Я только что изменил < на > 22.02.2017
  • Я добавил предыдущий фонд. 22.02.2017
  • Великолепно! Работает отлично. Я согласен, но не знаете ли вы ответ на первую часть моего вопроса... Как загрузить переменную PHP в Javascript? 22.02.2017
  • Позор мне! Я не знаю PHP. Но вы можете прочитать это: stackoverflow.com/questions/10708974 /. Спасибо за принятие. 22.02.2017
  • Спасибо еще раз. Это не совсем работает с кодом, который у меня есть, но мне есть с чем работать. 22.02.2017
  • Новые материалы

    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге 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 , и использованием..

    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..