vg-controls are not working, seems no event bind.

[kumail-raza]

Hi Videogular Team,

First of all, this is a great product, not just library, all out there contributors I really appreciated for such nice piece of work. :-)

Coming towards issue, I am facing this issue random on page refresh, following are the version and dependencies;

"dependencies": {
    "@angular/animations": "5.2.0",
    "@angular/common": "5.2.0",
    "@angular/compiler": "5.2.0",
    "@angular/core": "5.2.0",
    "@angular/forms": "5.2.0",
    "@angular/http": "5.2.0",
    "@angular/platform-browser": "5.2.0",
    "@angular/platform-browser-dynamic": "5.2.0",
    "@angular/platform-server": "5.2.0",
    "@angular/router": "5.2.0",
    "@ngx-translate/core": "9.1.1",
    "@ngx-translate/http-loader": "2.0.1",
    "@types/youtube": "0.0.29",
    "anchorme": "^1.1.2",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.4.1",
    "ngx-device-detector": "1.3.4",
    "rxjs": "5.5.2",
    "socket.io-client": "^2.0.3",
    "videogular2": "6.1.1",
    "zone.js": "^0.8.4"
  }

Well I have figure out one thing could be the reason, i.e: I am using videogular in a component and that component do hide/show using *ngIF (initially hide), I believe may be somehow due to ngIF since DOM is not created for that component and might the videogural binding mechanism runs before that, due to which binding is not attached to the DOM elements of vg-controls. (may be).

My question how can I hide/show controls using code, also how to make sure bindings things runs after the DOM successfully there.

Thanks.

[kumail-raza]

On Chrome (v70+) with MAC, videogular2 'play' event not working on refreshing the page by user. Quick response will be appreciate as I am running out time for next release with this fix.

Futhermore, On Chrome(v69+) with Windows its working fine with the same case.

Following is the code:

<vg-player (onPlayerReady)="onPlayerReady($event)"
           (isMetadataLoaded)="playVideo()"
           class={{_additionalClass}}>

  <vg-overlay-play *ngIf="showController"></vg-overlay-play>
  <vg-controls *ngIf="showController" [vgAutohide]="true" [vgAutohideTime]="1.5">
    <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 [vgFor]="singleVideo">
      <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="total" vgFormat="mm:ss"></vg-time-display>

    <vg-mute></vg-mute>

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

  <video [vgMedia]="media" #media id="singleVideo" preload="true" width="100%"
         height="400px">
    <source src="{{_videoUrl}}" type="video/mp4">
  </video>
</vg-player>

[kumail-raza]

Hi videogular team,

I have came up one observation regarding my issue, is that due to chrome autoplay policy, auto play feature disable and on that case some how some internal exceptions occurs in your library and events for controls (only vg-play-pause) are also not able to bind.

Why I am guessing this is because when I able to run the autoplay feature with muted initially, the events are perfectly available.

Till you fix that issue in your library what ever the reason was, I am able to overcome my issue by binding the click event vg-play-pause using JQuery, and trigger the event of video element play/pause.

[kumail-raza]

hello?