在Angular 5 App中首次加载App时背景视频不播放

Posted 2023-05-07

【中文标题】在Angular 5 App中首次加载App时背景视频不播放

【英文标题】：Background video not playing when App is loaded for the first time in Angular 5 App

【发布时间】：2018-12-04 03:52:34

【问题描述】：

我正在尝试将视频保留为我的 Angular 5 应用程序的背景。但是，当页面第一次加载时，视频没有播放。但是如果我转到任何其他页面，然后再次返回主页，则视频正在播放。

到现在我都试过了

1.

<video id="v-control"  autoplay="" loop="" tabindex="0">
   <source type="video/mp4" src="assets/img/MyVideo.mp4"  />
   <source type="video/webm" src="assets/img/MyVideo.webm"   />
</video>

2。 Jquery plugin for background video

<div data-vide-bg="MyVideo">
  <video id="v-control"  autoplay="" loop="" tabindex="0">
    <source type="video/mp4" src="assets/img/MyVideo.mp4"  />
    <source type="video/webm" src="assets/img/MyVideo.webm"   />
  </video>
</div>

并包含

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="src/jquery.vide.js"></script>

在 index.html 中

我仍然面临同样的问题。谁能帮忙，我哪里做错了？

【问题讨论】：

哪个浏览器？视频的大小是多少？如果网速慢的话，下载和显示需要一些时间

@AravindS 视频在 mozilla、safari 上播放，但不在 chrome 上。视频大小为 750KB。我的网速不错。我仍然无法弄清楚我哪里出错了

chrome 中的任何控制台错误？试试这个网站warnermusicnashville.com它的角度和标题视频。

没有控制台错误。并感谢您的网址，我会尽力让您知道

网址没用@AravindS

【参考方案1】：

尝试在video 标签中使用onloadedmetadata="this.muted=true"，如下所示，希望对您有所帮助：

<video onloadedmetadata="this.muted=true" autoplay loop  preload="auto">
    <source src="Video_url" type="video/mp4">
</video> 

【参考方案2】：

这对我有用 Ionic 5+ / Angular 12+

.html

<video autoplay muted loop playsinline preload="auto" onloadedmetadata="this.muted = true">
  <source [src]="video" type="video/mp4" />
</video>

.ts

video = 'assets/videos/background-video.mp4';

重要提示：您必须在此处使用1 MB 视频。如果它大约有5 MB，那么它就不能在网络上运行。