使用视频id映射电影,以在Angular中使用Ok.ru的id显示Ok.ru中的视频

我希望从轮播中选择的任何电影中,使用其id显示Ok.ru中的视频 movie-widget.comcomponent.ts 组件,但我不知道为什么会出现错误。在浏览器中的视频上找不到视频。有什么问题?为什么视频不显示?

// movie-widget.component.ts
import { Component, inject, OnInit } from '@angular/core';
import { Renderer2 } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { AuthService } from '../../shared/services/auth.service';
import { OkruService } from '../../shared/services/okru.service'; 
import { HeaderComponent } from '../../core/components/header/header.component';
import { HomeComponent } from '../home/home.component';

@Component({
  selector: 'app-movie-widget',
  standalone: true,
  imports: [HeaderComponent, HomeComponent],
  templateUrl: './movie-widget.component.html',
  styleUrls: ['./movie-widget.component.scss']
})
export class MovieWidgetComponent implements OnInit {
  auth = inject(AuthService);
  renderer = inject(Renderer2);
  okruService = inject(OkruService);
  route = inject(ActivatedRoute);

  userName!: string;
  userImg!: string;
  videosId!: number;

  ngOnInit(): void {
    const loggedInUser = JSON.parse(sessionStorage.getItem("loggedInUser")!);
    this.userName = loggedInUser.name!;
    this.userImg = loggedInUser.picture!;

    this.route.paramMap.subscribe(params => {
      this.videosId = +params.get('okruId')!;
      this.insertVideoWidget();
    });
  }

  insertVideoWidget(): void {
    const iframe = this.renderer.createElement('iframe');
    const videoUrl = this.okruService.getOkRuVideoUrl(this.videosId.toString()); 
    iframe.src = videoUrl;
    iframe.width = '560';
    iframe.height = '315';
    iframe.frameBorder = '0';
    iframe.allowFullscreen = true;
    iframe.style.maxWidth = '100%';
    iframe.style.margin = '0 auto';
    iframe.style.display = 'block';

    const widgetContainer = this.renderer.selectRootElement('#ok_content_widget');
    this.renderer.appendChild(widgetContainer, iframe);
  }
}

这是显示视频小部件的组件的html

<app-header [userName]="userName" [userImg]="userImg"></app-header>

<div id="ok_content_widget_container" class="bg-[#141414] min-h-screen flex justify-center items-center">
  <div id="ok_content_widget" class="video-container border-0 p-0 m-auto max-w-full">
  </div>
</div>

我将TMDB显示的电影值与使用此服务定义的Ok.ru视频id和一个名为 四、视频内容 .

import { HttpClient } from '@angular/common/http';
import { Injectable, inject } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class OkruService {
  http = inject(HttpClient);

  getOkRuVideoUrl(videoId: string): string {
    return `https://ok.ru/videoembed/${videoId}`;
  }
}

这是轮播的html,它正在工作,并在浏览器中显示Ok.ru视频id的新路由。要显示我在中定义的新路线 app.routes.ts

    {path: 'movie-widget/:okruID', component: MovieWidgetComponent},

<!-- movie-carousel.component.html -->
<div class="container px-20 mt-14 mb-20">
  <p class="font-semibold text-2xl my-3 ml-3">{{ title }}</p>
  <div #swiperContainer class="swiper-container">
    <div class="swiper-wrapper">
      <ng-container *ngFor="let movie of videoContents">
        <div
          (mouseenter)="setHoverMovie(movie)"
          (mouseleave)="clearHoverMovie()"
          class="swiper-slide relative"
          [routerLink]="['/movie-widget', movie.okruId]">
          <img [src]="movie.poster_path | image" alt="poster-image" />
          <div @fade *ngIf="(movie.title) === this.selectedContent || (movie.name) === selectedContent" class="desc p-2">
            <span class="text-base flex flex-wrap font-bold">{{ movie.original_title }}</span>
            <p class="text-xs my-2">{{ movie.overview | description: 95 }}</p>
            <div class="py-3 absolute w-[70%] bottom-1">
              <p class="text-xs flex justify-between items-center">
                <span class="text-green-500">Vote Average: {{ movie.vote_average }}</span>
                <i class="fa fa-2x fa-chevron-circle-down" aria-hidden="true"></i>
              </p>
            </div>
          </div>
        </div>
      </ng-container>
    </div>
  </div>
</div>

这是我在主组件中映射和初始化值的方法

export class HomeComponent implements OnInit {
  auth = inject(AuthService);
  movieService = inject(MovieService);
  okruService = inject(OkruService);
  name = JSON.parse(sessionStorage.getItem("loggedInUser")!).name;
  userProfileImg = JSON.parse(sessionStorage.getItem("loggedInUser")!).picture;
  email = JSON.parse(sessionStorage.getItem("loggedInUser")!).email;
  bannerDetail$ = new Observable<any>();
  bannerVideo$ = new Observable<any>();

  movies: IVideoContent[] = [];
  tvShows: IVideoContent[] = [];
  ratedMovies: IVideoContent[] = [];
  nowPlayingMovies: IVideoContent[] = [];
  popularMovies: IVideoContent[] = [];
  topRatedMovies: IVideoContent[] = [];
  upcomingMovies: IVideoContent[] = [];

  sources = [
    this.movieService.getMovies(),
    this.movieService.getTvShows(),
    this.movieService.getNowPlayingMovies(),
    this.movieService.getUpcomingMovies(),
    this.movieService.getPopularMovies(),
    this.movieService.getTopRated()
  ];

  ngOnInit(): void {
    const ids = {
      tvShows: [33117, 45054, 89941, 60998, 61851, 115304],
      movies: [826510, 89185, 158852, 71885, 424694, 65218]
    };

    const okruIds: { [key: number]: string } = {
      89185: '6810037455456',
      826510: '6810037455456',
      158852: '6810037455456',
      71885: '6810037455456',
      424694: '6810037455456',
      115304: '6810037455456',
      65218: '1234567890123',
    };

    const tvShowRequests = ids.tvShows.map(id => this.movieService.getTvShowById(id));
    const movieRequests = ids.movies.map(id => this.movieService.getMoviesById(id));

    forkJoin([...tvShowRequests, ...movieRequests, ...this.sources])
      .pipe(
        map(([jakeYBlakeId, rescueHeroesId, dwightId, ewwId, batgId, intertwinedID, haroldID, radioRebelId, tomorrowlandId, motocrossedId, bohemianId, lemonadeMouthId, movies, tvShows, nowPlaying, upcoming, popular, topRated]) => {
          const tvShowData = {
            jakeYBlakeTVShow: { ...jakeYBlakeId, original_title: jakeYBlakeId.name },
            rescueHeroesTVShow: { ...rescueHeroesId, original_title: rescueHeroesId.name },
            dwightIdTvShow: { ...dwightId, original_title: dwightId.name },
            ewwTvShow: { ...ewwId, original_title: ewwId.name },
            batgTVshow: { ...batgId, original_title: batgId.name },
            intertwinedTVShow: { ...intertwinedID, original_title: intertwinedID.name }
          };

          const movieData = {
            radioRebelId: { ...radioRebelId, okruId: okruIds[radioRebelId.id] },
            haroldID: { ...haroldID, okruId: okruIds[haroldID.id] },
            tomorrowlandId: { ...tomorrowlandId, okruId: okruIds[tomorrowlandId.id] },
            motocrossedId: { ...motocrossedId, okruId: okruIds[motocrossedId.id] },
            bohemianId: { ...bohemianId, okruId: okruIds[bohemianId.id] },
            lemonadeMouthId: { ...lemonadeMouthId, okruId: okruIds[lemonadeMouthId.id] }
          };

          movies.results = [];
          tvShows.results = [];

          const tvShowArray = [
            tvShowData.jakeYBlakeTVShow, 
            tvShowData.ewwTvShow, 
            tvShowData.dwightIdTvShow, 
            tvShowData.rescueHeroesTVShow, 
            tvShowData.batgTVshow, 
            tvShowData.intertwinedTVShow
          ];
          tvShows.results.unshift(...tvShowArray);

          const movieArray = [
            movieData.radioRebelId, 
            movieData.haroldID, 
            movieData.tomorrowlandId, 
            movieData.motocrossedId, 
            movieData.bohemianId, 
            movieData.lemonadeMouthId
          ];
          movies.results.unshift(...movieArray);

          upcoming.results.unshift(movieData.haroldID);
          upcoming.results.unshift(haroldID);

          this.bannerDetail$ = this.movieService.getBannerDetail(movies.results[0].id);
          this.bannerVideo$ = this.movieService.getBannerVideo(movies.results[0].id);

          return { movies, tvShows, nowPlaying, upcoming, popular, topRated };
        })
      )
      .subscribe((res: any) => {
        this.movies = res.movies.results as IVideoContent[];
        this.tvShows = res.tvShows.results as IVideoContent[];
        this.nowPlayingMovies = res.nowPlaying.results as IVideoContent[];
        this.upcomingMovies = res.upcoming.results as IVideoContent[];
        this.popularMovies = res.popular.results as IVideoContent[];
        this.topRatedMovies = res.topRated.results as IVideoContent[];
      });
  }
}