By the way, the code in the new tiddler I created comes from this page at w3schools.
I removed stuff related to footer text and a button, but may have forgotten to take out some stuff that is related. Doesn’t hurt any, but if you want to keep it to a bare minimum …
GIF has indeed less restrictions for autoplay purpose because they do not have audio capabilities, however this format is less performant than video.
See https://web.dev/efficient-animated-content/
Since you’re okay with converting your video, the current best choice seems to be mp4 (best support) + the solution provided by @Charlie_Veniot
There is no longer a need to convert the video.
Oups, I meant to write mp4 + WebM (for browsers that support it), thanks for pointing this out
That’s fantastic, it works perfectly! America’s Great Loop! (lifelivedsideways.net)
The irony is that when I originally posted in Groups, I used that very same w3schools link as an example of what I was trying to do … I probably should’ve made more of an effort! Thanks again Charlie, you’re a lifesaver.
Scott
Man, I don’t know what kind of effort that would have involved.
Getting javascript in there via iframe is a pretty sneaky trick I come up with not too long ago.
Because I loathe javascript. Javascript is to me like the kiss of death.
But some things are just wickedly easier with javascript.
But getting javascript into TiddlyWiki is, iframe trick aside, about as much fun as getting a tooth pulled and a colonoscopy simultaneously, but having both done from the wrong ends.
There’s a picture …
BTW: I’m really glad we’ve got that working for you ! Your video not working was bothering me.
Yeah, that’s a picture all right! I’m with you on Javascript, I loathe it completely. It just feels hacked together. If I’m going to write code, I prefer C or Python (I know, can they BE any more different) and only use JS when absolutely necessary (just like a colonoscopy or pulling a tooth). I really appreciate the help - I’m building a boat and will be doing the Great Loop trip next spring, so my time is incredibly limited and getting the video background to play, while important, wasn’t something I could prioritize over, say, working to pay for the boat and the trip! Now, if I could only find someone to teach me to weld aluminum, I’d be all set. Thanks again!
That is quite awesome.
BTW: normally, anything moving on a web page drives me bonkers. But that video on your page is doing the exact opposite for me. Really soothing and quite beautiful. Congrats !
Me too! I went to Virginia Tech back in 2000 and got a MS in Computer Science and Usability Engineering, so webpage movement (or anything that distracts from the content) is usually a no-no for me. But with this website, I wanted to convey a sense of motion on the water to go along with the information about my trip, so an understated video background made some sense. I’m not much for style for style’s sake, but I thought I should get with the times a bit.
@Charlie_Veniot & @MrBatman777. Just a general comment on this thread.
I found it interesting and useful as it’s essentially exploring quite difficult technical issues …
I myself work with (make) videos quite often. The general approach at the moment is to let the “hosting service” handle the complexity of appropriate delivery loading (e.g. I tend to use Vimeo as it a bit more “creator orientated” than the Tubes: example Weyersberg-Annunciation.)
This is maybe something that could be probed into more? I think it is becoming more important to understand how to use TW for various kinds of “moving image” scenarios.
Side comment
TT
Sometimes it just makes sense to involve yet another hosting component to a solution. But the more external components you depend on, the more brittle the solution.
As per the referenced code at w3schools, it is ridiculously easy to do the looping video thing for a video hosted by the same host as the TiddlyWiki. The only challenge there is getting the javascript working.
My approach to javascript is a little out there. (Well, I rather like it.)
Right. Though in practice it has also a lot to do with “is the video still existing”? The scale of “take-down” on services like YouTube is phenomenal! That is as much to do with an on-going huge copyright war as it is about performative delivery.
In that sense alone a more permanent way to store/host actual content could be good.
In practice I use video a lot to teach Italians Advanced English … but because of the “disappeared” issue I am forever having to re-do links …
Laters
TT
@MrBatman777 & @Charlie_Veniot the idea of “Full Page Video Background” is actually a good one. In my mind is the vague idea that one could use a TW as a very clever interface to show one video. Additional Tiddlers merely commentary/notes on that video.
Side thoughts
TT
Using the srcdoc attribute is a really neat trick !
I was a bit curious and after reviewing your code it seems like the javascript is not needed :
<script>
var video = document.getElementById("myVideo");
var btn = document.getElementById("myBtn");
function myFunction() {
if (video.paused) {
video.play();
btn.innerHTML = "Pause";
} else {
video.pause();
btn.innerHTML = "Play";
}
}
</script>
myFunction is supposed to be used by a button with the id myBtn. A click on the button toggle the video state (.play() or .pause()), and change the text of the button accordingly to play or pause. What’s interesting is that there is no button in the iframe you provided.
It seems like the autoplay is working only because the video is inside an iframe - I dont know why, it probably has something to do with the way the browser load the iframe…
I also found that the only tag needed is the tag $:/tags/PageTemplate.
With that in mind, it’s possible to get the autoplay working with the following code :
<style>
/*optional, prevent the iframe from hiding the background of the tiddler*/
[data-tiddler-title="{{!!title}}"]{
z-index:unset!important;
}
.tw-background{
border:0;
z-index:-1;
position:fixed;
top:0;
left:0;
width: 100%;
height: 100%;
}
</style>
<iframe class=tw-background srcdoc="""
<style>
body{margin:0;}
video {
width: 100%;
height: 100%;
object-fit: cover;
position:fixed;
}
</style>
<video autoplay muted loop playsinline preload=Metadata poster="http://placekitten.com/1920/1080">
<source src="https://i.imgur.com/8EjcHkv.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
"""/>
Interesting stuff !
PS: Note that we can use a low-res gif for the poster image. We could also use a data-URI to display a static image embedded in the wiki.
EDIT: forgot playsinline, it is necessary on IOS
That isn’t my code. Copied from w3schools, and I removed the button and the footer from the original, just forget to cleanup reference to the button in the javascript.
I can’t stand javascript, so I didn’t even look at it. I left cleanup to @MrBatman777 and whoever else likes to fiddle with javascript (bleurk.)
Revised my post accordingly. TT
Currently 404, Not Found … 
Original link no longer valid. Use the link further down in the thread.
Sorry about that … I had created video.html just for you folks on Talk Tiddlywiki. After Charlie got it working I updated my default.html file accordingly and deleted video.html, so it’s here now: https://lifelivedsideways.net/gl