SmearHash

SmearHash is a compact representation of a placeholder for a video.

Why SmearHash?

Why would you want this?

Does your designer cry every time you load their beautifully designed screen, which is full of empty boxes because all the videos have not loaded yet? Does your database engineer cry when you want to solve this by trying to cram little video reels into your data to show as placeholders?

SmearHash to the rescue!

Replace boring grey boxes with beautiful SmearHash states and the designers will be happy. SmearHash strings are short enough to be added as a field in a JSON object and to be stored in a database. The implementations are small and easy to port to new languages, and the end result is a smooth and interesting experience for your users.

How does it work?

In short, SmearHash takes a video, and gives you a short list of strings (only 20-30 characters!) that represents the placeholder for that video. You do this on the backend of your service, and store the strings list along with the video. When you send media to your client, you send both the URL to the video, and the SmearHash strings list. Your client then takes the list, and decodes it into an video that it shows while the real video is loading over the network. The strings are short enough that it comfortably fits into whatever data format you use. For instance, it can easily be added as a field in a JSON object.

Upload your own

Components
x

Feature not available as of now

['UTHy5q%zxtV@|,ofj[bIK,MxRjt7InxFodWB', 'UWHVbtxuo|x][Qs:ban#PWaeM{RjRjRjxakC', 'UHG[i].S%LVs~UMxNGtR14rwR%ob-UtQt7R-', 'USHLucoeOAx][7n%TJxa-nxuVXWABrsTR.Rk', 'UGI4;Y%M=B?b]cITBpM{Po%MM_IoOZ$*+]bI', 'UQJHp|Ris%xu#3WWO?bb-:%2Z#RO7haJohOF', 'UGAmuMt6IUt7~qxsRkogn#oct7flRPj=jZWY', 'UEA,tURiIos:_4oGs.j[ROWAxuoeIVjXs:kB', 'UTJ8FgR*$w%N#3WBKPRipd%2m,RkF2V?xbR+', 'USJHw7s.-4-;#3NGKQM{cZxuVYRkOZrr$kWX', 'UNI#ZBfi,,-:#3RPGGNGt,%MrDVsBWVrxINx', 'UCI;q:57$^PU%q$%OWr;-M%1RpMdGwoz#9Oa', 'UQIX?WRjwGx]+WWBKjV?yD%2rDRjBWRis;Si', 'UYH.c;V@oatR+DWEXSnhtm%1eURjKkV@jJS5', 'UWI#u:tS$xxvz,ROXTjETetRIpM|O@nhwIX9', 'UHIhHYs;;ITK#MM{K*n#cD=|RQMx%iRivzK7', 'UCI#P%H?M^7h]]t8X.#%gd?G+aMcYRRNRqK,', 'UBJ7,ZOZ+q9t=+ivK+%MGt-prER4yEn#vgE4', 'UfI=Mqw]xsxaz,R-SeaxTxoeNHNGS$smw^kC', 'UcI}x1wHxVxaz,NyN^S2cZxZV[RjNxr?w_bI', 'UeJa_:$L$|xavcNeOER+lAxGRjRjSOs9w{Wq', 'UgIh$}bFt2kWz,WCbbjYtmxFV[RjOZWXnjW=', 'UhIYLWWqs+g4z,aebanht,xZV[RjJ:R,n+X9', 'UUH.NTROXOkr+Wbws,r;tm#+RRNHF|S$sDWr', 'UZI5f3V?f#XS+WbckBn~t,$fV[RQFfS5oMX9', 'UaI=GarpxVt7z,OZSgWBt-$zeoRjJBWBsobc', 'UfI5oSV?bYg3+WkDk9axcZxZV[RjJBR*o2bc', 'UVH_PtD%KN%2}6o~Rit7L2w]WYR*I9xaS5Rj', 'UVH_PsD%KN%1}6o~Rht7PVxCWYWBITxaW;Rj', 'UNIEz=Ejs%X.:|#+S}nNt,xunPM|BqV@nlX9', 'UEJQ_[WCWRGb=SVsXlv|t+?Hv}MxPCR4RpOu', 'UJIXv:EMX3TK=T$htPr;%0%1RQIV80R*w|XT', 'ULJHmzrqROKi+pRmo}V?%g-;rXV@BXZ}bdXT', 'UEI}R^D%P9tlwVx^-4jE-.+sIWIVPWTLajN|', 'UBJ@j[0#PoyFxO=_#irW%yv}N2IoL3tmwNE,', 'UFJkAdE1=VXU$YxaKjxC%e-Uv#IAGIV@i~Os', 'UHJtuEwb#5F|#3RQPAsjTc%MnPVs%irWrXJW', 'UJIE-6VswFXn[jR.TJngxs-oVsM{GwV@r[S%', 'UQIX~sJCouoyr9r=obX8-nxZWEVrGcX8aLOZ', 'UDIqr%0eT|xb~J-pvxS}Tb,.iwIAK+K6XVW@', 'ULIOOlOZ#itl+:n3O@V@yD%Mn4RPF}Rir@N{', 'UdIr85xWxUWXvcR,X8jYPBj[Rlo1XAs9r=Wq', 'UhJkirxDxVt7vcR+X8jYTeoeRkR*S$sTwcW=', 'USJkM@vys*S%vvKQXSw]t-$LRPRjJUe:spNe', 'ULI}eSM|bvXmw;oMxYWA=;-UM{ROCTR*s=Sj', 'UNIX~rxt-5tR:|MxOWWApb-;M}M{O]VswIbc', 'UDJ*9ibx$^M_#yVXOqb^Gt-:v~R5%haJerM}', 'UEI;;cM|,+ou+:nOKPOXyC?GrrMxTyM{w1XA', 'UGJ@%hT1]yR%rSivF|kWpc-oa0My%hbFv~Ro', 'UJI=0=XU=Cbv#3Z~KPbEtk%MV@M{pdoIrqWY', 'UQIY2#SiwZXS#3i_XTa_xs%1aKRPPWWBjFSi', 'UdIOwvWYoHS~vcjFkCjXx]xaagRjO[WVjFW?', 'UhIFG9WBbES$z,f6j?axtmxaa$RjK6R*nibc', 'UhI5rZV@bES$z,jbj=axt,xaa$V@J.R*n%bc', 'UfI5oSRjW-S~+Djufhawt,xaWYRjJ:R*n$bc', 'UcI5lIRPX6XS+DoMfgawt,xaWFRjJ:WBs9X9', 'UbI5f2RPW:XS:goMj;aepdxaWERjJ-WAspX9', 'UdH_}aRPSeXS:goMbXaxpdxaWBR*NuWAs;W=', 'UdH.WtM{SKkW:zofX5aelAxaV@WBNaadogW=', 'UbHx+=MxSdo}[7ogW.WBg*xaV@WVNGads;S5', 'UYHoB@IUSztR[7ogSKaectxaV@a#IojEt8R+', 'UVHo2nIAOqtR{togS0jFctxaV@bHMxjEo#R*']

SmearHash string

The SmearHash algorithm encodes your video into the short list of hash strings above, ready to save in a database

Result

The SmearHash list of hash strings are decoded into a small video that is rendered on to a canvas.

Get started

The same exported data can be used on all platforms. Get the SmearHash library for your platform of choice.

More on GitHub