javascript - 我想在用户单击特定链接后在 div 弹出窗口中播放视频

Question

您好，我在 PHP 中生成了一个表。该代码在每个文件夹视频中查找视频文件夹，并创建一个包含一些数据和视频文件超链接的表格。

<table id="mediatbl">
    <thead>
        <tr>
            <th>Week</th>
            <th>Hall</th>
            <th>Link</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody>
    <?php
        $directory = "./media/week/";
        $scanned_directory = array_diff(scandir($directory), array('..', '.'));
        // Scan all weekly folders
        foreach ($scanned_directory as &$week) 
        {
            $mediafiles = $directory."/".$week;
            // Scan all the mediafiles in the weekly folder
            $dir = new DirectoryIterator($mediafiles);

            foreach ($dir as $fileinfo) 
            {
                if (!$fileinfo->isDot()) 
                {
                    $mediafile=$fileinfo->getFilename();
                    echo "<tr>
                            <td>$week</td>
                            <td>Unknown</td>
                            <td>
                                <a class=\"btn\" data-popup-open=\"popup-1\" href=\"#\">$mediafile</a></p>
                            </td>
                            <td>Unknown</td>
                        </tr>";

                }
            }
        }
    ?>

我在网上找到了一些不错的片段，可以触发 div 弹出窗口。

<div class="popup" data-popup="popup-1">
    <div class="popup-inner">
        <p><a data-popup-close="popup-1" href="#">Close</a></p>
        <a class="popup-close" data-popup-close="popup-1" href="#">x</a>
    </div>
</div>

<script>    
    $(function() {
        //----- OPEN
        $('[data-popup-open]').on('click', function(e)  {
            var targeted_popup_class = jQuery(this).attr('data-popup-open');
            $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);

            e.preventDefault();
        });

        //----- CLOSE
        $('[data-popup-close]').on('click', function(e)  {
            var targeted_popup_class = jQuery(this).attr('data-popup-close');
            $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
            e.preventDefault();
        });
    });
</script>

有一些 css，但我认为它不会对答案有所帮助(我可能是错的)。我想要实现的是简单地将文件链接传递到一个很好的播放中的弹出窗口中，它可以是 HTML5 视频标签或其他任何内容。我摆弄了一段时间，但找不到让它工作的方法。我的 javascript 技能很低，我想学习更多。

有人有好主意吗？解决方案？指针？提前致谢。

Answer 1

它可能对你有帮助(因为文本太长我不能把它写成评论)

将您打开的代码块更改为:

//----- OPEN
    $('[data-popup-open]').on('click', function(e)  {
        var targeted_popup_class = jQuery(this).attr('data-popup-open');
        var targeted_popup_link = jQuery(this).attr('href');
        $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
        $('[data-popup="' + targeted_popup_class + '"]').append('<video controls="controls" width="400" height="280"><source type="video/mp4" src="'+targeted_popup_link+'"></video>');

        e.preventDefault();
    });