videogular2: vg-for doesn't work

Description

I have two different players. I want them to have separate controls, so I’m trying to user vg-for, but it causes an error Error: Template parse errors. This happens when I use vg-for anywhere,

Expected Behavior

vg-for works and binds controls to one player only.

Actual Behavior

vg-for causes Template parse error. Without using it, the controls will effect both videos.

Steps to Reproduce

add vg-for to any control

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 15 (7 by maintainers)

Most upvoted comments

@uiktiomasfeliz ok, that’s another issue probably related with https://github.com/videogular/videogular2/issues/300

You should be using vg-for only if you have several video tags at the same time inside of the same vg-player. For example in case of you want to have two videos inside the same vg-player container but you want to play each video with a different vg-play-pause button.

Elecash on Dec 16, 2016

A massive update is coming this weekend probably and it will fix lots of issues.

In the meantime you can probably workaround this by changing your template to this:

<carousel interval="0">
  <slide *ngFor="let slide of assets" [active]="slide.active" [id]="index">
    <vg-player class="media-player" *ngIf="slide.assetType === 'Video'">
      <vg-overlay-play></vg-overlay-play>
      <vg-buffering></vg-buffering>

      <vg-controls>
          <vg-play-pause></vg-play-pause>

          <vg-time-display property="current" format="mm:ss"></vg-time-display>

          <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-time-display property="total" format="mm:ss"></vg-time-display>

          <vg-mute></vg-mute>
          <vg-volume></vg-volume>
          <vg-fullscreen></vg-fullscreen>
      </vg-controls>

      <video vg-media [id]="slide._id">
          <source [src]="slide.url" type="video/mp4">
      </video>
    </vg-player>

    <vg-player class="media-player" *ngIf="slide.assetType === 'Audio'">
      <vg-overlay-play></vg-overlay-play>
      <vg-buffering></vg-buffering>

      <vg-controls>
          <vg-play-pause></vg-play-pause>

          <vg-time-display property="current" format="mm:ss"></vg-time-display>

          <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-time-display property="total" format="mm:ss"></vg-time-display>

          <vg-mute></vg-mute>
          <vg-volume></vg-volume>
          <vg-fullscreen></vg-fullscreen>
      </vg-controls>

      <audio vg-media [id]="slide._id">
        <source [src]="slide.url" type="audio/mp3">
      </audio> 
    </vg-player>
  </slide>
</carousel>

Elecash on Dec 16, 2016