Is it possible to insert a looping video in a UI?
-
Hi all,
I'm looking to try some UI stuff and I've got this one idea I'd love to work on - the issue is there's a looping video in the centre of the UI. Is this possible within HISE? I've seen someone asked a few months ago about adding a video background and they were advised to look into webkit, would this be a similar venture or is there functionality in Hise for playing a video?
-
Cheeky bump to see if anyone knows where I should be looking to move forward with this :)
Ideally a looping video in the centre of the UI -
I don't see a way that this could be done, at least not without eating up tons of RAM and CPU.
-
@d-healey by exporting the video into an image and transforming it into a strip film it works. 24 image seconds for fluidity a 20second video gives 480 images. I already tried . but then the file weighs several hundred MB. lol but the daw is suffering terribly ^^
-
@yall said in Is it possible to insert a looping video in a UI?:
it works.
@yall said in Is it possible to insert a looping video in a UI?:
weighs several hundred MB. lol but the daw is suffering terribly
It doesn't work
-
Would it be possible to convert the video to a Lottie animation or GIF and have it loop? I can see from watching your tutorials that Lottie can be used for custom knobs etc but I can't tell if it could just have a looping animation with no user input required?
I can convert the video to a Lottie etc but not sure if it's worth the trouble if it can't be looped and played continuously without user input.
-
@LozPetts Lottie only works with vector graphics, so if that style is suitable for your video then it could work. You can use a timer, no need for the user to provide input.
HISE doesn't support gif so that's not an option.
You might also be able to do something with the shader API or the WebView, I'm not familiar with their capabilities.
My advice is focus on the audio, most people don't want to see a video in a plugin and once your plugin is in their template they'll rarely look at the UI.
-
@LozPetts id shrink down your video in size, both length and size, convert it to a filmstrip and loop the value and see if it works.
If you show me what you want to display i can let you know the best approach, we do thinks like that quite often but we mostly use textures or gradients so no" filmed content" if that makes sense.
-
@Straticah I'm playing around with this (it's a shutter stock demo at the mo because I don't want to buy the asset if it won't work!), the 'real' version will have no background (or watermark, obviously).
It's 10 seconds and about 240 frames I believe. Hopefully this helps, thanks for your help!
-
@LozPetts said in Is it possible to insert a looping video in a UI?:
240 frames
What size, widthxheight?
-
@d-healey960 × 540 - though when I remove the background I'll be able to crop a lot of empty space
-
@LozPetts Ok so when you multiply the height by the frames you get 960px x 129600px
Which will use about 500mb of RAM
-
@d-healey I'm not new to computers at all but I'm pretty new to this - is that a lot for a HISE plugin? In a world where most machines have a minimum of 8GB and those running DAWs likely a minimum of 16GB, is 500mb really a deal breaker? Kontakt libraries can be 10x that, or is it different in terms of performance impact?
-
@LozPetts I think 500mb for an image is a lot - unless that is the primary purpose of your plugin. And once the UI is closed, which it will be 99% of the time if it's like most audio plugins, then you're using RAM for no purpose.
Usually plugins aren't used in isolation, so the less RAM each plugin requires the more plugins a user can make use of.
-
So I'm sort of getting there ('sort of' doing a lot of heavy lifting there).
I've got my film strip imported into a panel and linked to a knob, panel timer at 24ms for 24FPS. But I can't work out how to get it to 'play' without intervention (me turning the knob).
The other issue with this approach seems to be that obviously the knob has a certain range, is it possible to 'loop' the knob from 1.0 back to 0 automatically so that my filmstrip appears to loop forever? Then I guess I'd need to link the value of the knob to a timer to get it to move without input?
Here's a snippet, sorry the project is messy, I've been trying/struggling with a few things at once!
HiseSnippet 5308.3oc67jzaiikdT1ldQ10ROoBljCy.NBMvXmTkZRIYKotPGKunpJk1KJRtb00jYfaJwmjXLEoFRJaqtQAzYP.RNlq8s.LGSPPtlaFH4RP9AL2BxbbNk9Xtk788db4QJIa4kxU0Ikazk8a8ae4swp1VMINNV1BIV3fA8HBIVRr9.S2Na0QU2Tnx1BIlSbCmNDSgMGzS0wgnIjHwzOGaLwByHP+46VeSUCUyljvpDDNzRuIYG8t5tg0VszmqaX7LUMxA5c45ctRUZZYtkkgUe.QlVTVnmZyiUaS1SE61ThBIlsrltqkccWUWhiPhY1zRaP8NVmZx5+g5N5MLHXAEg5vDwp9YVFZHFi0JrUGcCsp9Dri.LoUCI+oYj+iD2UWSOn9P1vCoMHENBd9QhohhdSGA8T3QOYNzaDnTBNTZFFJ8Qh0aZq2yMrEDeVTrhoKwtkJv14QEVeEl5eXdwsrfdX5ltq5wjmYCEBFwx4jkerzZxxq7zj.m2wU5DUaotpMssPVtizmI8mmptpaeaUWcKyTOVJEnDj5W7zjkMaqaRR6PboyHwTaWbTNKGN3Ud5SSl7S9jC5PjLItmZYerD.CWfQpa1VxEptsspYeCUfgA8KD9OmUsMUADPA5uS2l3tQeMcq5pc6YPBXBKmJR2SsBEnOm3RgPKcaXRoiC9aChjigkqTKaqtzl8vq.nSa8yhh.A.9Yv3WVNb9G.ZoRNTrQxP2wMBMvpuqZOjGxPYablX+4tp81AFwxgSlpolTOqdH2fPQslVcaX0v5rHy5VXkaZclBLo9RUXRgp6YYBEVNUPOPFwm7IAEQI0xozcIcc.oXH1k9uvR2b4T+byTqvPlcrT0nHPPefJ0MM.osTq9lMQ8.IzH0ahQzv1xX4l93viAL0nOYEXXeM7+Kf7zzFvrR4eo95u30+rO8SCXCuIkzerDRhdiFImJ.Vd.4Lf8Pog2PwqKkbQJzCY1R0vnA34X4gwSjHC4mUUMIFimYxZNUzwb39U1dri.azSETptmNXWKMPjZAh3ARp1MzcsUsGvXRX2dE4mZXH0fH02AsKf46Pro8rr6pZn+UDskWQ5zN5M6HoYQbL+otRMUsIRpMr5ipbTPn1zsupgDn11ljDwAl3FgLZytMoodChgOhcPGcGITh3PGrdWvCKUADcP3HoCZiMQiKzUkjpiTJvxoqiK3OIURFKgJOqfiCDnUqs+eZ4sN3nms+NaWt1anfumYaDvgCzmm.9Bo.UizRsuAXwgdJ8mU.o8lzvA9XIvCkbLVZGUiVRmpqAtGrZwQDf.Wxl3papJoo6zyPc.kbNEh1.rWlgUq9PAahikQeTWdENfubJ5bBvLG0kHeKcH5s63FzDhMuf.xgSIro2A7hAbKXlaAUCAAQQNBuiMsZ3OSZptpowJtLEH..ARJ5z644jNiFpfpnG8Qz7zj3g.1ApRD.F4zxvjERIXDW6.CDeK5kWI4WmTB9A.ZMB3u2zI.4A+RN5TydpeS4zoSqP6KZMXRN0GRt.xFRgoGkh7SoiyGPa0gz7XIcl.jREff0QpYGTMVK4B5sVNX5+I7ye.8sBcpXXt2j1T0nYnWzAOwpUKGO+qNdZOTckfwPm1wp40S01g.wKCwj+HIEPC.90pxE7Hn.hxCGX5BgTUKKauvMmgVuLdeTDXH4lO7XP3MIeiuIfqpsKS33hhRP8.rBxJ20QZ4OC98K9JPLAgegH1jPcabPTI+xYytxS47iumkKYel3egjuIoT7lZ0Zjs44MEBpMxlYf5BF3xl861fXGDqvqiPtNQSfRb7IPwmeWSlsDWGsLqXp6teOh43x5Svy.DR1ZAOrB5pKMUqG5kpkezCAcHmpGHVEbaPbaXacpCwVfh5gIuNeIg3Sy88ll5F5Zv.vI4dhGBNd5Rj9bvFI9T3gTWxTjTb6J0N3y2a+MiM9uY+IBElSDGal3.uyUXvYiL3R+1u5ec8Iev4hB4eyu97IZvKJBokoaVG7jb83aKHtMwD7jM35M7YEQeywG6qOW3kU1FLdwb18zn.srdDaWcTANw1jSfE.wxfGw.mics5AJSA97A1BCl2yClTGQTPNi3lOW3LdDc.eAZvpvJFThEiJnly+UkvbdYKd5GKFOPMc4ba9bELXMxABvmEhhO6nB4NPwmORbuxGVt1t6WqrzFub6J6eCPNghkZArKFxcOwMUcNlXeBDpiHf0W2cfAkiUizFSEmUIJ64Vs3EfzgLwEE26vcqIsy9OmGcOuQoA73RLz80CwK+4b7xGODurl5IDSHmp1VR6nZCYhb.jKlCkydB+Z9Hlpveq4uruPze9wg9yJdP45GLVF8pktLF8+8eIGl+mLDlqjSdshYWqP1mzxnut1SLz+k3uZXX03IcItpMfvUOoqkc5t8xI3.Au7k.+ce629usNOIrjq2JmYjvyfbDgLwZe..bO+Ved4Wu49aTa6wQMm8MWJ0TpVIOqLlIELojAMrTs0DZz1emCVRLWlB4xCzUAYAbMO9MrnXtUyTrPtBYU3pOCaDEyUbs7YJtpfKDlleSHnl2S8KRHhIZjBf2qnYI9oRJ4RK+XrtsYIiseSWPOXOZnMn4VpFNDZ66XcJLLnphzhuPmURISdZ4s5CYLzEbu0Cxy2IxH2lkm7F85QTsw8VAZ00tOqwMMf7HfopFt5bnA4zqUj9SgBx4KJmWg1qCrZ2FVqEtV.9YF2FisfTsfDDPTgV2KcHGRZBwe4vk.nAM9LHwJpkYzYpZYegP75oYqDBkL90W1TiC1qk7MixAzDEE9LdiVNCi0iqJoOjGnOqTWUX3hIlEaFWZrPhsD2zV2cKChpY8cSh+8151tCf+9401XuiPawjPBx1VP1qV51IeYc+99x5d8THzu1888qwbrwSiezDlh.G88Pd56iiQeei5Pz2OqjCjPDtRZj4QUkcZhYs8pNDhg2Fr4mQTEMJxnS2NCbe8TDfbeApvkPaaVQ5l80keC+d84TFXnoriKoGmSZvEw+75c00zLHU8VCAm66yCR0l4sKwOYHmSzke3zCjBDpuTHqw53.bBmlmVh5T5YpnZKuqILbb.2dwwERymYaPqgmXJcAgy9l+rQnLArK.Vb.MpfbbQ6PuMf+eu9xG7adwJtvJmZJPfbhUChgbU749.wcqrcEcSM8l31rMVsoshasjaHBLWoPGrHZv6WEcelufRQY4HNbyv5Yb+oQbfeOwMf0FbBjV1NPbQpq1DZLOsX57nWJpzh2SDekoPBLkuCJ5l1pRcNG5GB31j0xw0TpTwb3buIIY6wDz57ytzjGJ8kCaIR2mzfzNWPjt8oRJwMgnaqNuU14GUJtcyOdz1MKmckwYz7kk705Ju6lkqUWXxLVtuW2k1YiMKuyXyI40WJCArZGxZgiSekRLLFkLbdhoKMYhZ+0EMlHJSlb91P1DU0.R51RZW9ptTUjSKEws9CDirg1Q8qyurpHZAIGuKyMp+hxucTB7kALg5bLHcw5CWfrN4ktL1y3yO3cgrdxETgKeMhXZgwartc48pW4fW+1SNk0SNsfOnFqjRXX2KWv9CvoJa+tWprnX8parU481e6xQkHywZPHz1CR732s9jZEQG7aQqnbWI6FeKNFIMYVQ79NFCET5WFmB93gnfO9Z5tJxhoirL6IC8CsnFCx+P6aWjmaGnlnMEX1nJOzMykh4yKx1X2IX+Wl8uMg2964i3A0DQQ8gW1FeMNPUINO5KhyifrkGgU1qGch6+t0MrZdr+g0Ojpc.kimsEiiROaqqwBSb52pkNt9OQIsMEF2xTxbtvvGE+CEgkSyN4Z9aF.tBIuFv4f+33wib2y6cXP63WWfYlrqKvEeaFlTz8iDqp61rynw2oFA9BJLusw2o8WSP4VsHMcCQ1YDe1W7V5lVLMG7miAeviO6NO3cGKVJrrRzKYQvUiviM8e92+u+er9qHtaz0puoKurtpMI5skAHbKGW959q+W9QmmX5IltTtx2fjQpG7CECoBoah160VDHTypOtp0cUAWDnA4df2BX0hMId6QDdPPIlBWlJqrLVFQh5DSMZg+G3GuFUvxI7ZTwuwQXUjzeQyeg2EoILL+HtHMI9aDCOGqd1DzyzAVUMTGrL6lRTC3BOVpA58B8zL7ge4EmXSrGK2zixtNmQ1r2RpH2I78fSYSXO1ksgpa582fEGi0SOKhCI1MDf+wgZOMmnbZ3+D1vvv5TLBftmhIHSn0U0xXPuNVl5MwpX8vGy8s+Xn+KTcNPU2.8qUuuSO.+1GxfvfPupZfujD6QClLKKVz.bWBP+idm4NwNcy.qEdTMTKgpgCRfp9Q6cXbebd824CFmCPytz.Y3kYaZrcF+fg.HDRJpYO3nSItJBiEeb5Yn6doPjtM3ExjK6p4yECYGMZLECMDCQidHnuD1RzYdRIYdX8.eR9nt5mAYcDAfOjBPvdH8YsTwbRFO7hPvQAK2YxA03UBbmMEC9flOGm7P1Y7MsXFZzI9tNK5Bk32i4E2AXDp1fR+oXvzCvy9wkBB9J7NaPSB0B2IZQOVQEMeddajoVcD68pv0aNQ953mSNxFiY3WB7RtqtoGYJhlhB6pdVPYEnL6RgxpZi9tVcA2Q9Q4GRelh.QjqKBxUaR51WrJTDQJehDQDuSEgJlliJlMjJlW7IJxwIDrb8fjCeDTF5C8GkbEkUTVCbgdL4T+rT+8DWMctLYxjWNe9bExojUtn.SsfxM4XCfimQiFwYlyKhP7pgFXGxJqHmE5PwhExULurhePrtVVtc.u595nyJlAmcg6dlxRh0vSpgMsQlbAdywHpfQZglCCu02RhUbNDaEV4f+LBL5HtsP082dtsldTdpybq3oNegUkyVL6U1S8hAdpUdq5pdV1hbh3pV4l4q1mjGqg82O7auXfKNkaOG2KF33V4cjmadx55559Rkvev08Gbc66Gy208UxOlxU02sHa2OZQHZ38v7HMBrHtXf7GxAxV5mkMyQzE1cMcfNCGfWRzkzsm0QNCLaFElOJv4IWOtZ.Lb46gdzFs2k4DojcTOKKJtMVI8Q4D08xLbpfhi2fXVQkBQT.482b.RUgJS4hoYGYZUhOsqMlocIwc6a3pCQYg4HxvElLTl04QM0KHV1aiYuNy6j5a.gz8EeoIJsIZTVu2LLGX8OrEGmpz7hsZbDrD93VK1rk0m1lzjneB4poCM0MKrRRwm4YW4SFHUWPNel7qlsn7ZYVEI9wSS95kCkVADuALDYFq2DJZp2It1CsqhGucx0lxjaLJp.O2+ozEn5rpRlKR0YNT0I9JxtefliCwT6pxjuXm+bNgBHIOs2XAQtEinLunV+tci6aOoHv+6jtaeiPR3iE2Pi8rmfXPRaWup+t0gOImNDP4Kc5gRtI3BCFkScSMg7yLKlWmgkjyFF07CIo8gjzd6kj1MSeddwssG7JXgObADfn.J.0TnfbgUKlM+pS3ZhFZ0mUidd7LHLVud2Cyv5DuG9UTqkeewV5FHElluKWsruvsf1fbl+qAH3Qi5DoDv0pXpQNCOTqmnHTtaChFX0wt4aCeYEpzsWeCGhR5SUOQHjci3CuNdtBn5Srr1Duoo.glctjaq7e3iXU0lvBkGSu8N2HZAwsU61iyd9QhOIa1zYn2iZY40jKlY0UGGh4Y6GhVKf4rMRxNt6kL.Djys5ZYxjMG5.1y0+Kz2pu6E3Z4ZIFuGKIY2N1DUsKOtB2FocqrsseHTxGBk71KTRNfopjaMEkBJqkCVfQ7PIim.hBel8G65OcY3RjBSVnq3mw0kG4ZRYoWm2eF+wgOevG7C5k++49G0YrWCv3+teHHPWdCeEuh6JAc929G95Ri3KCREyS.rrpkgpc76Yxs1kfXlI9xvfjz6nq+vDhi+.1pHeeGIoh92uQxGhWhr++wcc4GwXC+.w5tPv+t.j89Xj3k7ieoagupO8l3upOPxe3GPhnWA0yKsY+VsH1Qq8epDETwuOU8J4g30H8Hpt6xtLfAuD6Z0dtsU+di3VXQOGFa0lGigc4ZXeSBHNc4owsrsbbviwhNWNQt4V8sai7pvZpQ.mYNQqCDs7BUTN8RGBpBo2zW9G1aJTjOf8NefLknkUhUNSrxYiUNWrxqFq7ZwJmOrbvmjElhwg5VF5lNC8h7mcx7ECyC8hZx0yM0aG.CVMe+9yxzz9WVPDx612k3eYACJGMn4sVTMtubASMtGt9l8ccAGarGBfdaSHmcuph8.1+tw+364liG.KO9r5t8adL9UgvYDuf96rKI6sivaAebjkiSYHWDCHqof.szWcqesYhfk6ZYZ4euy3c..FzsaSr4w8QRPa35haOdPMOpTMhAQ0Ije9k+pRrymNpesqDu3V51g9GHxPWIzm962Q0uvKz7zSzEZ9VAGeGbIlmTVz88h2y9Jx7dnLbIQZXIILKh+uVVY9W4Wz5y6uYa52zAO.jDSY.4QXD4kK38JEfHzidQaQ+JMlTDem5ubmMpc2lRW7fa2NeXFm48tL.9dPbt6vG.x2W8WNpvewdN.weHWe3IAbm9j.lm8N+bde+8.Dfm25OF.u6DUWvoFCbwNupPrIrKWuqmThHGQV3Gk0QbMrvc9On869iGSRL9mOzWAoKztiqD1OfQOtCHipsGYuem8peyVBdbfS9c3X0HSUlQbNPqkUtXlh4WCOIzb4Kl26bfntl42l6hEKjMWwBExup7pqUnXTnNyEbjTyIVfdpAL0ovWO6EPDSD+H7wrdSmo4Eq2aTmL0U+vAHt8MuCO+hoie9Ag7jI7DDd.dRffTOqbt0JLwGCdTizpi9IFKDG43TfmPrid1UYxJuV17YjyKmUIypJ2bTjCOFBG4UPm.c5nseiwLdne2cTL2EgbuKfA8yVxQd2gUjoMOsFvLwj9MHXItGZ5ve4JwfXG0ro+rkXpl9ehQ0NpWnVxh3tQE483x0HCkCp3nQ.2tQO3pHOS7uacHKB9V6n2ldHVI+M+5deVx+q0c.e27cGeU4X4u9Q+iO+29U+UqqSOQKVNhnCMKSiAT8hqEsL8HnkEQaGWog+TbUH9KdOBoj9beRIXYkSNoLUDRIpLUDeNjwElUhKLiMHHafg1+vOLB+Qfqh0KhJ0EovtUKyx9IQ4f8IXZg+WKC283B
-
@LozPetts said in Is it possible to insert a looping video in a UI?:
The other issue with this approach seems to be that obviously the knob has a certain range, is it possible to 'loop' the knob from 1.0 back to 0 automatically so that my filmstrip appears to loop forever?
https://docs.hise.dev/scripting/scripting-in-hise/scriptpanel.html#a-infinitely-rotatable-head
-
@d-healey I've found that but it doesn't seem to work, pasting it into hise in a blank project and filling in the filmstrip name etc throws an error
HiseSnippet 1366.3oc6W8taaaCDWJIpaw6OXEXO.D9CCxotJxaC6C0nXsw1YwsMIF0oYcXXHfQhRhnxjBjzNwqHOk6EYuAaGojrjbbBxFv91DRLDui2we2u6H4oIBd.QJ4BK6cOaYFwx9ycltjoRFjfoLqwCsr+RmiwREQfxEcvxLrTRBsrs29mzBr2cGKyye9iGfSwr.RkHKqy4z.xanynpJoSdwqoooGhCImQmUa1e+KFGvYC3o74.d11w2JCG7AbL4DrdZa4XY+nQgTEWLUgUDok8NGvCWNMgeEKe9mSkzKSI5A8rlBNJW7g7zPMh0RsFjPSCmTF2RKvKSpXgsyYgu14XZHck7J13qLJPUVTmOr2pI71tA75cWvaCPxtFj1IGRO1YZfflopznwym4LlAImHLP60gR9bs15O9DmAbXFLk2L7GHGJfAqrv8G786hfe5zueq9s1eu8PCDDM1QXDkQif+UjzkHAGhHL.cTBAG5g1a+VTVJkQPQyYAJJmgBLFdDndZl.rxkAIstnq6hV1o0GagfmTd.NEcEMLlnPOGUhKbX3DLijV2h9FCL+TNMIQG5YDghRjPbL6USO8jBax8OB0FbtJo8yPeKDXkxRHz3D0ZBk3EjwrIBB3VPkRLmrRGNMke0.32KgxOIns8fTJ7VWzQ7EvFguAMTfiior31FStoNb2eezqorPfzxD7ETntCc4RzHXiA5HvIof8OqiYl4DgWJGGNdFTk619iSd6ouZzfyt3vSeyvQu8lyOc7PuLXY5hZGQSmIUPRsc8UqvGZtApPUukOWAYE2xrhab9RUxOF3AQVv7THYgTIDHMGRtF4pec0RfRvRTOeejDhaBD2DbPhl9xtFk.j4Jus.KJbvyQYXgDnTE3JpzCP043z4D2N6ANxyu.zq.t9I1KTfupH1qhutneEpJg+JczOqSptcpDbjIi5142LSKG.6owWwprdB4LvND7mNHkDljpnKnpkHdjQjo5FXq5LZHTu6UetOG8c99Mc6TnFx3fPXGNvEP3h.hSPhHBBbNHJhKPPYDBByXTHIUgk2ZMz1ZXJXE.dZi41i4ykjxBxpjKYAruX8DLMJWtWftlkD1Yklp4The3np7.HXt.PrpHFzvtJHtJgvLQftfugKtqvXsBfpL+M2tFXEb0qv8f02IInK4pDD9ZchjiLaRQgTbLmgKn3KII3ET31iFVqKRMjO.sp058nmfdZOOenvoR3uzugkqCBFWLCmR+8hrtwmyk.sXFGSA+Tu9Zyn3jRmDB3I2G6mSYqWyc+fo41XF4pxJPVn93LVfVEUo4JeOOud2BMfIMxXqkGex5vsIbpY8pWeJ5XrJwKJkyEtkR6b+gw6xBKigL8s.MzavkrrR5N7nYRAIXVLIzcS5DjL8gi2tRrw4DBhZtfUTT2u0M8Wc0FmcBWQNk4puHa2VfsqqJJZi5zWcI3ovY9aTst6Gw8YnKa9rKIht4Y1USDZInYeFO5g0mQP9Mo0lHmMFtg+zLRw36uQIqhqhg2d23gP0htQkBYUWMCxFRV.2aj21xtNCIxOn3YPee2pmFnaJdntHtYKV59JKT.7Qi9Zz8tn2frrdemq220N2Me3+faK7gB2G6LgpBR1Ld2ZC3EXs+qwaQWregynnHRfpBr63b36+21xp+81xpUduGwvI.B50V1NmLe1T3n3.Br5LXiM3bG6szUQ4i80i0rwTBKzL3ufmBk8zisKT1qTo0LbffeQP9tCcexepQBfIl4SDfOdAC6hySClMM0o8YPm6WDDzzaqr0w4kxj+oFAeSx+awcZg9Skd4bEeVdBwx53IiLmaXaOho+bBSIn0eCxDkER.
-
@LozPetts It was made in a really old version of HISE so probably requires some clean-up to run in a recent version
-
@LozPetts I looked at the code and here's the error code
if(event.clicked) { // Store the current value for reference when dragging widget.data.downValue = this.getValue(); }
replacing "widget" with "this" solves it
-