[TW5] Simpe example for Video or Audio Library

[Greg Davis]

Looking at a growing collection of videos and audios on various topics created a simple test to see how it might work. Thought it might be of interest to others.

This example is for a few KPOP videos which would be stored locally on an internal or external hard drive. So most of the videos will not play but have included a few examples for online content for those that might prefer that. Right now just uses the Table Of Contents, have not tried creating lists or other ways to sort.

Example templates for Local, Dropbox and YouTube are included. At can be viewed at: http://kpoplibrary.tiddlyspot.com

BJ's calendar plugin is included if you want to collect something like regular podcasts.

Hope this example might help spark your own ideas.

Greg

[Tobias Beer]

Hi Greg,

Looks nice and lean, especially the toc on the left and your player.

I would recommend you turn your player into a macro or even template,
so you only feed it what it needs, e.g. the video id, poster and title,

<<youtube someid someimage sometitle>>

In fact, you may want to even use fields for each video tiddler, e.g.

title: Doo Doom Chit Official M/V
yt: syvOPpgilVA
yt-title: 배드키즈 - 이리로 (COME CLOSER) M/V
poster: kpop\Introduction-to-TiddlyWiki.png

...and then use a Conditional ViewTemplate Section to display your player template for every tiddler that has a yt field, e.g.:

title: $:/_my/ui/ViewTemplate/youtube
tags: $:/tags/ViewTemplate

\define youtube-link() https://www.youtube.com/watch?v=$(yt)$

<$list filter="[all[current]has[yt]]">
<center><video width="568" height="320"
 poster={{!!preview}}
 controls preload="none">
 <source src="kpop\Introduction-to-TiddlyWiki.webm" type="video/webm">
 <source src="kpop\Introduction-to-TiddlyWiki.mp4" type="video/mp4">
 Sorry, your browser does not support the HTML 5 video tag.
</video></center>

<div class="middle">
<$list filer="[all[current]has[yt-title]]">
''{{!!yt-title}} - ~YouTube''<br />
</$list>
<$vars yt={{!!yt}}>
<<yt-link>>
</$vars>
</div>
</$list>

Best wishes,

Tobias.

[Greg Davis]

Thanks Tobias. Yes, I like Ton's Left Menu, added a little to it. I was looking for something relatively simple to access videos or audios and thought keeping it that way would be a good example for novice users.

Don't frequently have such a repetitive set of tiddlers, such as these, but a macro would be ideal. Oddly, a quick search at TiddlyWiki.com for examples didn't lead me to a workable macro but another of your posts got me on the right track. At least it seems to be the right track, it worked in Firefox and Chrome.

Here are examples of global macros for local videos and videos on Dropbox, if anyone notices a problem please let me know. I'll have to add macro examples to TiddlySpot.

Leaving macros for audio up to the user.

Greg


LOCAL VIDEOS

title: $:/_video-local macro
tags: $:/tags/Macro

\define videolocal(folder poster name)

<center><video    width="568" height="320"

    poster="$folder$\$poster$"
    controls preload="none">
    <source src="$folder$\$name$.webm" type="video/webm">
    <source src="$folder$\$name$.ogv" type="video/ogg">
    <source src="$folder$\$name$.mp4" type="video/mp4">

    Sorry, your browser does not support the HTML 5 video tag.
</video></center>

\end

folder  = folder containing poster and video files (assumed one level below the TiddlyWiki)
poster  = complete poster filename including extension
name   = video name without the extension

Firefox recognizes only webm videos, Chrome recognizes both mp4 and webm videos. If you only use one browser, you can remove the extra lines. I forget which browser wanted ogg.

the macro call format: 

<<videolocal "folder" "poster" "name">>

example:

<<videolocal "kpop" "[MV] I.O.I _ Very Very Very.png" "[MV] I.O.I _ Very Very Very">>

DROPBOX VIDEOS

title: $:/_video-dropbox macro
tags: $:/tags/Macro

\define videodropbox(dbposter dbname)

<center><video    width="568" height="320"

    poster="$dbposter$"
    controls preload="none">
    <source src="$dbname$.webm" type="video/webm">
    <source src="$dbname$.ogv" type="video/ogg">
    <source src="$dbname$.mp4" type="video/mp4">

    Sorry, your browser does not support the HTML 5 video tag.
</video></center>

\end

dbposter  = complete link, including extension, to poster file on Dropbox
dbname   = link, without the extension, to video file on Dropbox

the macro call format: 

<<videodropbox "dbposter" "dbname">>

example:

<<videodropbox "https://dl.dropboxusercontent.com/sh/h8q01y5kygoyhch/AADmJrhixD4v6D0fGM3F_L57a/video/Introduction-to-TiddlyWiki.png" "https://dl.dropboxusercontent.com/sh/h8q01y5kygoyhch/AABHcrmTqIvL-7o9CbkEEa9oa/video/Introduction-to-TiddlyWiki">>

[Greg Davis]

Hi! Just a little update, continuing on with the idea of collections of audios or videos in TiddlyWiki.

First an example of using TW to access a collection MP3s from an audio bible. Unfortunately this was meant for offline use on a local drive, but you can get the idea.

http://kjv-audio.tiddlyspot.com

Actually have a couple of large examples linking to YouTube and local files (webcasts 5 - 8 videos a month over 5 - 11 years) but they are not quite finished and I would want the OK of the content creator to share the TiddlyWiki.

Anyway, been fooling around with macros and created a TW to keep track of them. Thought it would be helpful to share for the casual users.

Covers local files, YouTube, and Dropbox. (Dropbox examples may be peculiar to a free account.)

http://av-macros.tiddlyspot.com

Greg

[Ed]

Dear Tobias & Greg,

Thank you guys, very very much for this thread about videos in TiddlyWiki.
With these code examples I managed to run my .mp4 movies inside a tiddler.
Awesome stuff!

Sometimes digging through the results of a seach here is futile, 'cause it's
way over my head, but this time I struck gold so to say,

Thanks again guys, you saved my bacon
Salut les gars, Ed
= = = = = = = = =
.
.

Op dinsdag 1 augustus 2017 22:41:45 UTC+2 schreef Greg Davis: