背景视频不会在 Chrome 中显示答案

【问题标题】：Background video won't show in Chrome背景视频不会在 Chrome 中显示
【发布时间】：2019-07-12 12:46:16
【问题描述】：

我通过 vid.ly 在我的作品集的第一页添加了背景视频标题。它在移动设备上播放没有问题。但是，当我尝试在笔记本电脑上的 Chrome 中打开它时，视频不会显示。 https://mcnamarakc.github.io/kathleenmcnamara/

如果我打开 chrome 开发工具并刷新页面，视频将毫无问题地播放。

<video style="display: none" id="toggleDisplayFire" playsinline="playsinline" 
    autoplay="autoplay" muted="muted"loop="loop">
    <source src="https://vid.ly/7f4q4w" type="video/mp4">
</video>

 $(document).ready(function () {
   $('#toggleDisplayFire').show();
 });

header video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

开发工具目前没有显示任何错误，但有时我会收到跨域读取阻塞 (CORB) 错误。视频应该在页面加载时开始播放，并且还有一个 onclick 功能可以在 2 个不同的视频背景之间切换。

我愿意以不同的方式托管视频，但我还没有找到其他解决方案，因为视频文件很大！谢谢你的帮助！！

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

请试试这个

 <video style="display: none" id="toggleDisplayFire" playsinline="playsinline" autoplay="autoplay" muted="muted"
    loop="loop">
    <source src="https://d3fenhwk93s16g.cloudfront.net/7f4q4w/webm_480.webm?t=15629361515d28835787bda" type="video/mp4">
</video>

您正在放置 vid.ly 播放器的视频链接，因此我已将该链接替换为实际视频链接。

【讨论】：

解决了。非常感谢！这让我发疯了。

【解决方案2】：

这应该是评论，但由于我没有足够的代表，我不得不使用答案。

它仅在开发工具打开时显示的原因可能是因为屏幕较小。您的代码的响应能力可能是问题，看看您是否没有将视频容器设置为在某些屏幕尺寸下隐藏。

【讨论】：

【解决方案3】：

您似乎给出了错误的src 属性。此链接https://vid.ly/7f4q4w 返回整个文档，不是仅返回所需的视频文件。因此，我建议您自己托管视频。

此外，您可以获取视频的真实链接 (https://d3fenhwk93s16g.cloudfront.net/7f4q4w/webm_480.webm?t=15629357565d2881cc4384f) 并使用它，但它可能在未来会发生变化，因此您需要备用为此。

这是一个带有真实链接的工作示例：

$(document).ready(function() {
  $('#toggleDisplayFire').show();
});

header video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video style="display: none" id="toggleDisplayFire" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
    <source src="https://d3fenhwk93s16g.cloudfront.net/7f4q4w/webm_480.webm?t=15629357565d2881cc4384f" type="video/mp4">
</video>

最后，我真的建议您自己托管资产。

希望我把你推得更远。

【讨论】：

【解决方案4】：

这可能是因为您的视频格式不是 mp4，而是其他格式。

代替

<source src="https://vid.ly/7f4q4w" type="video/mp4">

试试

<source src="https://vid.ly/7f4q4w" type="video/webm">

【讨论】：