HTML5 Video API 不显示视频但产生声音答案

【问题标题】：HTML5 Video API is not showing videos but producing soundHTML5 Video API 不显示视频但产生声音
【发布时间】：2019-12-03 12:43:36
【问题描述】：

我正在使用 Laravel 构建一个 Web 应用程序。我想使用 HTML5 视频 API 将视频添加到特定部分，视频仅播放声音但不显示。这是我下面的代码

<video controls width="450" height="300" autoplay="false">   
    <source src="{{ asset('site/videos/iUOL Welcome Video.mp4') }}" type="video/mp4">
    <source src="{{ asset('site/videos/iUOL Welcome Video.flv') }}" type="video/flv">
    Sorry, your browser doesn't support embedded videos.
</video>

我在 Chromium、Firefox 和 Chrome 上都测试过。

【问题讨论】：

我们可能无法根据您目前所展示的内容确定实际问题可能是什么。到目前为止，您做了什么来尝试缩小范围？
@04FS 非常感谢。我认为问题来自视频。经过数小时的搜索，我只是想使用另一个视频进行测试，幸运的是它可以完美运行。再次感谢。

标签： php laravel html5-video

【解决方案1】：

检查您的视频是否正确编码，那么只有它支持 HTML5 视频标签。

HTML5 视频需要带有 H264 视频编解码器和 AAC 音频编解码器的 MP4 视频。

将您的视频 mp4 文件转换为 H.264 编码并检查。

【讨论】：

谢谢，问题出在视频上。编码错误。

【解决方案2】：

您是否尝试过删除视频名称中的空格？

【讨论】：

【解决方案3】：

你检查过你的CSS吗？这里的问题在您的样式表中。

如果视频正在播放，那么它在自动播放模式下工作正常。

<div class="video">
// Add your code here.
</div>

CSS 应该是：

.video{
     display: inline-block;
     width: 100% !important;
 }

【讨论】：