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? … )
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.
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:
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.
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.
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…)
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!
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! 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.
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.
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!!
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.
@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!
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!
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.
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…
Hi guys
Any solutions found yet?
Been following this thread as I too have found no solution to converting html to mp4.
Often have to “grab” websites to make short clips and I use a hardware solution.
It’s expensive but I need SDI out and synch/ref in as these clips need to be broadcast.
The hardware I use below:
(Hope I’m not breaking any forum rules by posting a link to a product, BTW, I have no affiliation to the product other than using it)
For domestic use, there are simpler and cheaper ways of doing it in hardware if OBS software is not an option.
Get yourself a hdmi recorder and connect it to the computers secondary screen output.
It will record what ever is output to the secondary port as a movie with audio, normally h.264 in a mp4 container.
Won’t provide a link to those as there are hundreds advertised all over the web.
If you do decide to go down this route, make sure that it can record 1080 with a bit rate of at least 20Mb or so.
Got back from UK and caught a stinking cold on the plane - Great!!!
While messing about with my sniper-scope filter I learned quite a bit more of how to manipulate video frames in Shotcut and I kept looking at ways of doing what you want.
I’m afraid I cannot come up with anything viable. If the objects you were manipulating were simple JPEG images it would be simple (your Overlay HTML filter would do it), but as they are videos and since Shotcut or the Webkit-engine it uses cannot process the <video> tag I cannot see any way to do it.
Somehow you would need to be able to get access to the individual frames in the videos and while that can be done by putting them on separate tracks and writing a filter for each one, you’d still need some way to tie all these filters together and synchronise them.
You’d be better off using the SP filter with keyframes as you first thought, but again, it’s a lot of work.
Hi @elusien, no problem, I appreciate your help. I figure if you can’t do it, then no-one can so thanks for trying.
I’ve just noticed your new sniper-scope filter - looks really cool!! I’l look forward to having a play around with it pretty soon. A bit busy now though - trying to find time to make progress with my HTML video titles tutorials (I’ve pretty much completed Parts 1,2 and 3, and I’m working on Part 4). Will upload them all up to Youtube when Part 4 is complete.
Just as a taster, here’s my latest HTML video title applied to footage of Venice. In Part 4 of my Tutorial I’ll explain how to do this exact title, in step-by-step stages. Watch this space…
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.
