无法在 Angular 7 中播放 MP4 视频

Question

我有 2 天时间处理 angular7 中有关 mp4 视频的奇怪问题。由于某种原因，MP4 视频根本无法播放。

这是我的代码：

HTML:

<div id="instructions" class="angled-img pull-left">
        <video allow="autoplay" width="350px" height="195px" 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。

提前致谢。

Answer 1

我可以播放承诺中的视频。在视频标签 "muted" 和 "autoplay".

中使用这些属性

我还创建了 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"  width="350px" height="195px" 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;
    }));
  }

}

Answer 2

问题是chrome禁用了包含声音的视频的自动播放，因此，您需要使用静音和自动播放属性。不过，视频可能不会自动播放，因为您需要在自动播放之前编写 muted 才能使自动播放工作，但在编译期间，angular 会按字母顺序排列属性。因此，我找到的 1 个好的解决方案是：

<video autoplay onloadedmetadata="this.muted = true" oncanplay="this.play()">
    <source [src]="gameinfo.clip.clip" type="video/mp4" />
</video>

这样视频将在 angular 中自动播放，而无需更改打字稿文件中的任何内容。

无法在 Angular 7 中播放 MP4 视频

Cannot play MP4 video in Angular 7

mp4

html5-video

typescript

angular