0

I'm using videogular2 to display HLS on an Angular 6. It's working on desktop or Android mobiles, but I have the following error on IOS : 

TypeError: undefined is not an object (evaluating 'this.medias.toArray()[0].elem')

Here is my template : 

<div>
    <vg-player>
      <video [vgHls]="url" id="singleVideo" controls crossorigin>
      </video>
    </vg-player>
</div>

Verions used :

"hls.js": "^0.11.0",

"videogular2": "^6.3.0"

Sa Hagin
  • 502
  • 1
  • 7
  • 18
  • Wasn't a controls issue for me, turns out I needed to add `#media [vgMedia]="media"` to the video element. That did the trick! – capcom-r Mar 14 '20 at 14:55

1 Answers1

0

Find a way to make it work. It seems that it is the basic controls that cause the bug. Adding a custom controls fix the issue : 

<vg-player>
<vg-overlay-play></vg-overlay-play>
<vg-buffering></vg-buffering>

<vg-controls>
  <vg-play-pause vgFor="singleVideo"></vg-play-pause>

  <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 vgProperty="left" vgFormat="mm:ss"></vg-time-display>

  <vg-mute></vg-mute>
  <vg-volume></vg-volume>

  <vg-fullscreen></vg-fullscreen>
</vg-controls>

<video #media [vgMedia]="media" [vgHls]="url" id="singleVideo" autoplay>
</video>

Sa Hagin
  • 502
  • 1
  • 7
  • 18