[TW5] Vimeo and YouTube better Integration

[RichShumaker]

From working with the Hangouts and my own LegacyCd Virtual Project I see a big need for myself to have better integration with Vimeo and YouTube.

I am using YouTube mostly right now but find Vimeo excellent too.

The YouTube API came up briefly in the Hangouts this week.

In TWC I remember using Eric's PlayerPlugin for my video stuff on the net.

I would love to be able to click a time link for a YouTube video in a tiddler and have the embedded video jump to that time, instead of opening a new TAB or Window.

Being able to grab the Share Code from YouTube and drop it into TiddlyWiki faster would be amazing as well, possibly using TiddlyClip and a macro to pull the Embed Code, which is all you need.

How complex is integrating the YouTube API into TW?

Since I am a code Noob this might be beyond my capability but one can try.

Does anyone else have or use for YouTube or Vimeo with their TiddlyWiki's?

I am sure there are other Media type site that integrating TW with would be helpful like Soundcloud.

One idea I had was to be able to create a complex playlist where you play snippets of each video.

Thanks again everyone for all the help.

Rich Shumaker

[Tobias Beer]

Hi Rich,

I can imagine there being a <$video> widget which can be configured to output a player for supported sites, with attributes like title, url, width, height, autoplay, etc... using simple iframes, no exessive api magick.

The video widget could be nestable so as to define a number of timestamps, e.g.:

<$video mode=player url="foo.com/345egfw" title="foo">
    <$video mode=cue start=1m30s comment=foo/>
</$video>

...which would, based on some perhaps definable template, render a clickable link / button which when clicked rerenders the video previously rendered by the outer video widget at the given time / for the given start-end positions. Right now, implementing the actual API for each site seems overkill for simple cueing behavior.

Anyhow, the inner widget call could be simplified into some macro, e.g.

<<cue 1m30 "foo">>

Something like that?

@Jeremy,

As for querying the dom, are there some basic helpers in tw5 to do that? e.g. something corresponding to $.closest() and $.find() in jQuery? As you can see, the idea is to have one widget (even partially) redraw the output of another, in this case even the parent.

Is that a workable / meaningful pattern?

Best wishes, Tobias.

[Jeremy Ruston]

Hi Tobias

@Jeremy,

As for querying the dom, are there some basic helpers in tw5 to do that? e.g. something corresponding to $.closest() and $.find() in jQuery?

There are some DOM helper functions in the core:

https://github.com/Jermolene/TiddlyWiki5/blob/master/core/modules/utils/dom/dom.js

 

As you can see, the idea is to have one widget (even partially) redraw the output of another, in this case even the parent.

To the extent that that is possible, you'd be working in the widget render tree, not the DOM tree.

Remember that TW5 isn't like traditional jQuery development. With traditional jQuery work you keep the state of the application in the DOM; that's why there's a lot of DOM manipulation. In TW5, you never keep state in the DOM, and so there's very little DOM manipulation.

 

Is that a workable / meaningful pattern?

You're trying to apply your existing knowledge of DOM-based development to TW5. I think you'll run into difficulties by approaching it that way, because most of your working assumptions are going to be wrong. You're raising questions and proposals that are concerned with the low level code, and so I think you'll benefit from reading the code.

Best wishes

Jeremy.

 

Best wishes, Tobias.

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

--

Jeremy Ruston
mailto:jeremy...@gmail.com

[RichShumaker]

Thanks Tobias and Jeremy.

I will have to look at the embed code for both sites as a generic set of code makes a lot of sense.

As far as the timecode goes I am afraid I am lost with what you guys are talking about.

I was hopeful that you could feed the Tiddler Data back to the Tiddler and nesting the Tiddlers with Transclusion was an idea I thought of but wasn't sure how to feed the data from one to the other.

I don't think my simplistic explanation above will help but I wanted to find out if I might be on the correct path.

Rich Shumaker

[Jed Carty]

If you just want the video to start at a specific time inside tiddlywiki I have that working in the newest version of my YouTube video annotations tiddler. It probably won't be a good long term solution, but the video segments set the embedded video to play the segment. It wouldn't be hard to make the normal timestamp links do the same thing. The biggest problem would be the conversion from seconds to the hh:mm:ss format, but I am sure that some simple javascript could do that.

[RichShumaker]

Astrid made a start stop embed that I had working.

So I could create a tiddler with an embedded video that started at one point and played to another point.

What I am looking for here is a single tiddler(or Transculsion of Tiddlers) that had the start and stop points for all the sections of the video.

Each section has it's own link and when you click

Part 1 that will go from the start to 2 minutes

Part 2 will go from 2 minutes to 4 minutes.

Part 3 from 4 to 6 minutes.

Name of link(Part) and time(2 minute increments) is totally made up and could be anything.

So the links in the tiddler trigger the video to start at one point and play to another point.

BUT you never leave that Tiddler or that browser tab.

The embedded video just jumps around.

It would be cool to set the variables in real time as well for loop, screen size, ect.

So you could loop a section or unloop it.

The end goal would be customized YouTube Playlists using TiddlyWiki's Transclusions or a similar technique.

I have another Topic Link again from Astrid that will open a new page and start on a specific time.

I think that is the one that you used Jed and it opens a new page to YouTube.

Unless you have another cool one that I haven't seen yet, love what you are creating.

Your implementation are awesome Jed any chance of a tutorial on how you make the buttery goodness you make?

Thanks again everyone.

Rich Shumaker

[Jed Carty]

Only the video segment part changes the embedded video, in what should be the default thing there is a link (invisible button actually) that says '60s to 67s - test' which will set the start and end time to 60 seconds and 67 seconds respectively. It doesn't autoplay because I couldn't find a way to toggle the autoplay that turned it off after playing. It sets the 'start=' and 'end=' part of the embed url. I may be able to find some way to toggle the autoplay value, but I have been working on the other plugins so I haven't thought much about it.

If you have something working from Astrid than you should probably go with that to get the nice looking time stamps instead of having to use everything in seconds for the start and stop times.

[Tobias Beer]

Hi Jeremy,

 

Remember that TW5 isn't like traditional jQuery development. With traditional jQuery work you keep the state of the application in the DOM; that's why there's a lot of DOM manipulation. In TW5, you never keep state in the DOM, and so there's very little DOM manipulation.

To me, this is not about states, it is about but temporarily manipulating a representation, a simple action that does not require storing whatever changes to the output were made. Meaning, I do not need to remember the last triggered start (or end) position for the video. Instead, I just need that button / link to trigger a redraw of the associated iframe to have that player / video set to the desired parameters. This information does not need to be stored as a state and can be happily discarded, can it not? In other words, we are entirely working with the DOM at this moment, are we not?

Best wishes, Tobias.

[Jeremy Ruston]

Hi Tobias

Another point to bear in mind: the entire widget tree (and hence DOM tree) may need to be destroyed and recreated at any time as part of a refresh cycle.

> To me, this is not about states, it is about but temporarily manipulating a representation, a simple action that does not require storing whatever changes to the output were made. Meaning, I do not need to remember the last triggered start (or end) position for the video. Instead, I just need that button / link to trigger a redraw of the associated iframe to have that player / video set to the desired parameters. This information does not need to be stored as a state and can be happily discarded, can it not? In other words, we are entirely working with the DOM at this moment, are we not?

Embedding a YouTube video as an iframe is already problematic. Try playing a video on tiddlywiki.com and then change the language setting while the video is playing. The video will reset back to the beginning. That's because the video player has state (whether it is playing or not) that is not restored after a refresh. The fix would be for a YouTube widget to store in tiddlers the position within the video, and whether it is playing or not. Then the widget could restore the video to (almost) the correct point. If the widget also responded to changes in those tiddlers then we'd have a very flexible basis for controlling and manipulating videos.

Best wishes

Jeremy.

[Tobias Beer]

Hi Jeremy,

 

Another point to bear in mind: the entire widget tree (and hence DOM tree) may need to be destroyed and recreated at any time as part of a refresh cycle.

Sure, but that is true with or without updating a once rendered player via button click.

Embedding a YouTube video as an iframe is already problematic. Try playing a video on tiddlywiki.com and then change the language setting while the video is playing. The video will reset back to the beginning.

I think we should rewind to reasonable expectations. TiddlyWiki is not (yet) a video hosting site with such aspirations. If I was on any other website and changed that language, I would most likely see a fresh player.

In that sense, I prefer to keep the requirements simple. Of course, I could see to it if I can't hook up to some youtube api, store that player state in some tiddler and then restore that, as was  Right now, I would start with the basics and leave such aspirations for a next round when someone thoroughly begs for it.

Best wishes, Tobias.

[RichShumaker]

Tobias

Thanks for discussing this more and if you create anything please let me know I would love to try it out.

I think having Multimedia of every type at the core of TW opens up the world of possibilities.

Any chance we can get linkimg added to the core?(wait that is another thread so skip this question)

Astrid's YouTube Hangout Macro worked but the code reacted differently than expected causing errors.

She was able to find the issue and fix it, here is a direct link to that code [[$:/.rich/macros/youtube-embed.js]]

Her 2 Macro's <<YouTube-Embed>> and <<Embed>> both work really well now.

Here is a Code Sample for putting a video into a Tiddler

<<embed "076" "00:00:00" "00:01:30">> - Embeds Today's Hangout #076 with a start of 0 and end of 1:30.

I talked to Jed Carty after the hangout today and his UI for the YouTube Macro allows the functionality of not leaving TiddlyWiki and playing a section of the video.

I did not see it last time I checked his implementation but it is there and WOW Jed really WOW.

He is updating it and it should be able to do timecode start(##:##:##) and timecode end(##:##:##) with no seconds conversion needed once he completes the update.

One use I thought of for this is Students watching lectures from YouTube could easily cut them apart into sections to allow 'Tiddler' sized data sets from Big Lectures.

Thanks again to everyone for their help.

Rich Shumaker

[Jeremy Ruston]

Hi Tobias

I think we should rewind to reasonable expectations. TiddlyWiki is not (yet) a video hosting site with such aspirations. If I was on any other website and changed that language, I would most likely see a fresh player.

Changing the language was just a convenient way to cause a refresh cycle; there are many other ways to do it that will be encountered more frequently. 

 

In that sense, I prefer to keep the requirements simple. Of course, I could see to it if I can't hook up to some youtube api, store that player state in some tiddler and then restore that, as was  Right now, I would start with the basics and leave such aspirations for a next round when someone thoroughly begs for it.

For sure, yes

Best wishes

Jeremy

 

Best wishes, Tobias.