? Editing: Post:21.body Save Delete Cancel
Content changed Sign & Publish new content

klu9's ZeroBlog sandbox

A place to experiment technically with what I can do on a ZeroBlog, before I try it on my real blog.

Follow in NewsfeedFollowing

Latest comments:

Add new post

Title

21 hours ago · 2 min read ·
3 comments
Body
Read more

Not found

Inserting an MP4 into a ZeroBlog post

on Mar 20, 2019 · 3 min read

I'm looking for an alternative to animated GIFs, so I need the MP4 to behave like an animated GIF does:

  • display automatically (the image is visible to the blog visitor without them having to do anything)
  • play automatically (the blog visitor doesn't have to click on the video or press "Play", etc.)
  • loop automatically (the blog visitor doesn't have to right-click and select "Loop", etc.)
  • the whole image/animation is visible without any controls overlaid on it (e.g. no control bar obscuring the bottom part of the image)

The WYSIWYG editor does not have an "Insert video" button, so this will have to be 100% manual.

And Markdown code does not have an "Insert video" tag (the way it has ![img name](img URL) for images), so I will have to find and use appropriate HTML code.

I've inserted a (long-form) video on my blog cloned from My ZeroBlog (see this post here​​​​​​​). Let's see if I can get the video working and displaying with all the other requirements (auto play, auto loop, no control bar) here on a regular ZeroBlog.


Step 1

I copy the MP4 into the same \data\img folder as the images.

C:\Users\Klu9\Downloads\ZeroNet-win-dist\data\15mQd6kBRzriaVEjdELujex2YKFfWaA8JQ\data\img

Step2

Now to find the right HTML code. From previous experiments, I already know how to do the following with HTML5 code on a MyZeroBlog:

  • insert a video (hosted elsewhere on ZeroNet, e.g. KopyKate)
  • make it auto-play

The question is, can I do the same here on a regular ZeroBlog? And can I do the following extras?

  • make it auto-loop
  • display without a control bar

So I do a search for html code for video to auto play and loop. Then I search for html code for video hide controls.

I take a look at the following results

So I will try to adjust the following code:

<video width="320" height="240" autoplay loop>
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>

I'm using an MP4 (I'd forgotten about OGG, so I don't have a version in that format) and so I'll delete the line about OGG. I'll adjust the width and height attributes, as well as the URL obviously, to <source src="data/img/FILE.NAME-mp4"

<video width="500" height="286" autoplay loop>     <source src="data/img/Monty.Python.Every.Sperm.Is.Sacred--MP4.mp4" type="video/mp4" />    Your browser does not support the video tag.</video>

(For some reason the WYSIWYG code tool displays the original block of code on multiple lines of text, easier to view, but puts the second block of code all on one line, even when I try adjusting it back to multiple lines.)

Now I'll try switching into Markdown edit mode and pasting that.

Success!!! The MP4 video automatically displays, plays and loops, with no control bar visible.

Correction: Failure!!! After reloading the page, the video does not play automatically, just a still image. In order to play, the user has to right-click on the still image, select "Show controls" and then press play.

Notes

  • One small point: in the WYSIWYG editor, I wasn't able to write anything below the video; I had to go back into the Markdown edit mode to write text below the video. Once I'd put some text down here in Markdown mode ("Success!!!"), then I could continue writing in WYSIWYG mode.
  • For some reason, when I originally tried inserting a video with HTML code on a ZeroBlog (going back and forth between WYSIWYG and Markdown modes), it kept screwing up, in different ways. But here it went just fine. CORRECTION: After publishing and reloading the page, the video does not play, just a still image.

  • Autoplaying video tends to be a curse on the modern web. So I, like many people, have found a way to block that, in my case, using a browser extension. The video autoplays for me because I've specifically allowed / whitelisted http://127.0.0.1:43110 in my browser extension. But other people may not have done that.

2 Comments:

user_name1 day ago
Reply
Body
klu9on Apr 11, 2019
Reply

ssdifnskdjfnsdjk:

I tried your code in this post and viewing in both Vivaldi and Firefox. Still no autoplay. I even tried changing things in Firefox's about:config but still no autoplay.

re optional: I did it on my sandbox and I think it had an effect. I think I remember that the zite was using up 55% of its 10MB space before making data/img/ (where I've also got my videos) optional. Now it's only using 12%.

ssdifnskdjfnsdjkon Apr 10, 2019
Reply

i tried to use this tutorial to embed .mp4 constant looping, autoplaying video and it somehow works in Firefox 66 (beta). even on page reload.

working code was:

<video autoplay="" loop="" muted="" src="video/file-name1.mp4" type="video/mp4">This browser does not stream this video</video>

do not forget to mark your videos folder (in my case video/) files optional (not force every site visitor to download all your site videos)! - read this tutorial

To add video controls, just add into video tag this: controls=""
muted="" - mute sound (may not be handy to listen sound of a video that is autoplaying somewhere on the page)

This page is a snapshot of ZeroNet. Start your own ZeroNet for complete experience. Learn More