Javascript 文件导入只工作一次

Question

我的网站出现问题，我使用 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
            }

Answer 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))
  })
})

此代码搜索所有带有 video-container class 的 div，然后使用该容器元素创建一个新的 VideoPlayer。 VideoPlayer 然后在自身内部搜索以查找并使用其子元素。

那么您可以将此脚本标签放入文档的头部，而不是将其嵌入到视频播放器组件中：

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

请注意，如果有多个此类视频容器元素，id 属性将不起作用，因为文档中每个 ID 只能有一个。但这没关系，因为您可以获取容器，然后像我的示例代码那样按 class 搜索子项。

Javascript 文件导入只工作一次

Javascript file import works just one time

javascript

import

include