如何将Card内的WebM视频链接从图片改为可播放视频？

问题说明 #

当前代码用img标签加载WebM格式的视频链接，仅能显示图片占位符，无法实现播放功能。需要替换为原生video元素，让用户可以直接播放视频。

修改步骤及完整代码 #

只需要调整Loadanswers函数中创建视频元素的逻辑，同时微调卡片样式避免布局错乱：

</head>
<body>
    <h1>Welcome</h1>
    <h4>Get A Free Video Answer For Your Question</h4>
    <input class="question_input" type="text" placeholder="write your question here" />
    <button class="button" type="submit" onclick="submit_question()">submit</button>
    <div class="container"></div>

    <script>
        function submit_question(){
            const Ans_value = document.querySelector('.question_input').value;
            //send to server
            fetch('http://localhost:3000/answers', { 
                method:'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({Ans_value})
            })
        }
        function newEl(type, attrs={}){
            const el = document.createElement(type);
            for (let attr in attrs ){
                const value = attrs[attr];

                if (attr == 'innerText') el.innerText= value;
                else el.setAttribute(attr, value);
            }
            return el;
        } 
        async function Loadanswers(){
            const res = await fetch('http://localhost:3000/answers');
            const answers = await res.json();

            const ctr = document.querySelector('.container'); 

            answers.forEach(answer => {
                const card = newEl('div', {class: 'card'});
                const searchresults_quant = newEl('h4',{innerText: answer.searchresults_quant});
                const searchresultsq_title = newEl('h4', {innerText: answer.searchresultsq_title});
                const searchresultsq1 = newEl('h4', {innerText: answer.searchresultsq1});       
                // 替换img为video元素，添加播放控制属性
                const Q_url1 = newEl('video', {
                    src: answer.Q_url1,
                    controls: true,
                    width: '100%',
                    preload: 'metadata'
                });
                
                card.appendChild(searchresults_quant);
                card.appendChild(searchresultsq_title);
                card.appendChild(searchresultsq1);
                card.appendChild(Q_url1);

                ctr.appendChild(card);
            })  
        }    
        Loadanswers();
    
    </script>
    <style>
        .button{
            float: left;
            width: 20%;
            padding: 10px;
            background: #2196F3;
            color: white;
            font-size: 17px;
            border: 1px solid grey;
            border-left: none; /* Prevent double borders */
            cursor: pointer;
        }
        .question_input{
            display: block;
            padding: 10px;
            font-size: 17px;
            border: 1px solid grey;
            float: left;
            width: 80%;
            background: #f1f1f1;
            
        }
        .container{
           display: table-caption;
        }
        .card{
            margin: 10px;
            /* 原padding过大导致内容溢出，调整为合适值 */
            padding: 20px;
            background-color: rgb(191, 191, 245);
            box-shadow: 0 4px 8px 0 rgba(231, 10, 10, 0.2);
            transition: 0.3s;
            width: 50%;
            /* 去掉固定高度，让内容自适应 */
        }
        /* 可选：给视频添加圆角，和卡片风格统一 */
        .card video {
            border-radius: 4px;
            margin-top: 10px;
        }
    </style>

</body>

关键修改点 #

• 替换元素类型：将img标签改为video标签，现代浏览器原生支持WebM格式的视频播放
• 添加播放控制：设置controls: true，让视频显示播放、暂停、音量等交互按钮
• 优化加载与布局：设置width: '100%'让视频自适应卡片宽度，preload: 'metadata'仅加载视频元数据（封面、时长），提升页面加载效率
• 调整卡片样式：把原卡片的padding: 300px改为20px，去掉固定高度，避免视频被挤压或内容溢出

内容的提问来源于stack exchange，提问作者AMEER SAID