videogular2 - playing videos loaded asynchronously does not work

Question

Videos are being loaded from an API, but it appears that the onPlayerReady function is being called before the videos have finished loading and are passed. The video sources are in base64 format. The following code is being used:

.getDefaultMedia()
  .subscriptions.loadedMetadata.subscribe(this.initVdo.bind(this));

When initVdo is invoked, the isCompleted property is false.

Is there a solution to this problem? Is it possible to initialize the onPlayerReady manually?

Thank you, Jan

score 0 · Answer 1 · answered Jun 17 '23 at 05:22

You can use Videogular2 library to accomplish the above. There you don't need to play the video explicitly after it loads. The explicit autoplay feature of it takes care of automatically.

Use npm install videogular2 to install the package. Use your package manager as necessary for the install.

Once after installing use the below snippet in your html:

<video [vgMedia]="media" #media 
  id="singleVideo" 
  preload="auto"
  type="video/mp4"
  webkit-playsinline
  playsinline
  autoplay>

  <source *ngFor="let video of sources" [src]="video.src" [type]="video.type">

</video>

Pass the src your video src.

videogular2 - playing videos loaded asynchronously does not work

1 Answers1