无法在 Angular 7 中播放 MP4 视频
Posted
技术标签:
【中文标题】无法在 Angular 7 中播放 MP4 视频【英文标题】:Cannot play MP4 video in Angular 7 【发布时间】:2020-07-17 15:31:10 【问题描述】:我有 2 天的时间来处理有关 7 角 mp4 视频的奇怪问题。由于某种原因,MP4 视频根本无法播放。
这是我的代码:
html:
<div id="instructions" class="angled-img pull-left">
<video allow="autoplay" class="img" controls
poster='gameInfo.clip.preview'>
<source src="gameInfo.clip.clip" type='video/mp4' />
</video>
</div>
TS:
public gameInformation(id: number): void
this.gameService.getGame(id).subscribe(res =>
this.gameInfo = res;
console.log(res);
this.loader = false;
, error =>
console.error(error);
this.loader = false;
);
我不确定为什么会这样。有人可以帮帮我吗?我做错了什么。 我正在为此使用 ngx-bootstrap。
提前致谢。
【问题讨论】:
您需要在收到响应后显式调用 play 方法。 document.getElementById('video').play() “HTMLElement”类型上不存在属性“play”.ts(2339) 控件好像也被禁用了。 您尝试了哪些浏览器?另外,不要尝试使用 allow="autoplay" ,而是自己使用自动播放。 我正在使用 Chrome 和 Mozilla,但是由于某种原因,如果我在 HTML 中正确添加 URL,它可以工作,但如果我使用 JSON 响应,就会出现问题。 【参考方案1】:我可以在承诺中播放视频。在视频标签 “静音” 和 “自动播放” 中使用这些属性。
我还创建了 stackblitz 示例,在该示例中我正在调用一个虚假的 http 调用,并且我正在尝试播放示例视频。请在您的视频标签中使用 ngIf="gameInfo" 以确保您的响应数据在渲染视频之前可用。您还可以将视频播放包装在 setTimeout 中,以确保在页面中呈现视频标签。
这是 stackblitz 工作示例。
Play Video using angular
app.component.html
<hello name=" name "></hello>
<p>
Start editing to see some magic happen :)
</p>
<div id="instructions" class="angled-img pull-left">
<video muted autoplay *ngIf="videoData" id="video1" class="img" controls
>
<source src="videoData.url" type='video/mp4' />
</video>
</div>
app.component.ts
import Component,OnInit from '@angular/core';
import VideoService from './video.service';
@Component(
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
)
export class AppComponent implements OnInit
name = 'Angular';
videoData: any = ;
constructor(private videoService: VideoService)
ngOnInit()
this.videoService.getVideo().subscribe(data =>
this.videoData = data;
this.videoData.url = 'https://www.w3schools.com/html/mov_bbb.mp4';
setTimeout(() =>
document.getElementById('video1').play();
, 1000);
, (error) =>
this.videoData.url = 'https://www.w3schools.com/html/mov_bbb.mp4';
setTimeout(() =>
document.getElementById('video1').play();
, 1000);
console.log('error', error)
)
video.service.ts
import Injectable from '@angular/core';
import HttpClient, HttpHeaders from '@angular/common/http';
import Observable from 'rxjs';
import map from 'rxjs/operators'
@Injectable()
export class VideoService
private httpOptions =
headers: new HttpHeaders(
'Content-Type': 'application/json'
)
;
url: string;
constructor(private http: HttpClient)
this.url = 'http://my-json-server.typicode.com/kodecrash/javascript/video/1';
getVideo()
return this.http.get<any>(this.url, this.httpOptions)
.pipe(map( (data: any) =>
// login successful if there's a jwt token in the response
return data;
));
【讨论】:
您的 blitz 出于某种原因有效,但由于.play();
不是一种方法,因此 angular 中的代码不起作用。即使在您的闪电战中,也会显示错误
如果播放方法有错误应该显示在控制台中。 Stackblitz 具有内置的 linting 功能来显示此类错误。你可以忽略它。 .play() 内置于视频标签的 javaScript 方法中。【参考方案2】:
问题在于 chrome 已经禁用了包含声音的视频的自动播放,因此,您需要使用 muted 和 autoplay 属性。不过,视频可能不会自动播放,因为您需要在自动播放之前编写 muted 以使自动播放正常工作,但在编译期间,角度按字母顺序排列属性。所以,我找到的 1 个很好的解决方案是:
<video autoplay onloadedmetadata="this.muted = true" oncanplay="this.play()">
<source [src]="gameinfo.clip.clip" type="video/mp4" />
</video>
这样视频将自动以角度播放,而无需更改打字稿文件中的任何内容。
【讨论】:
这实际上对我有用。显然首先消除了 [src]= 的语法错误并实际关闭引号.. 哇这真的有效!你怎么知道chrome禁用了自动播放?我找到了chrome developer blog post about autoplay policy,但我想知道您是否还有其他资源可以指点我。谢谢!以上是关于无法在 Angular 7 中播放 MP4 视频的主要内容,如果未能解决你的问题,请参考以下文章
如何在 android 的 videoview 中播放 .mp4 视频?