Controllable embedded player

henke37 commented 6 years ago

The ability to control the embedded player from the hosting page.

The youtube player api is a good example to follow, keeping the same function names allows for easy migration of legacy code.

EDIT: Additional features https://github.com/Chocobozzz/PeerTube/issues/468#issuecomment-466179176

nvivant commented 6 years ago

Yes. For example, we would love to have a feature to start the embedded video at a given time (https://peertube.xyz/videos/watch/c20a3f35-d1b3-4865-8dff-25593151ffe2?start=120 to start playing it at 120 seconds).

henke37 commented 6 years ago

While it would be nice to be able to specify the start time like that, this is about more dynamic control using javascript.

Chocobozzz commented 6 years ago

@nvivant See https://github.com/Chocobozzz/PeerTube/commit/f37bad639b36d35c29a464dc52123a1e7c9cd28a for your start parameter

fredsif commented 6 years ago

Nice! I agree too with henke37; dynamic control of the player akin to the Youtube API for iframe would be a cool addition to the platform.

nahuely commented 6 years ago

I agree with the playback feature, mostly for API hooks of seeking and pause for the embedded player

nahuely commented 6 years ago

I meant dynamic control, sorry coz the mistake, cheers

rezonant commented 6 years ago

Ah ha, yep this covers what I was thinking. Is anyone already working on this?

rigelk commented 6 years ago

@rezonant not that I know of.

raphaelbastide commented 6 years ago

What kind of options do users already have for iframe parameters? Is it possible to hide the title or at least the subtitle? If it is not the case should I open a new issue? Youtube et al have commercial reasons to limit the customization of video players. I think Peertube can really interest people wanting advanced customization options, e.g a minimal player interface. What do you think?

rezonant commented 6 years ago

@raphaelbastide The current embed options are autoplay which defaults to false, and start which can be set to a specific time to start playback at some point within the movie.

My PR adds muted, loop, controls, and api which enables the API over postMessage

Chocobozzz commented 6 years ago

@raphaelbastide It's a very interesting idea. Would you want to create a separate issue and list the things you would like to customize?

raphaelbastide commented 6 years ago

@Chocobozzz Here it is https://github.com/Chocobozzz/PeerTube/issues/790

mrx1983 commented 5 years ago

hello, i wanted to ask how far the progess with this is. can this api already be used? i tried to include it, but the description says something about loading with yarn and apparently many src files are in typescript. its a bit complicated. i never worked with yarn nor typescript. i thought to just include 1 or 2 javascript files, like with the youtube api.

for example: <script src="peertubeapi.js"></script>

after i have seen that the player uses the jschannel script from mozilla, i tried to include it this way. i basically included the jschannel script, connected to the peertube player channel, and was even able to play and pause the player. but for some reason the callbacks not work. so i can control the player, but i can't get any values from it.

<head> <script src="jschannel.js"></script> </head>

<iframe width="560" height="315" src="https://vault.mle.party/videos/embed/f205d2cb-1b73-4e2e-a113-16254fa76930?controls=1&api=1" frameborder="0" allowfullscreen=""></iframe>

<script>
chan = Channel.build({
  window: document.querySelector('iframe').contentWindow,
  origin: "*",
  scope: "peertube",
  onReady: function() {
    console.log("channel is ready!");
  }
});
</script>

//started from the dev console:

chan.call({method:'play',success:function(){}}); //this works, and it plays
chan.call({method:'getPlaybackRates',success:function(o){console.log(o);}}); //this callback not works
chan.bind('playbackStatusUpdate',function(){console.log('test');}); //this event not works`

for strange reasons it not really works when i connect with peertube window/player, but when i use other windows with jschannel included, everything works as expected. maybe someone can direct me in the right direction. i basically need a simple solution to get the api working, either with a simple javascript, or with the jschannel script.

naturallymitchell commented 5 years ago

I haven't looked into this anymore than trying it, and it seems to work well. This embeddable <object> has the video controls and everything: https://peertube.video/videos/embed/217eefeb-883d-45be-b7fc-a788ad8507d3

So it works, right?

mrx1983 commented 5 years ago

it has controls, but i want to control it with a script/website. according to the time i want to choose videos and seek to the correct position. like a very simple synchtube based on the computer time/timestamp. every device with a correct time sees the same video at nearly the same position.

and for this i built a very simple javascript and html5 driven website. i already made that for the youtube api and youtube videos. one can see it on https://247.bronies.net i only had to link to the youtube javascript file and was able to control the youtube player.

it was very simple and straight forward. but for peertube it is somehow a bit more complicated. i have no idea what this yarn is, and i never coded with typescript before. i'm not experienced with yarn and typescript yet. only javascript and a bit jquery.

fredsif commented 5 years ago

Yes. That feature is needed. I also wanted to do a simple HTML5 site with a playlist showing 24/7 videos synced for all the users. It's much easier than doing constant live streaming of content.

mrx1983 commented 5 years ago

i finally found the solution to get jschannel working. if one searches in google, most of the time one stumbles over (i guess) an older version of the jschannel script. after i looked further into the javascript codes, i found out that the jschannel script from the official site and from the player was different with establishing of the connection. the old version had send ping and pong to verify the correct connection, and this new version used publish-request and publish-reply. so it was just not compatible. the correct version to work with this player, is this one: https://raw.githubusercontent.com/yochannah/jschannel/master/src/jschannel.js https://github.com/yochannah/jschannel

i still would like to see a simple inclusion like with dailymotion, youtube, vimeo etc. that would make it a lot easier for many people to include it in their code.

but since jschannel now also works, i'm finally able to make some progress with my site.

mrx1983 commented 5 years ago

can i propose another thing? what is with error handling? for example if a video not exists or got removed? how can i check this with the api or jschannel? also at the moment, one has to create a new iframe manually to load a new video, maybe one can make something similar like the loadvideobyid function from the youtube api. so that the api handles the loading of new videos by itself.

Chocobozzz commented 5 years ago

@mrx1983 Please make a structured list of features you want/your use cases, and I'll edit the issue.

DaneSirois commented 5 years ago

So from what I take, the player currently lets you choose what time to start the video at. Does the start parameter let you programatically change the current play time once the video has started playing?

I think a nice addition to the ecosystem would be a React component wrapper for the player similar to (https://github.com/CookPete/react-player).

mrx1983 commented 5 years ago

if i understand you correctly you mean the start parameter of the embed url. this parameter tells the embed at which position it should start. this is a one time thing, it just tells the player the start position after loading. after the player started playing you need to use the api to read the time and to set the time. https://github.com/Chocobozzz/PeerTube/blob/develop/support/doc/api/embeds.md i personally used the jschannel script directly to change time during playing.

DaneSirois commented 5 years ago

Right. Thanks for the info @mrx1983.

I'm currently looking at setting up a PeerTube instance however my use case depends on the ability to programatically modify the playback time similar to what you have done. It sounds like this is possible which is great.

Once I get my instance set up, I may spend some time looking into and writing a React.js library for wrapping the embed player like the one I linked above (https://github.com/CookPete/react-player). I think it would be a valuable addition to PeerTube's developer ecosystem.

mrx1983 commented 5 years ago

yes that definitely works, i have made some progress with it. i also mix it with youtube. so always one pony episode from peertube and 4 ponyclips from youtube. http://dev247.rainbowdash.cc/test5/ its probably coded a bit complicated, and i also use jschannel directly at the moment to change and read things from the player.

DaneSirois commented 5 years ago

That's great. I may reach out to you if/when I get around to the React player

mrx1983 commented 5 years ago

great, i try to help as best as i can ^^

oh and i ported the peertube api to plain javascript now. https://sharing.rainbowdash.cc/peertubeapi-js.zip hopefully there are no errors, but after a quick check it looked ok. else pls report bugs. i included an example.html file. its now just one plain js file to include, and one can directly work with it. also it is important to use the peertube api in an async javascript function or context, else "await" and similar functions will not work and also could block the website flow. maybe this could helpful for some people, who just want a fast and easy way to include the api, without typescript and compiling etc.

fredsif commented 5 years ago

@mrx1983 That's awesome! Do you know https://cytu.be/ ? They also sync videos with chat for users. Although they don't support peertube because it's lacking the parameters in the API to sync it. If peertube implements them, maybe they will support it.

mrx1983 commented 5 years ago

that would be great. yes i know cytube. cytube is very popular within the brony fandom, we use it in combination with ustream for livestreams, or we just put clips and episodes together from youtube, dailymotion etc. it would be great if peertube and cytube developers would make that possible. maybe they can exchange some infos and coordinate the efforts.

i personally would like:

more playerstates. for example 'ended', 'buffering' etc. not just pause and playing.
an onerror event that tells if the video was loaded correctly and if it exists.
maybe something like loadplayerid so one not has to manual recreate the iframe all the time.
there is a seek method/function in the api, it can also be used to retrieve the current player time. maybe officially adding a function to retrieve the time would be nice. basically adding this: async function getTime(){return this.sendMessage('seek');}

i think that is all that i wish for at the moment.

fredsif commented 5 years ago

Just created the issue in the cytube github https://github.com/calzoneman/sync/issues/796

@Chocobozzz Could you check if it is feasible?

Chocobozzz commented 4 years ago

We published a peertube api library to control the player in https://www.npmjs.com/package/@peertube/embed-api

See the documentation in https://docs.joinpeertube.org/#/api-embed-player

Chocobozzz / PeerTube

Controllable embedded player #468