How to add video to tiddler

[Man GuyDude]

how can you take a video you imported and use it in the video html

{

 <video width="320" height="240" controls>
  <source src="nameofmyimportedwebmtiddler.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

}

all i have is that and the video doesnt load but if i use a web link it does

[Eric Shulman]

TiddlyWiki actually handles video/webm as a tiddler content type! So, instead of using the <video> HTML tag, try this:

1) Import a webm file into your TW.  This will create a tiddler containing binary data encoded into base-64, with type="video/webm"

2) If you view that tiddler, you will automatically get a <video> element that is sized to fit the tiddler.

3) Use the <video> control to play the video.

4) To embed the video in another tiddler and scale it to fit a specific size, you can use transclusion, like this:

<div style="width:320px;height:240px;">
{{NameOfVideoTiddler.webm}}
</div>

Note: if you omit the height:... attribute, the video will automatically scale in proportion to the width.

enjoy,

-e

[Man GuyDude]

what about things like autoplaying and loopin

[Man GuyDude]

also is there no way to use the video html tag with a internal tiddler?

On Sunday, August 16, 2020 at 2:32:12 PM UTC-3, Eric Shulman wrote:

[Eric Shulman]

On Sunday, August 16, 2020 at 10:36:40 AM UTC-7, Man GuyDude wrote:

what about things like autoplaying and loopin

OK... this works:

<$wikify name=URI text=<<datauri big-buck-bunny_trailer.webm>>>
<video controls autoplay loop style="width:320px; object-fit:contain;" src=<<URI>>>
</video>
</$wikify>

You can omit any of the "controls", "autoplay", or "loop" attributes.

Of course, if you omit *both* "controls" and "autoplay", then there's no way to start the video.

enjoy,

-e

[Man GuyDude]

Ok thanks this seems to work so if im following your getting the URI of the file and then using that in the video html so i needed to find the URI in order to use the video tag as my problem?