CODEWITHSUNDEEP
javascriptcsshtmlvideo
blue
blue

Reputation: 7385

HTML video not playing on mobile? How to set up properly?

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?

Upvotes: 0

Views: 4118

Answers (2)

H. E.
H. E.

Reputation: 31

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>

Upvotes: 0

Kushtrim
Kushtrim

Reputation: 1949

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

Upvotes: 1

Related Questions