search

Chocobozzz / PeerTube

ActivityPub-federated video streaming platform using P2P directly in your web browser
https://joinpeertube.org/
GNU Affero General Public License v3.0
13.11k stars 1.52k forks source link

add PiP support #1211

Open ghost opened 6 years ago

ghost commented 6 years ago

I think it would be nice to support picture in picture, just like youtube now, or even better, like twitch.tv

What happened?

The video stops playing when I switch to a different site, or look for another video. And I am unable to see the video when I scroll down to read a comment.

What do you expect to happen instead?

A small player should pop up and show the video.

parts:

rigelk commented 6 years ago

I imagine it like the video miniature player that goes to the corner in YouTube's mobile app. Is it how you envisioned it?

However it would only work while you stay on the same site, not beyond when you switch to a different site.

ghost commented 6 years ago

@rigelk yes, exactly. Like the youtube app, youtube.com, newpipe, twitch.tv, ... And of course only on PeerTube and the Angular app.

screenshot_2018-10-06 twitch twitch.tv if you scroll or click somewhere else screenshot_2018-10-06 youtube youtube if you click on the PiP button

rigelk commented 6 years ago

Thanks for the screenshot! That's what I was missing. I didn't know they had a corner player (PiP sounds more like putting a video in a corner of the video itself), but it looks great.

McFlat commented 6 years ago

+1

XenonFiber commented 6 years ago

This is a nice feature, but I would prefer how YouTube handles it with a button over how Twitch automatically switches to it. I don't think websites should break continuity; if I'm clicking away from a video, I don't expect the video to come with (unless I explicitly wanted it to, of course).

ghost commented 6 years ago

@XenonFiber I see. Good point :+1: And having the small window when scrolling? This shouldn't bother, right?

XenonFiber commented 6 years ago

@BO41 That would probably be fine since you're still on the same video page. It feels like something you should still have to choice to disable, though.

rigelk commented 5 years ago

Following PR #1345, PR #1463 takes over. It still needs to be disabled by default, and expose the option to enable it to non-authenticated users.

BenLubar commented 5 years ago

You can right click a video, then right click again without moving the mouse, and then select "Picture in Picture" from the browser menu in browsers that support it.

This method also works on YouTube.

ghost commented 4 years ago

Most major browsers now support PiP, so no need to implement it

Chocobozzz commented 4 years ago

I think we can keep this issue opened, because for now when you move to another page you loose the player. Maybe we can keep the native pip player when we change page since we are in a SPA but I haven't read the pip specs.

BenLubar commented 4 years ago

All you need to do to keep the native PiP player working on page change is don't delete the HTML <video> element and reuse it instead

Hide it and pause it when you're not on a page that plays a video, but don't delete it.

kimsible commented 3 years ago

Hi @rigelk would you have a current work on PiP or did you plan to push this feature later in 2021 ?

rigelk commented 3 years ago

@kimsible it is not on my todo in the foreseeable future, nor do I have pending work on this.

kimsible commented 3 years ago

Thank you @rigelk for the details. Is there anything I can do like extracting the videojs wrapper to make the native PiP work with the navigation left menu ?

rigelk commented 3 years ago

@kimsible it depends what you are aiming for, and this is potentially a huge refactoring ahead. But why the navigation left menu?

kimsible commented 3 years ago

@rigelk actually all navigation, once the videojs component is destroyed with a new route. We may extract the videojs-wrapper outside the router-outlet. Its seem to be a huge refactoring, but maybe there is a way with angular.

kimsible commented 3 years ago

After checking, all mainstream video platform, only Dailymotion has a full support :

The player wrapper of Dailymotion is indeed placed above the main root component with absolute css position.

My knowlegde of Angular seems a little bit limited to this kind of refactor but we may try to display the <my-video-watch></my-video-watch component above the <router-outlet></router-outlet> in the app main component template.

The video-watch component should only display its main view when the router is on the videos/watch route. Videojs instance should be destroyed only when routing and native PiP is not used.

In any case, I don't think Firefox has an API like Chrome to know if the native PiP is used, so we must have our own home made mini player like Dailymotion does while Firefox does not support the official W3C API.

From now I suggest to not enter in this hug refactoring, because Firefox may support this API in the future. Maybe we could only enable the native PiP support of Chrome implemented in Videojs with a toggle button in the player (only for Chrome) : https://docs.videojs.com/pictureinpicturetoggle

What do you think @rigelk ?