Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Picture in picture throwing errors #734

Open
abhijith26 opened this issue Jun 25, 2021 · 1 comment
Open

Picture in picture throwing errors #734

abhijith26 opened this issue Jun 25, 2021 · 1 comment

Comments

@abhijith26
Copy link

Expected Behavior

Enter picture in picture on press of a button/ when calling requestPictureInPicure()

Actual Behavior

Not entering , console error => Uncaught (in promise) DOMException: Failed to execute 'requestPictureInPicture' on 'HTMLVideoElement': Must be handling a user gesture if there isn't already an element in Picture-in-Picture.

Steps to Reproduce

create an angular app => create vimeo player using sdk => enter pictureInPicture using player.requestPictureInPicture() method after checking player.getPictureInPicture() ( on line player.js:22)

angular version - 10.1.2
vimeo sdk version - 2.15.3

code

player-component.html

<div [attr.data-vimeo-id]="vimeoVideoId" id="playerDiv"></div> <button (click)="triggerPip()">PIP</button> <button (click)="leavePIp()">leave pip</button>

player-component.ts

import { AfterViewInit, Component, OnInit } from '@angular/core';
import player from '@vimeo/player';

@component({
selector: 'app-vimeo-player',
templateUrl: './vimeo-player.component.html',
styleUrls: ['./vimeo-player.component.css']
})
export class VimeoPlayerComponent implements OnInit, AfterViewInit {

constructor() { }

public vimeoVideoId;
public vimeoPlayer;
public isPlaying;

ngOnInit(): void {
this.vimeoVideoId = 258498657;

}

ngAfterViewInit() {
this.vimeoPlayer = new player('playerDiv', {
id: this.vimeoVideoId,
pip: true,
responsive: true
})
this.registerVimeoEventLIsteners();

}

private registerVimeoEventLIsteners() {
this.vimeoPlayer.on('play', () => {
this.isPlaying = true;
console.log('video started');
})
}

public async triggerPip() {
try {
const isPip = await this.vimeoPlayer.getPictureInPicture();
if (!isPip) {
this.vimeoPlayer.requestPictureInPicture().then(() => {
console.log('pip success');
}).catch((err) => {
console.log(err);
})
}
} catch(err) {
console.log(err);
}
}

public async leavePIp() {
try {
const isPip = await this.vimeoPlayer.getPictureInPicture();
if (isPip) {
this.vimeoPlayer.exitPictureInPicture(() => {
console.log('leaving pip');
}).catch((err) => {
console.log('errro');
})
}
} catch (err) {
console.log(err);
}
}
}

@bdougherty
Copy link
Contributor

Have you tried removing the this.vimeoPlayer.getPictureInPicture() call? It might be losing the user gesture because that requires a round-trip postMessage. There shouldn't be any issues with requesting PiP while it's already open.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants