Question

我无法让我的视频标签显示在页面上。

我知道我已正确引用它们，因为如果我转到localhost：5000 / vid / clip1.mp4（实时链接：http://blue-goji.herokuapp.com/vid/clip1.mp4）它会显示视频控件，但它不会播放任何内容。

谁能告诉我这里发生了什么？

相关HTML：

<div class='container' id='video-grid'>
    <div class='wrapper'>
        <video class='grid-vid' src='vid/clip1.mp4'>Not Supported</video>
    </div> <!-- wrapper -->
    <div class='wrapper'>
        <video class='grid-vid' src='vid/clip2.mp4'>Not Supported</video>
    </div> <!-- wrapper -->
    <div class='wrapper'>
        <video class='grid-vid' src='vid/clip2.mp4'>Not Supported</video>
    </div> <!-- wrapper -->
    <div class='wrapper'>
        <video class='grid-vid' src='vid/clip3.mp4'>Not Supported</video>
    </div> <!-- wrapper -->
    <div class='wrapper'>
        <video class='grid-vid' src='vid/clip4.mp4'>Not Supported</video>
    </div> <!-- wrapper -->
    <div class='wrapper'>
        <video class='grid-vid' src='vid/clip4.mp4'>Not Supported</video>
    </div> <!-- wrapper -->
</div> <!-- container -->

直播链接： http://blue-goji.herokuapp.com/

Answer 1

视频元素确实显示在页面上，它只是与背景混合，因为它是相同的颜色。视频文件或托管它的服务器存在问题。

为了让用户更清楚在视频仍在加载时会有其他内容，或者在这种情况下出现错误，您可以为视频元素添加不同的背景：

video {
    background: gray;
}

视频标签未在页面上显示

1 个答案: