TwTube plugin brings Video.js player to TiddlyWiki 5

[TheDiveO]

This plugin brings the Video.js video player to TiddlyWiki 5, including:

• three skin plugins: YouTube-inspired, Sublime-inspired, iPlayer-inspired.
• two player plugins: persistent volume, hotkeys.
  

Live Demo: https://thediveo.github.io/TwTube/output/twtube.html
Release Files: https://github.com/TheDiveO/TwTube/releases
GitHub Project: https://github.com/TheDiveO/TwTube

NOTE#1: When using a file://-based TiddlyWiki please note that the usual Browser sandbox restrictions for accessing (media) files apply. You cannot access files outside the (download) sandbox.

NOTE#2: As it has been the same-origin policy for ages, you cannot access YouTube videos from a TiddlyWiki -- unless you get it uploaded on Google's servers ;)

NOTE#3: Due to the same-origin restriction of loading (not only media) resources, the plugin has an enhanced TW5 server that needs to be used instead of the stock TW5 server when creating TiddlyWikis via a TW5 server on node.js.

Many thanks to Jeremy for helping me understanding some delicate aspects of Javascript module loading!

Best regards,
TheDiveO

[Mat]

Thank you for sharing!

<:-)

[@TiddlyTweeter]

Looking good.

Small oddity if you check BOTH iPlayer & Sublime you get this on Win 7 64, FF 52.5 ... (the odd white line)

Best wishes
Josiah

[TheDiveO]

:)

Originally, I wanted to use radio button widgets for selecting exactly one skin. However, these act on a single variable/tiddler field; but I need to enable/disable a set of plugin configuration tiddlers. Any ideas on how to achieve this?

Best regards,
TheDiveO

[@TiddlyTweeter]

Unfortunately I have no brain. I'm a button pusher who occasionally notices odd things. :-)

[TonyM]

Use a Tiddly Wiki Button or set of buttons, you can add multiple actions or action widgets to each button including those that unset the values set by the other buttons in the group, effectively creating radio or "OR" selection.

Regards

Tony

[Jon]

Started using this straight away - thanks!

Jon

[TheDiveO]

Because the previous player skin selection mechanism was more a proof-of-nonsense, I reworked the underlying code (which, btw, made it much better) and added an easy-to-use Control Panel tab "Media Player Skins". No more plugin enable/disable dancing. Just a simple config tab with a simple config storage tiddler. Well, see for yourself.

New Release 1.0.6:

[Jon]

Just wondering if it's possible to include something which alters playback speed - to be able to view in slow-motion...?

Jon

On Saturday, 27 January 2018 17:30:28 UTC, TheDiveO wrote:

[Jon]

Hi,

No need for the previous request - just discovered that a Youtube video (including the controls to alter playback speed etc.) will play within a tiddler by copying the embed code (clicking SHARE and then EMBED) and pasting that in the tiddler.

Jon

[TheDiveO]

You should be able to use the pluginsdata attribute to specify a JSON data structure that has a playbackRates property. The value is an array of playback rates, with 1.0 being normal playback.

[Sylvain Naudin]

Hello TheDiveO,

Thanks for sharing and bring us this work.

I started test it with TiddlyDesktop and I can play webm, great ! Test whith your mp4 BB short example (download and put a copy exactly with webm, same path TW file) and it don't work (but ok with Firefox). Guess NW limitation on video codec..
I also notice that fullscreen doesn't work with TiddlyDesktop (it's work if I open the same TW file with Firefox).

Cheers,
Sylvain

[Rahul Kashyap]

Dear TheDiveO,

Thank you for making this available to the community. This is very helpful. However, I had two suggestions/requests if I'm not making a delayed request. 

• The mp4 video is not supported in TW desktop. Support there would be useful. 
• I wish we could also embed an audio file similarly for a local file using the path to the file. 

Resizing of the video must already be there but, I couldn't do that using height and width attribute or, perhaps that also has some incompatibility with TW desktop. 

Thanks,

Rahul