Rotas externas no Angular

Porquê você simplesmente não cria uma pasta dentro do seu projeto e adiciona o vídeo que quer exibir? Na criação de um site pode até funcionar colocar um caminho dentro do seu computador para um vídeo quando o usuário é você, mas quando outra pessoa tentar assistir o vídeo no site que você está criando a aplicação vai procurar por um vídeo que não existe dentro do computador dela, em um caminho que também não existe, gerando um erro na sua aplicação.

Mas no meu caso tem que ser fora do diretório mesmo pois os videos são grandes e vai rodar apenas na rede da empresa.

Quando você passa ocaminho no src, o que ele apresenta? consegue representar se da algum erro e postar aqui?

ao clicar em play no meu componente de vídeo, é exibido um erro no console null.

Você chegou a tentar a tag <video> do html? á assim que funciona:

Já esta tudo ok o html. O problema é no link.

GET http://localhost:4200/assets/ep1.mp4 net::ERR_ABORTED 404 (Not Found)

Certo, eu gostaria que você tentasse duas soluções, a primeira é usando ng-src ao invés de src, fica assim:


A segunda é tentar rodar o video atraves de algum plugin como videogular(http://www.videogular.com/) ao invés de tentar rodar o video diretamente no angular.

O comentário formatou errado o código não sei porquê, mas ali no ng-src era pra ter meuVideo entre as chaves, e eram pra ter chaves duplas {{}}

Componente de vídeo:

<app-modal>
<video autoplay class="video" controls src="{}" type="video/mp4"></video>
</app-modal>

Card do vídeo :

<div class="container">
<div class="row">
<div class="col-md-6 col-lg-4 mt-5" *ngFor="let video of videos">
<div class="card m-3 bg-light box-shadow-card " style="max-width: 20rem;">
<img src="{{video.imagem}}" class="p-2" style="height: 16rem;">
<div class="card-body text-center" style="max-width: 100%;">
<p>{{video.episodio}}</p>
<div class="dropdown-divider"></div>
<h5 class="card-title">{{video.titulo}}</h5>
<p class="card-text">{{video.infoFilme}}</p>
<button (click)="abrirVideo(video.link)" type="button"
class="btn btn-dark btn-block">Assistir</button>
</div>
</div>
</div>
</div>
</div>



TS do card de vídeo :

import { Component, OnInit, Input } from '@angular/core';
import { VideoModel } from 'src/app/models/video.model';
import { isObject } from 'util';
import { Router } from '@angular/router';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { VideoReprodutorComponent } from 'src/app/video/video-reprodutor/video-reprodutor.component';

@Component({
selector: 'app-himym',
templateUrl: './himym.component.html',
styleUrls: ['./himym.component.scss']
})
export class HimymComponent implements OnInit {
linkFilme: string;
linkBase = "../../../../../../Series/himym/himym1/";

videos: VideoModel[] =
[
{ titulo: "How I Met Your Mother", tipo: "Comédia", episodio: "Episodio 1", infoFilme: "1° temporada ", imagem: "../../../assets/hymin.jpg", link: "ep1.mp4" },
{ titulo: "How I Met Your Mother", tipo: "Comédia", episodio: "Episodio 2", infoFilme: "1° temporada", imagem: "../../../assets/hymin.jpg", link: "ep2.mp4" },
{ titulo: "How I Met Your Mother", tipo: "Comédia", episodio: "Episodio 3", infoFilme: "1° temporada", imagem: "../../../assets/hymin.jpg", link: "Link do Filme 3" },
{ titulo: "How I Met Your Mother", tipo: "Comédia", episodio: "Episodio 4", infoFilme: "1° temporada", imagem: "../../../assets/hymin.jpg", link: "Link do Filme 4" },
{ titulo: "How I Met Your Mother", tipo: "Comédia", episodio: "Episodio 5", infoFilme: "1° temporada", imagem: "../../../assets/hymin.jpg", link: "Link do Filme 5" },
{ titulo: "How I Met Your Mother", tipo: "Comédia", episodio: "Episodio 6", infoFilme: "1° temporada", imagem: "../../../assets/hymin.jpg", link: "Link do Filme 6" },
{ titulo: "How I Met Your Mother", tipo: "Comédia", episodio: "Episodio 7", infoFilme: "1° temporada", imagem: "../../../assets/hymin.jpg", link: "Link do Filme 7" },
{ titulo: "How I Met Your Mother", tipo: "Comédia", episodio: "Episodio 8", infoFilme: "1° temporada", imagem: "../../../assets/hymin.jpg", link: "Link do Filme 8" },
{ titulo: "How I Met Your Mother", tipo: "Comédia", episodio: "Episodio 9", infoFilme: "1° temporada", imagem: "../../../assets/hymin.jpg", link: "Link do Filme 9" },
{ titulo: "How I Met Your Mother", tipo: "Comédia", episodio: "Episodio 10", infoFilme: "1° temporada", imagem: "../../../assets/hymin.jpg", link: "Link do Filme 10" },

]

constructor(private _router : Router, private modalService: NgbModal) { }

ngOnInit() {
}

abrirVideo(link: string) {
const modal = this.modalService.open(VideoReprodutorComponent, { size: 'lg' });
modal.componentInstance.link = this.linkBase + link;
console.log("este é o link: " + this.linkBase + link);
}

}

É cara, até onde eu vi não tem nenhum problema no seu código, uma última pergunta: Você consegue abrir esse vídeo num arquivo html normalzinho? digo, se você criar um novo projeto html, sem o angular, você consegue rodar o vídeo nela? se a resposta for "não" então o problema não é no angular, mas se a resposta for "sim" você pode criar um componente html e colocar o vídeo nele, eis o que você tem que fazer(obs: não vou usar tags de código, tô com medo do comentário formatar errado de novo):

1-Primeiro crie um html simples dentro da sua aplicação, cuja única função seja exibir um vídeo do tamanho da tela
2-Como o angular não aceita componentes html, mas sim companentes typescript, você vai ter que criar um componente typescript cuja única função é exibir o html que você criou, o código seria assim:

import from '@angular/core';

@Component({
selector: 'DÊ UM NOME DE SUA PREFERÊNCIA PARA O SELECTOR',
templateUrl: 'COLOQUE AQUI O PATH PARA O HTML QUE VOCÊ CRIOU',
})
export class ESCREVA AQUI O NOME DA CLASSE DESTE COMPONENTE {
}

3-importe o componente criado e use-o

Bom, é isso agora eu já esgotei todas as soluções que eu sabia para esse problema amigo.

Fora do Angular eu consigo acessar normalmente. Já pelo Angular eu vejo mas não consigo usar nada que esteja fora da pasta assets. Irei tentar. Obrigado.