videojs / videojs-youtube

YouTube playback technology for Video.js
1.13k stars 549 forks source link

PIP button throwing Uncaught (in promise) undefined #562

Open arl1nd opened 4 years ago

arl1nd commented 4 years ago

Dear author,

I am experiencing an issue with Picture in Picture button. The problem can be easily reproduced right after cloning and running npm install on your package:

https://d.pr/v/lK1Z7P

I have also tested with latest version of VideoJS but nothing changed.

Can you suggest a solution here?

kosso commented 4 years ago

Same issue here:

core.js:6260 ERROR Error: Uncaught (in promise): [object Undefined]
    at resolvePromise (zone-evergreen.js:798)
    at Function.reject (zone-evergreen.js:876)
    at constructor.requestPictureInPicture (video.es.js:8820)
    at Player.techGet_ (video.es.js:22713)
    at Player.requestPictureInPicture (video.es.js:23430)
    at PictureInPictureToggle.handleClick (video.es.js:13622)
    at HTMLButtonElement.data.dispatcher (video.es.js:1898)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:41640)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
kosso commented 4 years ago

This also seems to be a related issue in the on FireFox, I don't see the picture-in-picture control button in the player, but I can right-click the video and use the native menu option. (as also seem in the youtube sample video above)

gkatsev commented 4 years ago

I think that we fixed this in a recent version of Video.js.

Tonybobo commented 4 years ago

I have install the latest version of video.js(7.9.3). However, the pip button is not working even though i can use pip in the native menu option. Has anyone come out with a solution?

gkatsev commented 4 years ago

Unfortunately, I don't think that youtube provides an API for it (https://developers.google.com/youtube/iframe_api_reference).

yankaled commented 4 years ago

@gkatsev, while debugging this issue, I've noticed that the error happens when choosing this PIP option in Chrome (specifically, in Chromium), but not in Firefox. Inspecting videojs version 7.8.4 (video.js/dist/video.js, line 16118), I also noticed that the code:

_proto.handleClick = function handleClick(event) {
  if (!this.player_.isInPictureInPicture()) {
    this.player_.requestPictureInPicture();
  } else {
    this.player_.exitPictureInPicture();
  }
};

only fires while playing an youtube video in Chrome (that function doesn't run if we play regular videos or play yt in Firefox).

Given the behavior above, would there be a way of turning PIP on without having to call the youtube api? Maybe there is a way to mimic Firefox behavior? (that is, whatever happens that doesn't trigger the code I pasted above). Just a guess though, I have no Idea what the internals of Firefox or Chrome are.

Btw, the "native" option (right mouse btn, double click) does work on chrome. I take it that the processes by which the "native" and the "player menu" PIP options work are (quite) different.

gkatsev commented 4 years ago

@yankaled It works in Firefox and via the right click menu because these interact directly with the video element. Unfortunately, if the youtube API doesn't provide a method to enter and exit the pip, it can't work via Video.js. The fix for not erroring out when the pip button is pressed with the youtube tech is in Video.js 7.9.x https://github.com/videojs/video.js/commit/907d1cd730d326480150c2814946476dffa90441

yankaled commented 4 years ago

Thanks @gkatsev