Smaller dummy assets

[caiogondim]

I used a big video asset just as a PoC. For production use, we should generate an optimized video with audio asset.

Same for audio.

[gkatsev]

Can we use the files from https://github.com/mathiasbynens/small? Perhaps even depend on it and build out the base64 files at publish time?

[NicolasSiver]

@gkatsev will it be smaller than a current base64 string?

One more thing to consider, it's one more dependency to track.

[gkatsev]

Yeah, we can always just download the file and do it the one time.

The mp4 with audio in small, comes out to ~2K compared to the current h264 mp4 which is ~30K.

[mangui]

// 16x16 black square
convert -size 16x16 xc:black black1616.png
ffmpeg -i black1616.png -an -vcodec h264 output1616.mp4
ls -l output1616.mp4
-rw-r--r--  1 gpontavice  staff  1505 Nov 17 09:33 output1616.mp4

[mangui]

$ cat output1616.mp4 | base64
AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDEAAAAIZnJlZQAAAsxtZGF0AAACrQYF//+p3EXpvebZSLeWLNgg2SPu73gyNjQgLSBjb3JlIDE0OCByMjc0OCA5N2VhZWYyIC0gSC4yNjQvTVBFRy00IEFWQyBjb2RlYyAtIENvcHlsZWZ0IDIwMDMtMjAxNiAtIGh0dHA6Ly93d3cudmlkZW9sYW4ub3JnL3gyNjQuaHRtbCAtIG9wdGlvbnM6IGNhYmFjPTEgcmVmPTMgZGVibG9jaz0xOjA6MCBhbmFseXNlPTB4MzoweDExMyBtZT1oZXggc3VibWU9NyBwc3k9MSBwc3lfcmQ9MS4wMDowLjAwIG1peGVkX3JlZj0xIG1lX3JhbmdlPTE2IGNocm9tYV9tZT0xIHRyZWxsaXM9MSA4eDhkY3Q9MSBjcW09MCBkZWFkem9uZT0yMSwxMSBmYXN0X3Bza2lwPTEgY2hyb21hX3FwX29mZnNldD00IHRocmVhZHM9MSBsb29rYWhlYWRfdGhyZWFkcz0xIHNsaWNlZF90aHJlYWRzPTAgbnI9MCBkZWNpbWF0ZT0xIGludGVybGFjZWQ9MCBibHVyYXlfY29tcGF0PTAgY29uc3RyYWluZWRfaW50cmE9MCBiZnJhbWVzPTMgYl9weXJhbWlkPTIgYl9hZGFwdD0xIGJfYmlhcz0wIGRpcmVjdD0xIHdlaWdodGI9MSBvcGVuX2dvcD0wIHdlaWdodHA9MiBrZXlpbnQ9MjUwIGtleWludF9taW49MjUgc2NlbmVjdXQ9NDAgaW50cmFfcmVmcmVzaD0wIHJjX2xvb2thaGVhZD00MCByYz1jcmYgbWJ0cmVlPTEgY3JmPTIzLjAgcWNvbXA9MC42MCBxcG1pbj0wIHFwbWF4PTY5IHFwc3RlcD00IGlwX3JhdGlvPTEuNDAgYXE9MToxLjAwAIAAAAAPZYiEACv//vXb8yyubp//AAAC7W1vb3YAAABsbXZoZAAAAAAAAAAAAAAAAAAAA+gAAAAoAAEAAAEAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAIXdHJhawAAAFx0a2hkAAAAAwAAAAAAAAAAAAAAAQAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAQAAAAAAQAAAAEAAAAAAAJGVkdHMAAAAcZWxzdAAAAAAAAAABAAAAKAAAAAAAAQAAAAABj21kaWEAAAAgbWRoZAAAAAAAAAAAAAAAAAAAMgAAAAIAVcQAAAAAAC1oZGxyAAAAAAAAAAB2aWRlAAAAAAAAAAAAAAAAVmlkZW9IYW5kbGVyAAAAATptaW5mAAAAFHZtaGQAAAABAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAAD6c3RibAAAAJZzdHNkAAAAAAAAAAEAAACGYXZjMQAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAQABAASAAAAEgAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABj//wAAADBhdmNDAfQACv/hABdn9AAKkZsr02QAAAMABAAAAwDIPEiWWAEABmjr48RIRAAAABhzdHRzAAAAAAAAAAEAAAABAAACAAAAABxzdHNjAAAAAAAAAAEAAAABAAAAAQAAAAEAAAAUc3RzegAAAAAAAALEAAAAAQAAABRzdGNvAAAAAAAAAAEAAAAwAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ny41Ni4xMDE=

[caiogondim]

I'm using https://github.com/mathiasbynens/small assets for both muted and muted video. @mangui Not using your base64 since it doesn't have sound.

The library is now 4K gzipped, but the mp3 file is still big. If anyone has a smaller mp3 with audio asset let me know :)

[mangui]

wow nice set of files !

[NicolasSiver]

Audio

This is the smallest what I could make (1136B)

AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAAJ21kYXQBQCKAo3hQhS0t
LS0tLS0tLS0tLS0tLS0tLS0tLS0vAAAC8G1vb3YAAABsbXZoZAAAAAAAAAAAAAAAAAAAA+gA
AAALAAEAAAEAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAQAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAIadHJhawAAAFx0a2hkAAAAAwAAAAAA
AAAAAAAAAQAAAAAAAAALAAAAAAAAAAAAAAABAQAAAAABAAAAAAAAAAAAAAAAAAAAAQAAAAAA
AAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAJGVkdHMAAAAcZWxzdAAAAAAAAAAB////9QAACAAA
AQAAAAABkm1kaWEAAAAgbWRoZAAAAAAAAAAAAAAAAAABdwAAAAQAVcQAAAAAAC1oZGxyAAAA
AAAAAABzb3VuAAAAAAAAAAAAAAAAU291bmRIYW5kbGVyAAAAAT1taW5mAAAAEHNtaGQAAAAA
AAAAAAAAACRkaW5mAAAAHGRyZWYAAAAAAAAAAQAAAAx1cmwgAAAAAQAAAQFzdGJsAAAAZ3N0
c2QAAAAAAAAAAQAAAFdtcDRhAAAAAAAAAAEAAAAAAAAAAAACABAAAAAAAAAAAAAAADNlc2Rz
AAAAAAOAgIAiAAEABICAgBRAFQAAAAAAWtIAAFrSBYCAgAIQCAaAgIABAgAAABhzdHRzAAAA
AAAAAAEAAAABAAAEAAAAABxzdHNjAAAAAAAAAAEAAAABAAAAAQAAAAEAAAAUc3RzegAAAAAA
AAAfAAAAAQAAABRzdGNvAAAAAAAAAAEAAAAsAAAAGnNncGQBAAAAcm9sbAAAAAIAAAAB//8A
AAAcc2JncAAAAAByb2xsAAAAAQAAAAEAAAABAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRs
cgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAAB
AAAAAExhdmY1Ny44My4xMDA=

This is valid AAC, MP4 container file, with wide support in all browsers. This audio file is recognized correctly in macOS. Also, no need to change the volume for this audio file, since you will not be able to hear anything.

Small MP3 file from small project is crazy small, but I have nearly the same result when there is an issue with samples.

Size is 354B:

AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAACG1kYXQAAADWbW9vdgAA
AGxtdmhkAAAAAAAAAAAAAAAAAAAD6AAAAAAAAQAAAQAAAAAAAAAAAAAAAAEAAAAAAAAAAAAA
AAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAA
AGJ1ZHRhAAAAWm1ldGEAAAAAAAAAIWhkbHIAAAAAAAAAAG1kaXJhcHBsAAAAAAAAAAAAAAAA
LWlsc3QAAAAlqXRvbwAAAB1kYXRhAAAAAQAAAABMYXZmNTcuODMuMTAw

Did you try mp3 from small project, does it "work" for audio detection? I'm not sure it's future proof, but if it works it's really hard to beat that size...

[brentsmith-dev]

We ran into issues with Safari not respecting the small project's mp3 when we were doing this detection a few weeks ago. The smallest mp3 we found to work across our supported browsers was from: https://gist.github.com/westonruter/253174 which I think is the same one currently used in this project.

[caiogondim]

@zshenker just sent me a smaller video with audio. We should test it as well.

AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDEAAAAIZnJlZQAABOdtZGF0AAACvQYF//+53EXpvebZSLeWLNgg2SPu73gyNjQgLSBjb3JlIDE0OCByMjc5NSBhYWE5YWE4IC0gSC4yNjQvTVBFRy00IEFWQyBjb2RlYyAtIENvcHlsZWZ0IDIwMDMtMjAxNyAtIGh0dHA6Ly93d3cudmlkZW9sYW4ub3JnL3gyNjQuaHRtbCAtIG9wdGlvbnM6IGNhYmFjPTEgcmVmPTMgZGVibG9jaz0xOjA6MCBhbmFseXNlPTB4MzoweDExMyBtZT1oZXggc3VibWU9NyBwc3k9MSBwc3lfcmQ9MS4wMDowLjAwIG1peGVkX3JlZj0xIG1lX3JhbmdlPTE2IGNocm9tYV9tZT0xIHRyZWxsaXM9MSA4eDhkY3Q9MSBjcW09MCBkZWFkem9uZT0yMSwxMSBmYXN0X3Bza2lwPTEgY2hyb21hX3FwX29mZnNldD0tMiB0aHJlYWRzPTEgbG9va2FoZWFkX3RocmVhZHM9MSBzbGljZWRfdGhyZWFkcz0wIG5yPTAgZGVjaW1hdGU9MSBpbnRlcmxhY2VkPTAgYmx1cmF5X2NvbXBhdD0wIGNvbnN0cmFpbmVkX2ludHJhPTAgYmZyYW1lcz0zIGJfcHlyYW1pZD0yIGJfYWRhcHQ9MSBiX2JpYXM9MCBkaXJlY3Q9MSB3ZWlnaHRiPTEgb3Blbl9nb3A9MCB3ZWlnaHRwPTIga2V5aW50PTI1MCBrZXlpbnRfbWluPTI1IHNjZW5lY3V0PTQwIGludHJhX3JlZnJlc2g9MCByY19sb29rYWhlYWQ9NDAgcmM9YWJyIG1idHJlZT0xIGJpdHJhdGU9NTAwIHJhdGV0b2w9MS4wIHFjb21wPTAuNjAgcXBtaW49MCBxcG1heD02OSBxcHN0ZXA9NCBpcF9yYXRpbz0xLjQwIGFxPTE6MS4wMACAAAAAEmWIhAAa//7ugr4FN3ncFEIV4d4CAExhdmM1Ny44OS4xMDAAQjebYIG7fwAQt9QJGQWooJ8V9vw+Zqta5njzO/aqsy2aqSSdnsSofyMfunhGd/t5QLpBxpIPPEHnhGye2vE2p4hHdE8Qwc24OSMrm9nniO8jfELnRc84cAgsXV4H3HVT5Yn4OYUgaJymr+r3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

[gibigate]

Please update documentation, result return object instead boolean

canAutoplay.video().then(({result}) => {
  if (result === true) {
    // Can autoplay
  } else {
    // Can not autoplay
  }
})