Невозможно воспроизвести видео MP4 в Angular 7 - PullRequest
Новая
       44

Невозможно воспроизвести видео MP4 в Angular 7

1 голос
/ 05 апреля 2020

У меня есть 2 дня, чтобы разобраться со странной проблемой видео mp4 в angular 7. По какой-то причине видео 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.

Заранее спасибо.

Ответы [ 2 ]

1 голос
/ 05 апреля 2020

Я могу проигрывать видео в обещании. Используйте эти атрибуты в теге Video "muted" и "autoplay" .

Также я создал пример stackblitz, где я вызываю фальшивый http-вызов, и я пытаясь воспроизвести образец видео. Пожалуйста, используйте ngIf = "gameInfo" в вашем видео теге, чтобы убедиться, что ваши данные ответа доступны перед отображением вашего видео. Также вы можете обернуть воспроизведение видео внутри setTimeout, чтобы убедиться, что видео-тег отображается на странице.

Вот рабочий пример стекаблица.

Воспроизведение видео с использованием 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;
    }));
  }

}
0 голосов
/ 05 апреля 2020

Проблема в том, что chrome отключил автозапуск видео, содержащих звук, поэтому вам нужно использовать атрибуты отключения звука и автозапуска. Тем не менее, возможно, что видео не воспроизводится автоматически, потому что вам нужно написать приглушенный перед автоматическим воспроизведением, чтобы заставить автоигру работать, но во время компиляции angular упорядочивает атрибуты в алфавитном порядке. Итак, 1 хорошее решение, которое я нашел, было: 

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

Таким образом, видео будет автоматически воспроизводиться в angular без каких-либо изменений в файле машинописи.

...