would like help to create a dummy video #372
Comments
|
fyi, i tried, succeeded and then failed... i had generated a pretty static video with: The idea of it all was to have a 1 sec - 1 frame - 2x2 static colored video that could be adjusted how long it would run, by only changing some duration and framerate And at the end i came up with this over engineered (partly) failed attempt const makeDummyVideo = (() => {
const gzipDummyVid = 'data:a/a;base64,H4sIAAAAAAAAE41UQYskNRRO9egii+AiCnNYIep6m66pqu6Z7Wk2MDIu9kFZLy4iQpFKUl1FVyqZJN3TvacVPMwvWP+AKAt69iQMogcR7w4KIoIoC+7Rm+1L9cxOzSwrhkrel7zvvZf3XlUhhHDuFrq0SiLUQV7CTOiMxVL3Y4TQM7kRAnQ/SE4dyC8uPb1c3v/55p9f/X48+vLexo/4+NW/Hs6T7T7uYqaMwPHWFjbJTnwdR3TQ5zsDUIxCIGy+/c7NN7t9/PrtPWBywUCxp/SiErnDSRT1ukkUe3bhnB5ubh4cHISzkgtV0TpUZrzpo4SFkxVwlHalqu0QM5pRRmJsRE56mIusUmxC4mE0jDCtabWwgkTz3jCax3EPS0EKMcd2mgG6jrVdgCmsqeEkDiMwggXLci546j3GYJEaWo8FibcxK4ySNAXTGDsjqqq0gAbzAWcOANuXJIIrUH5H1YIk8UYc45xal2o7KbVnrBzs61TluRWOdBPsCgMW3lGl1IQWsEnPzmxVMnF2EOHaNDFYKanz9yhrJ0xFgQTnWTU1dJEyJTV1sGdQImdoWYMLIBrqObmhUlgoVpbqBeCSkwQw5VT7LLI0K6mPxEsjmrwORDkuXAZIaVGnY6VBuzrUYDoRC/BNkq3oBKayrP3VmagFmzrSj3AT3FfUCFuAtWHpo2y93jDCTI5lBmX1WcGGJL0wwvs+FxKF2wC199tIOifbOwCsE5r0camhR/A+QAvBF92H9vtmorvwAl8Rhx+hF5f//P3dw6NPH/z0y4cIrXWkUjPQVXJWcHRurP2Bnr91FwXIP2cjOM+6uN9F/zk68GxAASaAP3CTJubaY9583Ivj/8TtnEyErgnuLMirorLukcWp38Y2+ETykgLAkl/MfRcFGwi9+02z6Ra8Mqca/xm2mbf9ZzmiNa+E5wS3oDM5gBdmsnHavuY1vtJd5dD+VhrPTk2FVzh4zrqsAvyZdZa3OB/7P9ETSuGT7qARyNETGRfH+nIJawxe9wKOLi9/RetjkJ8fp4eHR2+g4OunfGN2b4zuvRegS8WD375/5QgMrmhq9UkAP9eta+p8GjTwdfMpwvVZ+/y8jb3Tugqcdb71JbOOqZZNBDObcud79L4UjfTj5XY/oIeGal21c+uWq6a/dt8p7/Al+GHT06q8RWf51iBMdsI4iv4F63hgsfcFAAA='
// const dummyVid = 'data:a/a;base64,AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDEAAAAIZnJlZQAAAs1tZGF0AAACrQYF//+p3EXpvebZSLeWLNgg2SPu73gyNjQgLSBjb3JlIDE1NSByMjkxNyAwYTg0ZDk4IC0gSC4yNjQvTVBFRy00IEFWQyBjb2RlYyAtIENvcHlsZWZ0IDIwMDMtMjAxOCAtIGh0dHA6Ly93d3cudmlkZW9sYW4ub3JnL3gyNjQuaHRtbCAtIG9wdGlvbnM6IGNhYmFjPTEgcmVmPTMgZGVibG9jaz0xOjA6MCBhbmFseXNlPTB4MzoweDExMyBtZT1oZXggc3VibWU9NyBwc3k9MSBwc3lfcmQ9MS4wMDowLjAwIG1peGVkX3JlZj0xIG1lX3JhbmdlPTE2IGNocm9tYV9tZT0xIHRyZWxsaXM9MSA4eDhkY3Q9MSBjcW09MCBkZWFkem9uZT0yMSwxMSBmYXN0X3Bza2lwPTEgY2hyb21hX3FwX29mZnNldD0tMiB0aHJlYWRzPTEgbG9va2FoZWFkX3RocmVhZHM9MSBzbGljZWRfdGhyZWFkcz0wIG5yPTAgZGVjaW1hdGU9MSBpbnRlcmxhY2VkPTAgYmx1cmF5X2NvbXBhdD0wIGNvbnN0cmFpbmVkX2ludHJhPTAgYmZyYW1lcz0zIGJfcHlyYW1pZD0yIGJfYWRhcHQ9MSBiX2JpYXM9MCBkaXJlY3Q9MSB3ZWlnaHRiPTEgb3Blbl9nb3A9MCB3ZWlnaHRwPTIga2V5aW50PTI1MCBrZXlpbnRfbWluPTEgc2NlbmVjdXQ9NDAgaW50cmFfcmVmcmVzaD0wIHJjX2xvb2thaGVhZD00MCByYz1jcmYgbWJ0cmVlPTEgY3JmPTIzLjAgcWNvbXA9MC42MCBxcG1pbj0wIHFwbWF4PTY5IHFwc3RlcD00IGlwX3JhdGlvPTEuNDAgYXE9MToxLjAwAIAAAAAQZYiEABX//vfJ78Cm69vfgQAAAwJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAST4AABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAACLHRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAEAAAAAAAST4AAAAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAgAAAAIAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAEk+AAAAAAAAEAAAAAAaRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAEAAAEsAAFXEAAAAAAAtaGRscgAAAAAAAAAAdmlkZQAAAAAAAAAAAAAAAFZpZGVvSGFuZGxlcgAAAAFPbWluZgAAABR2bWhkAAAAAQAAAAAAAAAAAAAAJGRpbmYAAAAcZHJlZgAAAAAAAAABAAAADHVybCAAAAABAAABD3N0YmwAAACnc3RzZAAAAAAAAAABAAAAl2F2YzEAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAgACAEgAAABIAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAY//8AAAAxYXZjQwFkAAr/4QAYZ2QACqzZX4iIwEQAAcIEAAADAEA8SJZYAQAGaOvjyyLAAAAAEHBhc3AAAAABAAAAAQAAABhzdHRzAAAAAAAAAAEAAAABAEsAAAAAABxzdHNjAAAAAAAAAAEAAAABAAAAAQAAAAEAAAAYc3RzegAAAAAAAAAAAAAAAQAAAsUAAAAUc3RjbwAAAAAAAAABAAAAMAAAAGJ1ZHRhAAAAWm1ldGEAAAAAAAAAIWhkbHIAAAAAAAAAAG1kaXJhcHBsAAAAAAAAAAAAAAAALWlsc3QAAAAlqXRvbwAAAB1kYXRhAAAAAQAAAABMYXZmNTguMjkuMTAw'
// 1. convert b64 to a readable stream
// 2. pipeThrough a gzip-decompression stream
// 3. read stream as a arraybuffer and convert to DataView
const p = fetch(gzipDummyVid).then(res =>
new Response(
res.body.pipeThrough(new DecompressionStream('gzip'))
).arrayBuffer().then(buffer => new DataView(buffer, 757))
)
// alternative way without gzip
// const p = fetch(dummyVid)
// .then(res => res.arrayBuffer())
// .then(buffer => new DataView(buffer, 757))
return sec => p.then(moov => {
const wantedDuration = sec
const timedDuration = 16384 / (1 / wantedDuration)
const wantedMs = wantedDuration * 1000
moov.setUint32(32, wantedMs)
moov.setUint32(240, wantedMs)
moov.setUint32(152, wantedMs)
moov.setUint32(284, timedDuration)
moov.setUint32(596, timedDuration)
return new Blob([moov.buffer], { type: 'video/mp4' })
})
})()
makeDummyVideo(45).then(blob => {
const video = document.createElement('video')
video.controls = true
video.width = video.height = 300
video.src = URL.createObjectURL(blob)
document.body.append(video)
})And look and behold! It works in chrome: https://jsfiddle.net/8a4dr6bv/ I have pretty much given up at this point after wasting so many hours trying a bunch of things 😞 |
I want to create a dummy 1x1 pixel video that plays nothing for a set durration, I thought MediaSource could be of any help, cuz you can set the duration property and be able to feed the media player with buffers and also be able to seek with it (
video.currentTime = x).lets say i set some variable to be
01:20:15, then I want to generate a<video>tag that plays nothing for 1h 20m and 15sThe lack of skill I'm missing is how could i get this source buffers that i could feed into the MediaSource.
I figure you might have some ideas, cuz i don't know exactly video's are built/constructed
a other thought i had was to generate a Blob that only have one frame that's loops over and over again, with the smallest possible file size kind of like saying "this segment is 1hour long but the frames never changes so there should be no reason for the file to be larger than a few kb and doubling the duration would kind of yield the same filesize - the only thing you have actually changed is some duration or time length property in a segment" if something like that would be possible. then i could just generate a complete video and simply just use
DataViewto modify the time.then i don't even need MediaSource or mux.js, i could just use
URL.createObjectURL(blob)and play that insteadAnother question i have is if it's possible to use a same fragment (buffer) over and over again with MediaSource. isn't it like some fragment indexing or currentTime that each "Box" have that makes it impossible append a particular buffer at a particular time?
another dummy video generator i found was this js source code but it didn't work out for me 😞
I would kind of like to what that guy did but possible without the MediaRecorder and the canvas element if i could
I have tried AudioContext also for a bit, but it looks to be too complicated and i can't figure out to create a AudioBuffer that could loop for a set duration and have it play in a
<video>tag, I manage to create a looping audio but i wasn't able to seek/jump and the duration was === infinityThe text was updated successfully, but these errors were encountered: