Chrome (Android) video autoplay inside Angular 2+ component

What does not work:

If I put a video tag with "autoplay" (see below) into the template of an Angular 2+ component with the goal of autoplaying on mobile:

<video muted autoplay>
    <source src="path/to/video.mp4" type="video/mp4" />
</video>
What does work:
  • Moving it to the index.html (outside of the Angular component)
  • Appending it to the body from within the component:

    window.addEventListener('load', () => {
        document.body.innerHTML += "<video autoplay muted loop>\n" +
                                   "    <source src=\"path/to/video.mp4\" type=\"video/mp4\" />\n" +
                                   "</video>";
    });
    
  • Including the video in the component's template, enabling the "user controls", and manually touching the play button on the video (i.e. no autoplay)
Theories:

I don't think it's an issue of an invalid path to the video, since I'm able to manually click the "play" button.

According to here and here, autoplay on mobile should be allowed if (1) the video is muted, and (2) the video is "visible". I've read that "visible" in this context is more or less defined to mean "attached to DOM" and not "display: none" in at least a couple of places.

My best theory is that Angular 2+ is sticking the component in some kind of "Shadow DOM" (or similar) that's resulting in mobile Chrome not thinking that it's visible. I tried setting the component to encapsulation: ViewEncapsulation.None to see if that made a difference, but same result.

Additionally, if I try to set an event listener against the "loaded" or "canplaythrough" events and manually call videoElement.play(), then I get: DOMException: play() can only be initiated by a user gesture. If I make the same function call in the devtools console (tethering to mobile device via USB), then it does play.

Final thoughts:

It seems that Angular is likely what's getting in my way. Is there any known Angular setting or workaround I can leverage to get a video to autoplay within an Angular 2+ component on Android Chrome? Thanks for any help.

(p.s.: there's like a million questions on S.O. and elsewhere about autoplaying video on mobile Chrome, but none of them seem to address the issue of doing it within an Angular component or similar)

Answer and work-around to OP and to question in my own comment: Yes, appending a video tag as vanilla HTML to an already initialized Angular component works as expected (confirmed at least in Chrome & FF). Just happened to need this for my own project today. :)

So you can do something like this, or a pipe that returns the HTML for a given video URL (which is much better perf-wise, google "Angular Pipes").

<div *ngFor="let file of files" [innerHTML]="getVideoTag(file)"></div>

// component
  getVideoTag(file) {
    return this.domSanitizer.bypassSecurityTrustHtml(
      `<video width="1280" height="720" autoplay muted controls>
          <source src="${file.url}" type="video/mp4">No HTML5 supported.</source>
       </video>`
    );
  }

HTML5 video doesn't autoplay (even while muted) in Chrome 67 , Solution to Angular 2+ of cases in which automatic reproduction is needed silent and does not work. Autoplay is prevented, until the user  Is there any way to autoplay video with audio in chrome in angular Posted on October 30, 2019 by Rohit i’m working on spa where i have to show banner video on top of the website. when loading video at initial phase is there any way to unmute the audio of video.

I was searching for this issue a lot and I put the muted attribute like this:

[muted]="true" rather than just muted

and now it works

<video [muted]="true" autoplay>
    <source src="path/to/video.mp4" type="video/mp4" />
</video>

Chrome has a policy to not let videos autoplay if the user has not first interacted with the page however if its a muted video chrome allows it. The problem here is that for some reason muted value goes as false when you just put muted in angular.

Chrome (Android) video autoplay inside Angular 2+ component, What does not work: If I put a video tag with "autoplay" (see below) into the template of an Angular 2+ component with the goal of autoplaying on mobile: <​video  How to control audio and video autoplay in Google Chrome Description While there are plenty of things online that can break your concentration or focus on a task, autoplaying video or audio surely is at the top of "don't like" list for many Internet users.

Similar issue with Angular 6 and Chrome 70.

In fact, the muted attribute in the HTML seems to be ignored by Chrome when the video is added by Angular. The resulting DOM element has a 'muted' property set to 'false'. Not sure if it is an Angular or a Chrome bug.

You need to set it manually to true to make the autoplay work.

I ended up with a directive :

@Directive({selector: '[my-autoplay]' })
export class AutoplayVideoDirective implements OnInit {

  constructor(public element: ElementRef) { }

  public ngOnInit(): void {
    let vid = this.element.nativeElement;
    vid.muted = true;
    vid.play();
  }
}

and the HTML :

<video loop muted autoplay my-autoplay>

Muted Autoplay on Mobile: Say Goodbye to Canvas Hacks and , What does not work: If I put a video tag with "autoplay" (see below) into the template of an Angular 2+ component with the goal of autoplaying on mobile: By default, for users without a browsing history, Chrome will allow videos to autoplay "for over 1,000 sites where" it sees "the highest percentage of visitors play media with sound."

I needed to use both onloadedmetadata and oncanplay to fix in angular 6

<video id="bg-video" loop muted autoplay oncanplay="this.play()" onloadedmetadata="this.muted = true">
    <source src="video.mp4" type="video/mp4">
</video>

Autoplay Policy Changes | Web, Muted autoplay for video is supported on Android from Chrome 53. Previously, a video element required a user gesture to initiate playback. However, blocking autoplay videos for Chrome on Android does seem to still work for most sites. Disable Autoplay Videos in Chrome on Android Android makes disabling autoplay videos simple.

Had a similar issue with Chrome 66 (OSX High Sierra) not autoplaying a muted video in a Mat Dialog being opened by its parent on init. Solved it by adding *ngIf="true" to the video element:

<video *ngIf="true" autoplay muted onloadedmetadata="this.muted = true" controls>
    <source src="myVid.mp4" type="video/mp4">
    <p>Your browser does not support the video element.</p>
</video>

<video>: The Video Embed element, For the Web Audio API, the autoplay policy will launch in M71. Chrome's autoplay policies will change in April of 2018 and I'm here to tell you why and how this Example 2: GlobalNewsSite.com has both text and video content. Web on Android · Chrome Extension Docs · Site-Kit Plugin for WordPress  Note: The Autoplay Policy launched in M66 Stable for audio and video elements and is effectively blocking roughly half of unwanted media autoplays in Chrome. For the Web Audio API, the autoplay policy will launch in M71.

HTMLMediaElement.autoplay, The HTML Video element (video) embeds a media player which supports video playback into In some browsers (e.g. Chrome 70.0) autoplay doesn't work if no muted attribute is present. WCAG 2.0 · Understanding Success Criterion 1.2.2 | W3C Understanding WCAG 2.0 Samsung Internet Android ? In this video, we'll take a look at how we can debug ionic 4 and angular application inside chrome.

HTML5 <video> does not auto play in chrome · Issue #27252 , Note: Sites which automatically play audio (or videos with an audio audio or video from playing without permission or in the background. On Android Chrome 54, turn off autoplay of media by going to Settings - Site Settings - Media - Autoplay and Block autoplay. This feature is disabled if you have data compression enabled in your Android Chrome browser.

Building an Angular Video Player with Videogular, what's more, I find the (loadedate) and (load) also does not work in angular . And when I try to get the video tag ElementRef to set the.video. Control Arduino with WebSockets (wirelessly control RGB-Led) and Johnny-Five - Duration: 15:50. Brackets Academy 1,394 views

Comments
  • I think your theory is on the right track, the element gets created and tries to autoplay before being in the dom. Have you tried something like appending the video tag to a component in ngOnInit, or maybe only set autoplay and append the source tag at that point?
  • Although for me it's replacing the video every time one of my component inputs changes. I can probably do something similar, though.
  • So yeah, if I go with the suggestion from your comment, (append child to DIV from ngInit), then it works perfectly.
  • Ah yes it's that function call in the template, it'll run on every change detection. Get rid of that, I gave a bad example :D My component was used only in a mat-dialog so wasn't an issue - no inputs.
  • Interesting solution - I like it!
  • This is the only solution work for me when i tried several other solution. Thanks you so much @tommybananas
  • Thank you. This solved my problem.