Question

我的网站有问题，我使用JavaScript来显示自定义的视频播放器。我从数据库中加载了几个视频，并连续显示它们，问题是，JavaScript仅适用于第一个视频。我知道我将不得不更改例如变量名以使脚本多次运行，但是还有另一种方法可以为每个videoelement加载相同的脚本吗？

这是我的代码，可以更好地理解：

        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类搜索所有div，然后使用该容器元素创建一个新的VideoPlayer。 VideoPlayer然后在其内部进行搜索以查找和使用其子元素。

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

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

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

Javascript文件导入仅一次

1 个答案: