0

Ok, I have never used the HTML video tag before but am having confusion as to how to make sure the video can play on both mobile AS WELL as desktop, on all common browsers.

This is what I have, currently working on Safari mobile (after a load time) and desktop Chrome and Safari:

<div id = "centered">

                <video poster="../resources/Anim5.png" id="bgvid" playsinline autoplay loop controls>

                        <source src="../resources/anim.webm" type="video/webm">
                        <source src="../resources/anim.mp4" type="video/mp4">
                        </video>

I want the video to have controls and autoplay. I know the video div is showing up because I just get the poster image on mobile, but in Chrome on mobile video does not play.

I thought it was an autoplay issue but for whatever reason I can't get controls to show up either - despite including that in tag.

What is the correct HTML video configuration here? What am I screwing up?

blue
  • 7,175
  • 16
  • 81
  • 179
  • Possible duplicate of [html5 autoplay video in Mobile device](https://stackoverflow.com/questions/42160528/html5-autoplay-video-in-mobile-device) – Serg Chernata Nov 06 '17 at 14:00

2 Answers2

1

Add muted playsinline and autoplay attributes for it to work on mobile.

Kushtrim
  • 1,899
  • 6
  • 14
0

If it is an angular project don't forget to write [muted]="'muted'". Normal muted attribute is not working.

So, 'Autoplay' is working well on mobile browsers as well in this code-snippet below:

<video [muted]="'muted'" autoplay="autoplay" loop="loop" playsinline id="video-start">
    <!-- My Dynamic Content -->
    <source *ngIf="backgroundVideo?.Link?.Url" [src]="backgroundVideo.Link.Url" type="video/mp4">

    <!-- My Default Content, displaying when dynamic content has a problem -->
    <source [src]="baseURL + '/assets/videos/film_home.mp4'" type="video/mp4">
    
    Your browser does not support HTML5 video.
</video>
H. E.
  • 21
  • 2