handle buffer between two videos (for slow connections)
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();
}
}
});
}
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 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
This is a new feature, we can try to add it in the next release.
Awesome!!
How's this new feature going?
any updates in this release?