Javascript 文件导入只需一次答案

【问题标题】：Javascript file import works just one timeJavascript 文件导入只需一次
【发布时间】：2019-08-29 18:31:01
【问题描述】：

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

【问题讨论】：

标签： javascript import include

【解决方案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 类的 div，然后使用该容器元素创建一个新的 VideoPlayer。 VideoPlayer 然后在自身内部搜索以查找和使用其子元素。

然后你可以把这个脚本标签放到你文档的头部，而不是嵌入到视频播放器组件中：

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

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

【讨论】：

非常感谢您的快速回复！ :)