Blog
Hermas  House  Productions

Vervolg blog 'connected'

Ik maakte van elk couplet en het refrein een GIF animatie, deze zette ik om in een AVI file.
Deze AVI video files kon ik inlezen met een VIDEO Editor programma en de muziek er eveneens aan toevoegen.
Met een andere video programma heb ik de ondertiteling later toegevoegd.
Het resultaat (MP4) heb ik naar mijn youtube kanaal geupload. Best wel groot. Het resultaat staat hier

Ik wilde de video ook op mijn site zetten maar dan niet als YOUTUBE ingesloten bestand.
Maar het was te groot en toen bedacht ik, dat ik ook gebruik kon maken van de mogelijkheden van een HTML5 audio bestand.
Eerst heb ik de geluidsfile (.WAV), de mix, aangepast. Een betere mix.
Voor het maken van site pagina's gebruikte ik WYSIWYG14.
Daarin zit een carousel layout programma. Eigenlijk zijn het aparte mini pagina's in één carousel.
Op een pagina kan je alles zetten. Ik zette daar de gif animaties. Maar die bleken te groot om ze met het in wysiwyg ingebouwde FTP programma als pagina te uploaden.
Dat komt omdat ik nog geen snelle verbinding (fiber) heb (over een jaar pas!).
Ik heb elke .gif-file apart geupload naar mijn server.
Het voordeel van zo'n carousel programma is ook dat je de pagina overgangen van een effect kan voorzien (fade) en de navigatie zelf kan besturen door middel van een javascript programma (JS).
Dat kon ik mooi combineren met timeupdate functie in HTML5 voor video maar ook voor audio (JS: audio.addEventListener('timeupdate', function ()).
De tijd tijdens het afspelen van het geluid schakelt dus de pagina's. Ik heb er voor gekozen de gehele tekst van het refrein en elk apart couplet onder de animatie te zetten. Het kan ook regel voor regel, maar dat was wat meer werk en wat storend.
Het resultaat staat hier.

 

Invisible cords
Making a Video CLIP
2024-04-24 03:55:28