Warm tip: This article is reproduced from serverfault.com, please click

typescript-错误:应用首次在angular6中加载时,视频无法自动播放

(typescript - Error: Video not autoplay when app loads for the first time in angular6)

发布于 2018-10-25 18:34:27

我正在尝试在应用首次加载时自动播放视频。但是,当应用程序首次在浏览器上打开时,视频不会自动播放。

在这里,我有一个链接,但是那里没有解决方案,但仍然没有答案-视频无法以 Angular 4播放,但是刷新页面可以正常工作

视频有时会加载,有时则不会加载(在Chrome开发工具中选中时)。但是,两种情况下都不是第一次播放视频。

这是视频链接:https : //stackblitz.com/edit/angular-nezdkr?file=src/app/app.component.html

首次在Chrome中加载应用程序时,它不会自动播放,而在Mozilla firefox中会自动播放。

注意:我不想显示控件。

app.component.html

<router-outlet></router-outlet>

应用程序路由

 {
        path: '',
        redirectTo: 'videoCOmp',
        pathMatch: 'full'
    },
    {
        path: 'videoCOmp',
        component: videoCOmpComponent,
        pathMatch: 'full'
    }

当应用首次在浏览器上加载并路由到videoCOmpComponent时,视频不会自动播放。但是,当重新加载/刷新浏览器时,视频开始播放。

videoCOmpComponent.ts

    abc0 = true;
    def0 = true;

    abc1 = false;
    def1 = false;

videoPlay: HTMLElementVideoElement;

ngOniInit(){
// I am trying to solve this issue but getting no success:-

 if(this.abc0 && this.def0 ){
  this.videoPlay =  document.querySelector('videoContainer');
 this.videoPlay.play();
  }
}

videoCOmpComponent.html

<div id="video-container" class="video-container" *ngIf="abc0 && def0">
<video id="videoContainer" muted autoplay>
 <source src="../../../../assets/videos/meeting1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div *ngIf="abc1 && def1" class="video-container">
<video  muted autoplay="autoplay">
<source src="../../../../assets/videos/meeting2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
Questioner
Mahi
Viewed
0
Mahi 2018-10-28 20:35:44

我得到了我的问题的答案:

  //autoplay muted onloadedmetadata="this.muted = true"  

<video id="abc" autoplay muted onloadedmetadata="this.muted = true" >
  <source src="https://github.com/mediaelement/mediaelement-files/blob/master/big_buck_bunny.mp4?raw=true" type="video/mp4">
  Your browser does not support the video tag.
</video>