videogular2 icon indicating copy to clipboard operation
videogular2 copied to clipboard

handle buffer between two videos (for slow connections)

Open jnrndn opened this issue 8 years ago • 6 comments

Description

When video 1 is loading buffer video 2 has to be paused until video 1 is ready to continue, then both videos must be played.

Expected Behavior

Pause and play video handling buffer.

Actual Behavior

When video 1 is loading buffer, video 2 pauses, but no video starts again when buffer is ready.

Steps to Reproduce

    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "@types/core-js": "^0.9.42",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.1",
    "videogular2": "^5.4.11",
    "zone.js": "^0.8.14"
@angular/cli: 1.2.7
node: 8.2.1
os: win32 x64

.HTML

<vg-player (onPlayerReady)="onPlayerReady($event)">
    <vg-overlay-play></vg-overlay-play>
    <vg-buffering></vg-buffering>
    <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 [vgSlider]="true">
            <vg-scrub-bar-current-time [vgSlider]="true"></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-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>
        <vg-mute></vg-mute>
        <vg-volume></vg-volume>
        <vg-fullscreen></vg-fullscreen>
    </vg-controls>
    <video
        #primary
        [vgMedia]="primary"
        [vgMaster]="true"
        id="firstVideo"
        preload="auto">
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" >
    </video>
    <video 
        #secondary 
        [vgMedia]="secondary" 
        id="secondVideo" 
        preload="auto" 
        crossorigin>
        <source src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4">
    </video>   
</vg-player>

.TS

 onPlayerReady(api: VgAPI) {
    this.api = api;
    this.api.getMasterMedia().subscriptions.timeUpdate.subscribe(() => {
      this.firstVideo = this.api.getMediaById('firstVideo');
      this.secondVideo = this.api.getMediaById('secondVideo');
      if (this.firstVideo.isBufferDetected || this.secondVideo.isBufferDetected) {
        if (this.firstVideo.isWaiting || this.secondVideo.isWaiting) {
          this.firstVideo.pause();
          this.secondVideo.pause();
        }
        if (this.firstVideo.canPlayThrough || this.secondVideo.canPlayThrough) {
          this.firstVideo.play();
          this.secondVideo.play();
        }
      }
    });
  }

jnrndn avatar Aug 16 '17 14:08 jnrndn

That should be working by default, no extra work is needed since that is the default behavior as you can check here: https://videogular.github.io/videogular2-showroom/#/master-player

Can you give me more information about what you want to do??

Elecash avatar Aug 16 '17 14:08 Elecash

@Elecash I want to pause the video, IDK 5 seconds maybe 10, waiting for more buffer load when the conncetion is very slow, so user can see a more fluid video, not one that stops every millisecond. To emulate this slow connection i'm using throttling in Chrome developer tools

jnrndn avatar Aug 16 '17 15:08 jnrndn

This is a new feature, we can try to add it in the next release.

Elecash avatar Aug 21 '17 10:08 Elecash

Awesome!!

jnrndn avatar Aug 22 '17 18:08 jnrndn

How's this new feature going?

luchillo17 avatar Jan 16 '18 21:01 luchillo17

any updates in this release?

moi12fre avatar Apr 23 '20 03:04 moi12fre