从 .php 插入 <source> onclick 而不阻止网站

如何解决从 .php 插入 <source> onclick 而不阻止网站

好的，我希望有人有一个很好的解决方案，这是可行的。我有一个 index.PHP 文件和一个 videodb MysqL 数据库。数据库将视频存储为 LONGBLOB（不能更改！）。然后 index.PHP 为每一行创建一个 html 视频卡以显示视频。

将整个项目上传到我的网络服务器后，我注意到网站加载非常纯粹。我想我将问题缩小到下面的代码。由于 while() 在继续之前必须将每个视频作为一个整体下载为编码文本。网站无法正常加载。

现在我的想法是查询除下面代码中的 LONGBLOB 之外的所有内容（名称、信息等，未在下面显示）并创建卡片，但仍然保持玩家没有来源。然后在 data 之后插入视频，在页面加载或播放器被点击时。我的想法面临的问题：

带有查询的外部 .PHP，用于存储所有 data LONGBLOB -> 无论我在哪里include，加载和阻止站点都需要很长时间
异步外部 .PHP 包含不会阻止该站点，但我不知道如何在一行准备就绪时使源可用，而不必等待所有加载
如果我为每张特定卡片使用 onclick 加载视频，则每次用户点击卡片时它都会再次加载视频

那么问题是如何在不阻塞网站的情况下很好地加载视频数据？

我当前创建所有卡片并插入视频数据的代码：

<?PHP
  try {
       $dbcon = new PDO("MysqL:host=myhost;dbname=mydb","myusr","mypsswd!");
         } catch (PDOException $e) {
             echo "Cannot connect to database" . $e->getMessage();
         }

         $sql = "SELECT * FROM videodb";
         $statement = $dbcon->prepare($sql);
         $statement->execute();
while ($row = $statement->fetch()) {

             echo "<div class='card  col s12 m3 l2'>";
             switch ($row['type']) {
                 case "video/mp4":
                 case "video/ogg":
                 case "audio/ogg":
                 case "video/webm":
             echo "<div class='videowrap'><video class='responsive-video' controls <source src='data:" . $row['type'] . ";base64," . base64_encode($row['data']) . "'> width='355'/></video></div>";
                     break;

                 case "image/png":
                 case "image/jpeg":
             echo "<img class='responsive-image' width='320' height='240' src='data:" . $row['type'] . ";base64," . base64_encode($row['data']) . "'' alt='' />";
                    break;
             echo "</div";
         }
     }
?>