如何修复“Uncaught（in promise）DOMException：play（）”

Question

I am trying to autoplay video background in html5,css,angular5- Randomly its working and not working.

So I tried to include code in angular that to play when it is loading the page.It's throwing -Uncaught (in promise) DOMException: play()

I tried checked stackoverflow same error like this.I have applied those solution in multiple way to fix the issue. Still throwing error.

    component
    =========
    @ViewChild('videoPlay') videoplay: ElementRef;
    videopl: HTMLVideoElement;

    //first i tried this. Still throwing error
    this.videoplay.nativeElement.play();

    //second i tried this still throwing error.
    const playPromise = this.videoplay.nativeElement.play();
    if (playPromise !== null){
     playPromise.catch(() => { this.videoplay.nativeElement.play(); })
    }

    //third i tried this still throwing error.
    this.videopl=this.videoplayer.nativeElement;
    this.videopl.play();


    html part
    =========
    <!--first try-->
    <video id="videoid" autoplay muted loop  preload
     poster="img.png"  #videoPlayer>
    <source src="video.mp4" type='video/mp4' >
    <source src="video.webm" type="video/webm">
    <source src="video.ogg" type="video/ogg">
    </video>

     <!--second try-->
     <video id="videoid" autoplay="true" muted="muted" loop  preload 
       poster="img.png"  #videoPlayer>
    <source src="video.mp4" type='video/mp4' >
    <source src="video.webm" type="video/webm">
    <source src="video.ogg" type="video/ogg">
    </video>


    <!--third try-->
    <video id="videoid" autoplay="autoplay" muted="muted" loop  preload
     poster="img.png"  #videoPlayer>
    <source src="video.mp4" type='video/mp4' >
    <source src="video.webm" type="video/webm">
    <source src="video.ogg" type="video/ogg">
    </video>

Need to play video automatically without any error.

Answer 1

This solution worked for me to autoplay is here=> https://stackoverflow.com/a/52980364/5755872

 <video id="videoid" autoplay muted loop  preload
 poster="img.png"  oncanplay="this.play()" onloadedmetadata="this.muted = true">
 <source src="video.mp4" type='video/mp4' >
<source src="video.webm" type="video/webm">
<source src="video.ogg" type="video/ogg">
</video>

Only I need is to autoplay my video.so I am removed all the lines in component for play function.

“Uncaught (in promise) DOMException: play() ”-this issue i didn't find any solutions. But i will try to find the solution for this error also.

Thank you for reading this issue.