错误:在 angular6 中第一次加载应用程序时，视频不会自动播放 [英] Error: Video not autoplay when app loads for the first time in angular6

问题描述

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

在这里，我得到了一个链接，但没有解决方案，但仍未得到答复- 视频未以 4 角播放，但刷新页面正在运行

视频有时加载/有时不加载(在 Chrome 开发工具中检查时).但是，这两种情况下都不是第一次播放视频.

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

当应用首次加载到 chrome 时不会自动播放，但会在 Mozilla firefox 中自动播放.

注意:我不想显示控件.

app.component.html

app.routing.ts

<代码> {小路: ''，重定向到:'videoCOMp'，路径匹配:'完整'},{路径:'videoCOMp'，组件:videoCOMpComponent，路径匹配:'完整'}

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

videoCOMpComponent.ts

 abc0 = true;def0 = 真；abc1 = 假；def1 = 假；视频播放:HTMLElementVideoElement；ngOniInit(){//我正在尝试解决这个问题，但没有成功:-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" 静音自动播放><source src="../../../../assets/videos/meeting1.mp4" type="video/mp4">您的浏览器不支持 video 标签.</视频>

<div *ngIf="abc1 && def1" class="video-container"><视频静音自动播放=自动播放"><source src="../../../../assets/videos/meeting2.mp4" type="video/mp4">您的浏览器不支持 video 标签.</视频>

解决方案

我的问题得到了解答:-

//自动播放静音 onloadedmetadata="this.muted = true"<video id="abc" 自动播放静音 onloadedmetadata="this.muted = true" ><source src="https://github.com/mediaelement/mediaelement-files/blob/master/big_buck_bunny.mp4?raw=true" type="video/mp4">您的浏览器不支持 video 标签.</视频>

I am trying to autoplay the video when the app first load. But video is not autoplaying when app first open on browser.

Here, I got a link but no solution was there and still unanswered- Video is not playing in angular 4 but refresh page is working

The video is sometimes loaded/ sometimes not (when checked in Chrome Dev Tool). However, video is not playing in either case for the first time.

Here is the video link: https://stackblitz.com/edit/angular-nezdkr?file=src/app/app.component.html

It does not autoplaying when app first loading in chrome but autoplaying in Mozilla firefox.

Note: I don't want to show controls.

app.component.html

<router-outlet></router-outlet>

app.routing.ts

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

When app first loads on browser and it route to videoCOmpComponent, video is not autoplaying. However, when browser is reloaded/ refreshed, the video starts playing.

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>

解决方案

I got answer to my problem:-

  //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>

这篇关于错误:在 angular6 中第一次加载应用程序时，视频不会自动播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！