HTML页面无法显示数据库视频列表，疑为.append()方法问题求解决方案

你的代码里视频无法显示，核心问题出在jQuery的.append()处理片段HTML的方式，还有几个额外的规范问题，具体如下：

1. 片段式append导致标签自动闭合
   你分别append <video> 开头、<source>、</video> 结尾，但jQuery会把每个片段当作独立DOM节点处理，实际渲染时<video>会被自动闭合，<source>变成了<video>的兄弟元素，而非子元素，视频自然无法加载。

2. 重复的id属性
   循环中所有视频都用id='my-video'，HTML要求id必须唯一，这不仅违反规范，还会导致Video.js无法正确识别多个视频元素。

3. 动态创建的Video.js未初始化
   Video.js默认只会在页面加载完成后初始化已存在的视频元素，动态生成的需要手动调用初始化方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://vjs.zencdn.net/7.20.3/video-js.css" rel="stylesheet" />
    <script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>
</head>

<body>
   <table id="tbl_post" border="0" width="100%" cellpadding="0" cellspacing="0"> </table>
</body>

<script>
$(document).ready(function() {
   $.getJSON("today.php", function(dados1) {
     // 清空表格原有内容
     $('#tbl_post').empty();
                        
     Object.keys(dados1).forEach(function (i) {     
        // 拼接完整的video HTML字符串，确保source嵌套在video内部
        const videoHtml = `
            <tr>
                <td>
                    <video id="my-video-${i}" class="video-js" controls preload="auto" width="340" height="264" data-setup='{}'>
                        <source src="${dados1[i].video}" type="video/mp4">
                    </video>
                </td>
            </tr>
        `;
        // 一次性append完整的DOM片段
        $('#tbl_post').append(videoHtml);
        // 手动初始化当前的Video.js实例
        videojs(`my-video-${i}`);
      });
   });
});
</script>
</html>

关键改动说明： #

• 整体拼接HTML字符串：把<tr>、<video>、<source>整合成一个完整的字符串后再append，确保DOM结构正确嵌套。
• 唯一id生成：用my-video-${i}给每个视频分配唯一id，避免冲突。
• 手动初始化Video.js：每次append后调用videojs()初始化对应视频元素。
• 优化表格清空：用empty()替代复杂的移除操作，更简洁高效。
• 调整脚本位置：把script放到body末尾，确保DOM元素加载完成后再执行脚本，避免找不到#tbl_post的潜在问题。

内容的提问来源于stack exchange，提问作者aldo silva