错误:应用首次在angular6中加载时,视频无法自动播放 [英] Error: Video not autoplay when app loads for the first time in angular6
问题描述
我正在尝试在应用首次加载时自动播放视频.但是,当应用程序首次在浏览器中打开时,视频不会自动播放.
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
有时会加载视频,有时会不加载视频(在Chrome开发工具中选中时).但是,两种情况下都不是第一次播放视频.
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.
此处是视频链接: https://stackblitz.com/edit/angular-nezdkr?file=src/app/app.component.html
在Chrome中首次加载应用程序时,它不会自动播放,而在Mozilla firefox中会自动播放.
It does not autoplaying when app first loading in chrome but autoplaying in Mozilla firefox.
注意:我不想显示控件.
Note: I don't want to show controls.
<router-outlet></router-outlet>
app.routing.ts
{
path: '',
redirectTo: 'videoCOmp',
pathMatch: 'full'
},
{
path: 'videoCOmp',
component: videoCOmpComponent,
pathMatch: 'full'
}
当应用首次加载到浏览器中并路由到videoCOmpComponent时,视频不会自动播放.但是,在重新加载/刷新浏览器后,视频开始播放.
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.
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屋!