Question

我有一个视频列表，点击后会以模态打开。但是，当我点击一个时，它会为每个视频加载第一个视频，即使它们是不同的视频。我的问题是如何确保每个视频都与点击出现在模态中的视频相同。

这是我的代码：

<script type="text/javascript">
    // event handler on click video
    $('#left-videos video').on('click', function() {
        document.getElementById("v-modal").style.display = "block";

        $('#clicked-video').html("<video class=\"w3-round w3-border\" width=\"300\" height=\"170\" id=\"other-video\" controls><source src=" + $('video source').attr('src') + " type=\"video/mp4\"></video>");
    });
</script>

<!-- video modal -->
<div class="w3-modal" id="v-modal">
    <div class="w3-modal-content w3-card-4 w3-theme-d2 w3-round" style="width: 400px;">
        <div class="w3-container">
            <p class="w3-center w3-small" id="video-modal">
                <span onclick="document.getElementById('v-modal').style.display = 'none'" class="w3-closebtn" id="close-video">&times;</span>

                <script type="text/javascript">
                    $('#close-video').on('click', function() {
                        $('video').trigger('pause');
                    });
                </script>
            </p>

            <div class="w3-row-padding w3-center" id="clicked-video"></div>

            <br><br>

            <div class="w3-clear"></div>
        </div>
    </div>
</div>
<!-- end video modal -->

为了更好地解释，这是一个截图：

正如您所看到的，第二个视频是不同的，但它显示了模态中的第一个视频。

任何帮助都将不胜感激。

谢谢！

哦，还有一件事，我不确定它会有所作为，但这里是我用来获取所有视频的PHP代码：

$video_dir = @array_diff(scandir(getcwd() . '/public/images/profile/' . $params . '/videos/', 1), array('.', '..'));

if (count($video_dir) > 0) {
    $videos = array();

    foreach ($video_dir as $video) {
        $videos[] = "<video style=\"width: 100%; height: 100%;\" class=\"w3-margin-bottom w3-round w3-border\">
           <source src=\"/images/profile/$params/videos/$video\" type=\"video/mp4\">
        </video>";
    }

    natsort($videos);

    $layout->setVariable('my_videos', $videos);
}

和视图部分

<div id="side-5" class="w3-accordion-content w3-container">
    <div class="w3-row-padding" id="left-videos">
    <br>
        <?php
            if (count($this->layout()->my_videos) > 0):
                foreach ($this->layout()->my_videos as $vids):
        ?>

        <div class="w3-half">
            <?php echo $vids; ?>
        </div>

        <?php
                endforeach;
            else:
        ?>
              <p>Upload <a href="<?php echo $this->url('members/profile', array('action' => 'upload-file')); ?>">videos</a>!</p> 
        <?php

            endif;
        ?>
    </div>
</div>

点击后的视频无法加载正确的视频

0 个答案: