Question

我通过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%);
}

Dev工具目前没有显示错误，尽管有时我会遇到跨域读取阻止（CORB）错误。视频应在页面加载时开始播放，并且还有一个onclick功能可在2种不同的视频背景之间切换。

我愿意以其他方式托管视频，但是由于视频文件很大，我还没有找到其他解决方案！谢谢您的帮助！

Answer 1

这本来应该是评论，但由于我的代表人数不足，我不得不使用答案。

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

Answer 2

请尝试这个

 <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播放器的视频链接，所以我已将该链接替换为实际的视频链接。

Answer 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>

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

希望我进一步推动了你。

Answer 4

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

代替

mutate

尝试

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

背景视频不会在Chrome中显示

4 个答案: