Импорт файла Javascript работает только один раз
У меня проблема с моим веб-сайтом, я использую 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>
<a href = "index.php?section=deleteVideo&login=success&id=<?php echo "$id"; ?>" class = "btn btn-danger">Video löschen</a>
<br><br><br>
<?php
}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я думаю, что ваш лучший вариант здесь — изменить то, как ваш 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 ищет внутри себя, чтобы найти и использовать свои дочерние элементы.
Затем вы можете поместить этот тег script в заголовок вашего документа вместо того, чтобы встраивать его в компонент видеоплеера:
<head>
<script async src = "js/init.js" />
</head>
Обратите внимание: если таких элементов видеоконтейнера несколько, атрибуты id не будут работать, поскольку в документе может быть только один идентификатор каждого идентификатора. Но это нормально, потому что вы можете захватить контейнеры, а затем искать дочерние элементы по классам, как это делает мой пример кода.
Большое спасибо за такой быстрый ответ! :)