Help needed with a HTML/WebVfx problem please


#1

Hi folks,

Although I do understand quite a bit about HTML, I need a real HTML expert to help me with a problem.
( @elusien, are you there? …:smile::smile: )

So - I designed a short slideshow animation to showcase 5 mp4 videos, in Notepad++, using HTML/CSS/WebVfx.
I like the way it looks when previewed in Chrome, (see below)… but there are 2 problems:

Problem #1: I tried applying this HTML to a clip via the Overlay HTML filter in SC, but all I got was a blue full screen. Is this normal, ie is it not possible to use SC to render a HTML file which contains links (src) to mp4s?
Can I adapt the code to make it work in SC?

Problem #2: Videos 3,4 and 5 appear as stills, not moving. (Videos 1 and 2 work OK). Anyone know why this is so? (I really can’t understand why this would be the case).

I took a screen capture of my slideshow, and I’ve uploaded a folder to DROPBOX which contains all the necessary files, including the HTML file, the WebVfx file, and the 5 source videos, which I compressed in Handbrake.

Zipped HTML file:
Bournville slideshow HTML test with 5 videos ANIMATED Jonray.zip (1.1 KB)

Link to the Dropbox folder:

Screen capture (very stuttery)…

https://streamable.com/ef1q4

Many thanks for any replies!!


#2

I just tried a very simple Overlay HTML filter with the <video><source></video> using one of my MP4 files. Shotcut will not play it. The logfile shows:

DirectShowPlayerService::doRender: Unresolved error code 80040266

This would appear to be a problem with MLT, or more likely QT-Webkit. Unless someone with much more understanding can fix the problem in that code I’m afraid you are stymied. Which is a great shame as the movie you’ve put together is brilliant.


#3

The video element is not supported. You need to use MLT and the WebVfx javascript extension (the proper one, not Elusien’s js file) to integrate video. There are no plans to support video in WebVfx HTML any other way.


#4

Thank you @elusien and @shotcut for prompt replies. Explains why it won’t work then.

I headed over to https://www.mltframework.org/doxygen/webvfx/index.html to see if I could understand a bit more about the Webvfx javascript extension, but I fear I do not have the understanding and capabilities to work out how to get this working in Shotcut.

Never mind, I could use the Size/Position filter in SC but it would take 6 video tracks. I was hoping to be able to do it with one HTML file.

Thanks ! (I’m still perplexed as to why videos #3, 4 and 5 appear as still images, though…)


#5

I just had another thought - does anyone know of a way I could render my HTML file outside of SC, say using another application - rather than making a screen capture, which gives really poor results? Thanks!


#6

All of the HTML filters except Overlay HTML demonstrate using this extension to bring the MLT video into the HTML domain in different ways. The most basic way is to map it to an img element as in this example. The filters like Circular Frame, 3D Text, and Rutt-Etra-Izer demonstrate more advanced techniques respectively: canvas, WebGL texture, and byte-level pixel data in JS. So, while I could spend much time making HTML-based filters, I chose certain ones to demonstrate the techniques and way forward for others. You all are just starting to catch up! :slight_smile: This is the primary use case of the JavaScript extension along with the render callback with time as a parameter to properly support animation and seeking. An extra feature of the extension is to get MLT filter properties that can be set by a UI.


#7

For a 1-off see here:

but you need to have your webpage on the web. If you do want to try this I could put it up on my website (elusien.co.uk) and send you the webpage address.


#8

Thank you @shotcut for this information. I am trying my best to make sense of it all but I am not versed in the javascript language - I’ll have a look at the BANNER html file shortly and see if I can figure out what is going on. I understand the HTML/CSS part of it, so it’s a start … Many thanks …

This looks very promising, thank you, I didn’t know about it. If you do have time to put it on your website that would be most helpful and appreciated. Great stuff!! :grinning::+1::+1:


#9

I tried using the website I mentioned to convert the HTML output to MP4. Basically you put the webpage up on a public website, give the URL to the conversion site and wait for an e-mail to say it is ready.

It’s 3 days since I requested the conversion and still haven’t had the e-mail (nor is it in my spam folder). So I don’t think this is really a viable option.


#10

@elusien - I am so grateful you tried this, thank you. However, as you say it doesn’t look like it would be a workable option.

I’ve been quite busy recently, but I plan to try to figure out how to get embedded videos to work with the Overlay HTML filter soon. Having very little knowledge of javascript will make this quite a challenge for me though!:disappointed_relieved:

Dan mentioned that I should try to “map it to an img element” so I’ll google this and experiment with adapting the banner HTML file here.

If you have any pointers that may help me with this, I’d be most grateful!


#11

Jon, I’m still in the UK and not getting much ‘free time’. It is not trivial to do what you are trying to do. I’m 99% certain you’ll find it impossible to do without a huge amount of effort in which you’d have to re-implement the “Elusien WebVfx” framework.

I suggest you hold off for a while and when I get back to Cyprus next week I’ll have a closer look at how to do it.


#12

Hi Neil, that is a fantastic offer and I appreciate your help. I will hold off this for a while and wait for you to have a look into it when you get a chance. Thank you.
Have a good and safe journey home next week. I apologise on behalf of the cloudy skies of the UK today…:disappointed_relieved::disappointed_relieved: