I know several posts have similar issues, but none of the ones I have looked at have the specific issue I'm experiencing.

The problem is, I have a HTML5 video which won't autoplay, even though it is muted. Specifically, it doesn't work in Chrome. It works completely fine in Safari and Firefox.

The code snippet looks as such:

<video class=landing-page-video poster=assets/images/video-poster.jpg loop muted playsinline preload=metadata disableRemotePlayback>

    <source src=assets/images/landing-page-video-2.mp4 type=video/mp4>

    Your browser does not support video.

</video>

The code snippet is from this website and it is built with Angular. I've removed attributes that are only related to Angular in the copied snippet for clarity.

I have tried several combinations of what is suggested various places online, as well as carefully reading the documentation for the newer versions of Chrome that affect the autoplay feature. I am, however, at a loss, with nothing seeming to work.

Supposedly, the policy change should only affect autoplay for videos with audio, but it still seems to block autoplay for this muted video.

One weird behavior that I have noticed is, that sometimes the video will start playing if I open the chrome inspector tool and close it again. Not always, though.

I also tried triggering the play() directly through JavaScript, but this of course won't work since the user didn't initiate it through a click.

Could this be a bug with Chrome or is it on my end? Any help is appreciated!

EDIT: Still not working. I have tried the following, with no result:

• Using the http://techslides.com/demos/sample-videos/small.mp4 video as source instead.


• Adding autoplay attribute.


• Replacing the whole <video> element with the one from the suggested jsfiddle.

When I enable controls, the audio button shows as grayed out sound on version, might be due to my video having no audiotrack. However, when using the demo video, it still shows the audio button with sound on in spite of the muted attribute being set.

EDIT 2: Added code for the Angular component which contains the video element:

HTML:

<video class=landing-page-video noselect  poster=assets/images/video-poster.jpg *showItSizes={min:900} muted loop autoplay disableRemotePlayback>

    <source src=assets/images/landing-page-video-2.mp4 type=video/mp4>

    Your browser does not support video.

</video>



<div class=landing-page-video-overlay noselect *showItSizes={min:900} [ngStyle]={'height': videoHeight + 'px'}>

    <st-svg-logo class=video-overlay-logo></st-svg-logo>

</div>

<div class=noselect *showItSizes={max:899} style=position: relative; top: 0; height: 100vh;>

    <img src=assets/images/landing_pic_mobile_3.jpg alt=Student Talks in Space class=landing-page-video

         style=height: 100vh;>

    <img class=video-overlay-logo src=assets/images/student-talks-header.png/>

    <img src=assets/images/landing_pic_mobile_bottom.png class=bottom-transition-glitch alt=>

</div>





<div class=st-container>

    <st-events-list class=full-width event-list *showItSizes={max:899}></st-events-list>

    <h1>HOW IT WORKS</h1>

    <st-what-is class=st-row></st-what-is>

    <st-world-map class=full-width *showItSizes={min:899}></st-world-map>

    <st-counters #counters class=full-width stInView (cameInView)=counters.countUp()></st-counters>

    <st-events-list class=full-width *showItSizes={min:900}></st-events-list>

    <br><br>

    <st-video class=st-row></st-video>

    <br><br>

    <st-partners></st-partners>

    <br><br>

</div>

CSS:

.landing-page-video, .landing-page-video-overlay {

  position: relative;

  width: 100vw;

  max-width:100%;

  top: 0;

  z-index: -100;

}



.landing-page-video-overlay {

  height: 56.25vw;

  position: absolute;

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 100;

}



@media screen and (max-width: 899px) {

  .video-overlay-logo {

    position: absolute;

    top: 50vh;

    right: 21%;

    width: 100vw;

    animation: fade-in 1s;

    z-index: 160;

  }



}

TypeScript:

import {Component, OnInit} from '@angular/core';



@Component({

  selector: 'st-home',

  templateUrl: './home-page.component.html',

  styleUrls: ['./home-page.component.css']

})

export class HomePageComponent implements OnInit {

  constructor() {}

  ngOnInit() {}

}