CODEWITHSUNDEEP
htmljqueryangulartypescripthtml5-video
BlizZard
BlizZard

Reputation: 589

Background video not playing when App is loaded for the first time in Angular 5 App

I am trying to keep a video as the background of my Angular 5 app. But, when the page is loaded for the first time, the video is not playing.But If i go to any other page, and then again come back to home page, then the video is playing.

Till now i have tried these all

1.

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

2. Jquery plugin for background video

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

and included 

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

in index.html

Still i am facing the same issue. Can anyone help , where am i doing wrong?

Upvotes: 4

Views: 2330

Answers (2)

Sampath
Sampath

Reputation: 65860

This works for me 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';

Important note: You must use around 1 MB video here. If it'll have around 5 MB then it won't work on the web.

Upvotes: 0

Jigneshkumar Zala
Jigneshkumar Zala

Reputation: 51

Try using onloadedmetadata="this.muted=true" within video tag as below, Hope this helps:

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

Upvotes: 4

Related Questions