Closed henke37 closed 4 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).
While it would be nice to be able to specify the start time like that, this is about more dynamic control using javascript.
@nvivant See https://github.com/Chocobozzz/PeerTube/commit/f37bad639b36d35c29a464dc52123a1e7c9cd28a for your start parameter
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.
I agree with the playback feature, mostly for API hooks of seeking and pause for the embedded player
I meant dynamic control, sorry coz the mistake, cheers
Ah ha, yep this covers what I was thinking. Is anyone already working on this?
@rezonant not that I know of.
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?
@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
@raphaelbastide It's a very interesting idea. Would you want to create a separate issue and list the things you would like to customize?
@Chocobozzz Here it is https://github.com/Chocobozzz/PeerTube/issues/790
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.
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?
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.
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.
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.
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.
@mrx1983 Please make a structured list of features you want/your use cases, and I'll edit the issue.
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).
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.
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.
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.
That's great. I may reach out to you if/when I get around to the React player
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.
@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.
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:
async function getTime(){return this.sendMessage('seek');}
i think that is all that i wish for at the moment.
Just created the issue in the cytube github https://github.com/calzoneman/sync/issues/796
@Chocobozzz Could you check if it is feasible?
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
I guess this is the new link:
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