Video player embed options

raphaelbastide commented 6 years ago

Here are some possible options that can be useful for an advanced use of the embed video player. Those are proposals and I am curious about your thoughts. Let me know!

Title	Sass class name	Description	Default value
Width	none	Value in px. Width of the player	`560`
Height	none	Value in px. Height of the player	`315`
Title	none	Boolean, display or not the video title	`true`
Subtitle	none	Boolean, display or not the video subtitle	`true`
Bar icons	none	`full` `minimal` or `none`, 3 levels of icons displayed on the bottom bar: `full`: Play, Time, Volume, Settings, PeerTube logo, Fullscreen. `minimal`: Play, Volume, Fullscreen. `none`: no icons.	`full`
Background color	primary-background-color	Changes the play button and the bottom bar background color	A linear gradient
Foreground color	primary-foreground-color	Changes the play button and the bottom bar icons color	`#ffffff`
Peertube button	none	Boolean, display or not the peertube button in control bar	`true`

Also some questions I have in mind:

What is the current player skin based on?
What led to the design choices?
Can instance admin change the player CSS skin, if yes how easily?

miblodelcarpio commented 6 years ago

I could probably make use of all these proposed options! May I also add to the list:

Title	Sass class name	Description	Default value
Playback speed	none	Value in %. 100% is the speed of the original recording; 200% twice the original speed, so the video takes half the original duration to elapse	100%

raphaelbastide commented 6 years ago

@miblodelcarpio Interesting, what would be the use case?

miblodelcarpio commented 6 years ago

If you check out the "Previous Episodes" area here and click through to one of the episodes, you can put this in context.

I know at least one viewer likes to watch this stuff sped up, to 200% I think. As far as I know, YouTube's API doesn't currently let me a) Give them controls for this in one of my menus / bound to keys; or b) Store their preferred playback speed in localStorage. I'd like to combine your proposed Bar icons: none / minimal with my own playback speed controls.

rezonant commented 6 years ago

I think adding a playback rate option to the embed would be really easy. Also worth noting that the new PeerTube Embed API does let you control that programmatically, at least, so there's a lot of context in the codebase for how to implement it (check out client/src/standalone/videos/embed.ts).

Width and height are unnecessary, just size your iframe from outside the embed and it will adapt as needed.

The rest of the options all affect videojs (the playback component PT uses) and surely possible, but perhaps the ability to wholesale replace the player skin might be a better way to accomplish those.

On the other hand, the instance should not run code controlled by the embedder to avoid security issues.

rezonant commented 6 years ago

Note that YouTube does offer the ability to control playback rates both in it's regular embed (gear menu -> Speed, see https://developers.google.com/youtube/youtube_player_demo) as well as programmaticly via their embed API for those who want to build their own player controls on top of YouTube:

player.setPlaybackRate(suggestedRate:Number):Void

https://developers.google.com/youtube/iframe_api_reference#Playback_controls

Anton-Latukha commented 6 years ago

Width & Height options

"Width and height are unnecessary, just size your iframe from outside the embed and it will adapt as needed."

Yes, it is definitely superior approach. We live in HTML5 era. Site creator should pick frame size and player is able to adapt to that size, because it is HTML5. Also video scaling is not a problem nowadays, in browsers, as in desktop media players. Developers should not care about browser doing down-scaling, especially at this point.

The embedded player should check for iframe size. (Already DONE) https://github.com/Chocobozzz/PeerTube/issues/790#issuecomment-404065856

Relatively good article: https://rigor.com/blog/2016/03/size-and-quality-optimizations-for-html5-video

Chocobozzz commented 6 years ago

The embedded player should check for iframe size.

I think this is already implemented: https://github.com/Chocobozzz/PeerTube/blob/develop/client/src/assets/player/peertube-videojs-plugin.ts#L370

Anton-Latukha commented 6 years ago

Subtitles are obviously an important feature for good 1.0.
Good main design is an important feature for good 1.0.
Possibility of logo-branding is a strong important feature for 1.0. It is important for companies, businesses and content creators. And since people host their instances, they would demand to be able to put at least their minimal branding on UI. AFAIK it is already done.
Any custom-design features (icons, color picking, skins) - are very optional features for 1.0. People do can create and watch without them.

henke37 commented 6 years ago

Subtitle as in subtitles or just as in a second title?

Anton-Latukha commented 6 years ago

Yes, raphaelbastide meant subtitle, and overlooked that; I stated about subtitles.

dieudo4 commented 5 years ago

I have included subtitles to a PeerTube video, and I would like the subtitles to be automatically selected. Is it possible to add an instruction to the basic iframe script ? : <iframe width="560" height="315" sandbox="allow-same-origin allow-scripts" src="https://peertube.social/videos/embed/ed808b24-5357-41c7-9875-8f572f63aaad" frameborder="0" allowfullscreen></iframe>

raphaelbastide commented 5 years ago

Subtitle as in subtitles or just as in a second title?

I meant a second title sorry for the confusion. I am talking about the sentence “Uses P2P others may know your IP is donloading this video” that I find sometimes annoying. I think it should be optional.

Chocobozzz commented 5 years ago

Implemented in https://github.com/Chocobozzz/PeerTube/commit/5efab5467cacb4cce584e2d36e4133a701d8c983

fufik commented 4 years ago

I upload a MKV video to a PeerTube 2.0 instance and I can't see any subtitles. What's the problem?

Chocobozzz commented 4 years ago

PeerTube does not automatically import subtitles from MKV format. You need to upload them manually

fufik commented 4 years ago

PeerTube does not automatically import subtitles from MKV format. You need to upload them manually

Okay, but I hope you implement ass (lmao) with all the cool features. I'm not yet of much help to you, but I'm on my way to decentralising everything. Good Luck, heroes!

miroR commented 4 years ago

Subtitle as in subtitles or just as in a second title?

I meant a second title sorry for the confusion. I am talking about the sentence “Uses P2P others may know your IP is donloading this video” that I find sometimes annoying. I think it should be optional.

Uses P2P, others may know you are downloading this video should go away into somewhere less annoying.

What would it look like if the Stasitube put a note on every video saying: We track you every link you open and wherever you browse and whatever you download

And PeerTube is innocence and honesty in comparison to them. That note should go somewhere less conspicuous.

ghost commented 4 years ago

That note should go somewhere less conspicuous.

IMHO the warning should be removed only if the player doesn't make use of p2p technology.

Chocobozzz / PeerTube

Video player embed options #790