Импорт файлов Javascript работает только один раз - PullRequest
Новая
       52

Импорт файлов Javascript работает только один раз

0 голосов
/ 08 апреля 2019

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

Вот мой код, чтобы лучше понять: 

        while ($row = mysqli_fetch_assoc($result))
            {
            $location = "../" . $row['pfad'] . $row['video'];
            $id = $row['id'];
            ?>
            <br>
            <p><?php echo "$row[titel]"; ?></p>

            <div class="video-container">
                <div class="c-video">
                    <video id="video" class="video" src="<?php echo "$location"; ?>"></video>
                    <div class="controls">
                        <div id="process-bar" class="process-bar">
                            <div id="currentBuffer" class="currentBuffer"></div>
                            <div id="currentProcess" class="currentProcess"></div>
                        </div>

                        <div class="buttons">
                            <button id="skip-back" class="skip-back" data-skip="-10"></button>
                            <button id="play-pause"></button>
                            <button id="skip-front" class="skip-front" data-skip="10"></button>
                            <span id="videoCurrentTime" class="videoTimer"></span> <span class="videoTimer">/</span> <span id="videoTime" class="videoTimer"></span>
                            <button id="sound" class="highSound"></button>
                            <input type="range" name="volume" class="volume-slider" id="volume-slider" min="0" max="1" value="1" step="0.05">
                            <button id="fullscreen" class="fullscreen"></button>
                        </div>
                    </div>
                </div>
                <script type="text/javascript" src="../javascript/videoplayer.js"></script>
            </div>

            <br><br>
            <a href="index.php?section=editVideo&login=success&id=<?php echo "$id"; ?>" class="btn btn-warning">Video bearbeiten</a>
            &nbsp;&nbsp;&nbsp;
            <a href="index.php?section=deleteVideo&login=success&id=<?php echo "$id"; ?>" class="btn btn-danger">Video löschen</a>
            <br><br><br>
            <?php
            }

1 Ответ

0 голосов
/ 08 апреля 2019

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

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

// assuming you have jQuery, since that makes this example more concise
class VideoPlayer {
  constructor(container) {
     // find all the subcomponents
     this.video = $(container).find('video').first()
     this.processBar = $(container).find('div.process-bar').first()
     this.buttons = $(container).find('div.buttons').first()

     // ... etc, do that for all things here, bind click handlers, etc
  } 
}

// wait for the page to load so all video-container elements are on the page
// so find them, and create a new VideoPlayer for each.
window.addEventListener('load', () => {
  const allVideos = []
  $('div.video-container').each(function () {
    allVideos.push(new VideoPlayer(this))
  })
})

Этот код ищет все элементы div с классом video-container, а затем создает новый VideoPlayer с этим элементом контейнера. VideoPlayer затем ищет внутри себя, чтобы найти и использовать свои дочерние элементы.

Затем вы можете поместить этот тег сценария в заголовок документа, а не встраивать его в компонент видеопроигрывателя: 

<head>
  <script async src="js/init.js" />
</head>

Как примечание, если имеется несколько таких элементов видео-контейнера, атрибуты id не будут работать, так как в документе может быть только один из каждого идентификатора. Но это нормально, потому что вы можете захватить контейнеры, а затем искать детей по классам, как это делает мой пример кода.

...