无法在 Angular 7 中播放 MP4 视频

Posted 2023-05-08

【中文标题】无法在 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，但我想知道您是否还有其他资源可以指点我。谢谢！