Videogular with mp4 from backend not working

Question

i wanted to integrate streaming in my own app and website, but i always get the error:

"Cannot play media. No decoders for requested formats: text/html"

("Medien konnte nicht abgespielt werden. Keine Dekoder für angefragte Formate: text/html")

the webside and app is build with spring boot, angular and capacitorJs

Here my Code:

HTML:

 <div class="videogular-container">
  <vg-player>
    <vg-overlay-play></vg-overlay-play>
    <vg-buffering></vg-buffering>
    <vg-scrub-bar>
      <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
      <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
    </vg-scrub-bar>
    <vg-controls>
      <vg-play-pause></vg-play-pause>
      <vg-playback-button></vg-playback-button>
      <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>
      <vg-scrub-bar style="pointer-events: none;"></vg-scrub-bar>
      <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>
      <vg-track-selector></vg-track-selector>
      <vg-mute></vg-mute>
      <vg-volume></vg-volume>
      <vg-fullscreen></vg-fullscreen>
    </vg-controls>
    <video [vgMedia]="$any(media)" #media id="singleVideo" preload="auto" crossorigin>
      <source id="video" src="">
    </video>
  </vg-player>
</div>

TS:

 export class StreamComponent {
  id: number;
  type: number;
  loading: boolean = false;

  constructor(private route: ActivatedRoute, private api: ApiService, private router: Router) {
    route.params.subscribe((params) => {
      this.id = params["id"];
    })
    this.type = parseInt(this.id.toString()[0]);
    this.id = parseInt(this.id.toString().substring(1,this.id.toString().length));
    //this.loading = true;
    this.initStreamFile();
  }
  initStreamFile() {
    this.getStreamFile().subscribe(data => {
      const myFile = new File(
        [data],
        "demo.mp4",
        { type: 'video/mp4' }
      );
      const imageUrl = URL.createObjectURL(myFile);
     //Also tryed only const imageUrl = URL.createObjectURL(data); same error

      //this.loading = false;
      const videoElement = <HTMLVideoElement> document.getElementById('video');
      videoElement.src = imageUrl;
    })
  }

  getStreamFile(): Observable<any> {
    if(this.type==1) {
      return this.api.downloadFilm(this.id);
    } else {
      return this.api.downloadSerie(this.id);
    }
  }
}

Backend:

@GetMapping(value = "/download/{id}")
    public ResponseEntity<FileSystemResource> getVideo(@PathVariable(value = "id") String id) {
        File file = new File("media-backend/src/main/resources/file_example_MP4_1920_18MG.mp4");
        HttpHeaders headers = new HttpHeaders();
        headers.add("Cache-Control", "no-cache, no-store, must-revalidate");
        headers.add("Pragma", "no-cache");
        headers.add("Expires", "0");

        return ResponseEntity
                .ok()
                .headers(headers)
                .contentLength(file.length())
                .contentType(MediaType.parseMediaType("video/mp4"))
                .body(new FileSystemResource(file));
    }

app-modules:

import { VgCoreModule } from '@videogular/ngx-videogular/core';
import { VgControlsModule } from '@videogular/ngx-videogular/controls';
import { VgOverlayPlayModule } from '@videogular/ngx-videogular/overlay-play';
import { VgBufferingModule } from '@videogular/ngx-videogular/buffering';
import { VgStreamingModule } from '@videogular/ngx-videogular/streaming';

someone any idea or any explenation what to do there

Videogular with mp4 from backend not working

0 Answers0