{"id":6062,"date":"2023-02-13T10:00:34","date_gmt":"2023-02-13T09:00:34","guid":{"rendered":"https:\/\/www.eugigufo.net\/it\/?page_id=6062"},"modified":"2024-10-01T13:58:28","modified_gmt":"2024-10-01T11:58:28","slug":"paragrafo35","status":"publish","type":"page","link":"https:\/\/eugigufo.net\/it\/inerario\/paragrafo35\/","title":{"rendered":"\u00a7\u00a035. Come impostare le\u00a0dimensioni degli elementi <audio> e <video>"},"content":{"rendered":"<p>La&nbsp;maggioranza schiacciante dei manuali del web-development in&nbsp;generale e&nbsp;del html5 in&nbsp;particolare ci&nbsp;racconta un&nbsp;sacco di&nbsp;cose interessanti sugli elementi &lt;audio&gt; e &lt;video&gt;, ma&nbsp;si&nbsp;dimentica di&nbsp;una di&nbsp;quelle pi&ugrave; importanti: le&nbsp;dimensioni di&nbsp;quegli elementi sulle pagine dei siti. Non so&nbsp;proprio perch&eacute; succeda: si&nbsp;tratta di&nbsp;un&nbsp;aspetto rilevante sia per la&nbsp;bellezza estetica che per la&nbsp;comodit&agrave; di&nbsp;ogni sito dove quegli elementi vengono utilizzati.<br \/>\nCerto, dal punto di&nbsp;vista tecnico si&nbsp;tratta di&nbsp;una questione semplicissima, ma&nbsp;c&rsquo;&egrave; sempre qualche sviluppatore che la&nbsp;deve affrontare per la&nbsp;prima volta e&nbsp;quindi non conosce la&nbsp;strada ottimale. Di&nbsp;conseguenza, ho&nbsp;pensato di&nbsp;scrivere questo breve paragrafo specifico.<br \/>\nRaccontando di&nbsp;come impostare le&nbsp;dimensioni degli elementi &lt;audio&gt; e &lt;video&gt; preferisco trattare separatamente i&nbsp;relativi tag perch&eacute; anche gli interventi analoghi perseguiranno degli obiettivi in&nbsp;parte differenti: a&nbsp;seconda che si&nbsp;tratti di&nbsp;un&nbsp;file audio o&nbsp;video.<\/p>\n<p><b>1.&nbsp;Come impostare le&nbsp;dimensioni dell&rsquo;elemento &lt;audio&gt;<\/b><br \/>\nIl&nbsp;codice html dell&rsquo;elemento &lt;audio&gt; &egrave;&nbsp;noto a&nbsp;tutti. Esso permette al&nbsp;visitatore di&nbsp;un&nbsp;sito di&nbsp;ascoltare un&nbsp;brano audio, metterlo in&nbsp;pausa, scrollarlo avanti o&nbsp;indietro, regolare il&nbsp;volume di&nbsp;riproduzione.<\/p>\n<pre class=\"brush: xml; collapse: false; title: listing 1; notranslate\" title=\"listing 1\">\r\n&lt;audio controls preload=&quot;auto&quot; src=&quot;song.mp3&quot; type=&quot;audio\/mp3&quot;&gt;&lt;\/audio&gt;\r\n<\/pre>\n<p>\nIl&nbsp;problema consiste nel fatto che il&nbsp;codice appena riportato produce il&nbsp;seguente risultato:<br \/>\n<audio controls preload=\"auto\" src=\"https:\/\/eugigufo.net\/echomskru\/zolotajapolka\/zolotajapolka001.mp3\" type=\"audio\/mp3\"><\/audio><br \/>\nQuindi ha&nbsp;due difetti:<br \/>\n1.&nbsp;La&nbsp;larghezza dell&rsquo;elemento &egrave;&nbsp;stata impostata dal browser e&nbsp;non dallo sviluppatore (il&nbsp;quale potrebbe avere delle preferenze o&nbsp;linee guida estetiche ben determinate);<br \/>\n2.&nbsp;La&nbsp;lunghezza dell&rsquo;elemento non ha&nbsp;alcun legame con la&nbsp;durata del brano a&nbsp;cui si&nbsp;riferisce, quindi qualora si&nbsp;dovesse trattare di&nbsp;un&nbsp;brano audio lungo, l&rsquo;elemento &lt;audio&gt; &egrave;&nbsp;troppo corto per poter scrollare comodamente il&nbsp;file per tratti brevi pochi secondi o&nbsp;poche decine di&nbsp;secondi (i&nbsp;nostri mouse e&nbsp;le&nbsp;nostre dita non sono abbastanza sensibili e\/o precisi).<br \/>\nEntrambi i&nbsp;difetti vanno corretti allo stesso modo: impostando una buona larghezza dell&rsquo;elemento. &Egrave;&nbsp;possibile impostarla in&nbsp;pixel&#8230;<\/p>\n<pre class=\"brush: xml; collapse: false; title: listing 2; notranslate\" title=\"listing 2\">\r\n&lt;audio style=&quot;width: 800px;&quot; controls preload=&quot;auto&quot; src=&quot;song.mp3&quot; type=&quot;audio\/mp3&quot;&gt;&lt;\/audio&gt;\r\n<\/pre>\n<p>\n&#8230; oppure in&nbsp;percentuali (rispetto al&nbsp;contenitore).<\/p>\n<pre class=\"brush: xml; collapse: false; title: listing 3; notranslate\" title=\"listing 3\">\r\n&lt;audio style=&quot;width: 80%&quot; controls preload=&quot;auto&quot; src=&quot;song.mp3&quot; type=&quot;audio\/mp3&quot;&gt;&lt;\/audio&gt;\r\n<\/pre>\n<p>\nIl&nbsp;risultato sar&agrave; decisamente meglio perch&eacute; assieme all&rsquo;elemento si&nbsp;allunga automaticamente anche la&nbsp;barra del tempo (provate a&nbsp;confrontare la&nbsp;sua comodit&agrave; con quella del primo esempio).<br \/>\n<audio style=\"width: 80%\" controls preload=\"auto\" src=\"https:\/\/eugigufo.net\/echomskru\/zolotajapolka\/zolotajapolka001.mp3\" type=\"audio\/mp3\"><\/audio><br \/>\nOvviamente, l&rsquo;indicazione della larghezza dell&rsquo;elemento pu&ograve; essere messa anche fuori dal suo codice html: per esempio, in&nbsp;un&nbsp;file css esterno.<\/p>\n<pre class=\"brush: css; collapse: false; title: listing 4; notranslate\" title=\"listing 4\">\r\naudio { width: 80%; }\r\n<\/pre>\n<p>\nCon l&rsquo;impostazione della dimensione fatta, il&nbsp;visitatore guadagna in&nbsp;comodit&agrave;, mentre lo&nbsp;sviluppatore guadagna in&nbsp;controllo della situazione.<br \/>\nE&nbsp;ora passiamo all&rsquo;elemento &lt;video&gt;.<\/p>\n<p><b>2.&nbsp;Come impostare le&nbsp;dimensioni dell&rsquo;elemento &lt;video&gt;<\/b><br \/>\nIl&nbsp;codice html dell&rsquo;elemento &lt;video&gt; &egrave;&nbsp;noto a&nbsp;tutti. Esso permette al&nbsp;visitatore di&nbsp;un&nbsp;sito di&nbsp;visionare un&nbsp;video, metterlo in&nbsp;pausa, scrollarlo avanti e&nbsp;indietro, regolare il&nbsp;volume del suono, aprire il&nbsp;video a&nbsp;schermo intero.<\/p>\n<pre class=\"brush: xml; collapse: false; title: listing 5; notranslate\" title=\"listing 5\">\r\n&lt;video controls preload=&quot;auto&quot; src=&quot;videoclip.mp4&quot; type=&quot;video\/mp4&quot;&gt;&lt;\/video&gt;\r\n<\/pre>\n<p>\nI&nbsp;problemi relativi all&rsquo;utilizzo di&nbsp;tale codice sono molteplici, ma&nbsp;hanno sempre la&nbsp;stessa origine: la&nbsp;risoluzione e&nbsp;le&nbsp;proporzioni del video. Potrebbe trattarsi di&nbsp;un&nbsp;video di&nbsp;piccole proporzioni (perch&eacute; registrato anni o&nbsp;decenni&nbsp;fa, con un&nbsp;dispositivo primitivo e\/o obsoleto; oppure un&nbsp;video convertito in&nbsp;una schifezza inguardabile solo per essere alleggerito). Potrebbe, al&nbsp;contrario, essere un&nbsp;video di&nbsp;proporzioni grandi, quindi di&nbsp;una larghezza notevolmente superiore non solo alla porzione della pagina riservata ai&nbsp;contenuti, ma&nbsp;anche allo schermo del computer&nbsp;\/ smartphone&nbsp;\/ tablet del visitatore. Il&nbsp;principio generale che ci&nbsp;interessa&nbsp;&egrave;: i&nbsp;video pubblicati su&nbsp;un&nbsp;sito quasi sicuramente saranno tutti di&nbsp;proporzioni e&nbsp;risoluzioni diversi (perch&eacute; realizzati con dispositivi diversi o&nbsp;in&nbsp;modalit&agrave; diverse). Quindi noi, gli sviluppatori, dobbiamo impostare l&rsquo;elemento &lt;video&gt; in&nbsp;un&nbsp;modo che nessuno file video pubblicato sul sito&#8230;<br \/>\na)&nbsp;rovini il&nbsp;design del sito a&nbsp;causa della propria grandezza,<br \/>\nb)&nbsp;risulti inguardabile senza la&nbsp;modalit&agrave; &laquo;schermo intero&raquo; (quando le&nbsp;proporzioni del video sono ridotte),<br \/>\nc)&nbsp;sia scomodo da&nbsp;scrollare avanti e&nbsp;indietro a&nbsp;causa della barra del tempo troppo corta (come nel caso dell&rsquo;elemento &lt;audio&gt;).<br \/>\nIl&nbsp;punto&nbsp;a) &egrave;&nbsp;facilissimo da&nbsp;realizzare: con l&rsquo;aiuto del css diciamo all&rsquo;elemento &lt;video&gt; che non pu&ograve; assumere una larghezza superiore a&nbsp;quella del (div) contenitore. In&nbsp;tal senso ci&nbsp;&egrave;&nbsp;utile la&nbsp;propriet&agrave; max-width:<\/p>\n<pre class=\"brush: xml; collapse: false; title: listing 6; notranslate\" title=\"listing 6\">\r\n&lt;video style=&quot;max-width: 100%&quot; controls preload=&quot;auto&quot; src=&quot;videoclip.mp4&quot; type=&quot;video\/mp4&quot;&gt;&lt;\/video&gt;\r\n<\/pre>\n<p>\nS&igrave;, avete capito bene: ormai &egrave;&nbsp;sufficiente indicare solo la&nbsp;larghezza. L&rsquo;altezza del video si&nbsp;adeguer&agrave; automaticamente in&nbsp;un&nbsp;modo proporzionato. E, soprattutto, l&rsquo;elemento &lt;video&gt; diventer&agrave; responsive!<br \/>\nOvviamente, possiamo indicare la&nbsp;larghezza massima anche in&nbsp;pixel.<\/p>\n<pre class=\"brush: xml; collapse: false; title: listing 7; notranslate\" title=\"listing 7\">\r\n&lt;video style=&quot;max-width: 1000px&quot; controls preload=&quot;auto&quot; src=&quot;videoclip.mp4&quot; type=&quot;video\/mp4&quot;&gt;&lt;\/video&gt;\r\n<\/pre>\n<p>\nE, ovviamente, possiamo faro anche da&nbsp;un&nbsp;file css esterno:<\/p>\n<pre class=\"brush: css; collapse: false; title: listing 8; notranslate\" title=\"listing 8\">\r\nvideo { max-width: 100%; height: auto; }\r\n<\/pre>\n<p>\nIn&nbsp;entrambi i&nbsp;casi il&nbsp;risultato sar&agrave; quello riportato sotto (il&nbsp;file video ha&nbsp;la&nbsp;risoluzione 1920&times;1080):<br \/>\n<video style=\"max-width: 100%\" controls preload=\"auto\" src=\"https:\/\/eugigufo.net\/images\/inerario\/art35videotag.MOV\" type=\"video\/mov\"><\/video><br \/>\nI&nbsp;video di&nbsp;proporzioni piccole sono un&nbsp;po&rsquo; pi&ugrave; difficili da&nbsp;trattare. La&nbsp;propriet&agrave; max-width si&nbsp;applicher&agrave; anche a&nbsp;loro, ma&nbsp;quando sono meno larghi del contenitore molto spesso appaiono pi&ugrave; grandi di&nbsp;quello che sono in&nbsp;realt&agrave; (ma&nbsp;non pi&ugrave; larghi del valore impostato con il&nbsp;max-width) e&nbsp;si&nbsp;vedono dunque un&nbsp;po&rsquo; sfuocati. La&nbsp;colpa non&nbsp;&egrave; del sito, la&nbsp;colpa &egrave; delle impostazioni del computer o&nbsp;del browser utilizzati per visitare il&nbsp;sito. Ma&nbsp;gli sviluppatori dei siti non hanno i&nbsp;mezzi (e&nbsp;nemmeno il&nbsp;compito) per fare la&nbsp;manutenzione di&nbsp;tutti i&nbsp;computer del mondo, quindi devono creare i&nbsp;siti pi&ugrave; prevedibili possibile. In&nbsp;tale missione hanno tre opzioni:<br \/>\n1)&nbsp;indicare le&nbsp;dimensioni esatte per i&nbsp;video meno larghi del contenitore (per esempio, se&nbsp;il&nbsp;div nel quale si&nbsp;vedono i&nbsp;contenuti del sito &egrave;&nbsp;largo 1000&nbsp;pixel, per i&nbsp;video di&nbsp;larghezza inferiore indichiamo le&nbsp;loro dimensioni). Ovviamente, &egrave;&nbsp;una strada percorribile solo quando inseriamo manualmente ogni singolo video pubblicato e&nbsp;non lo&nbsp;ripeschiamo attraverso uno script:<\/p>\n<pre class=\"brush: xml; collapse: false; title: listing 9; notranslate\" title=\"listing 9\">\r\n&lt;video width=&quot;800&quot; height=&quot;507&quot; controls preload=&quot;auto&quot; src=&quot;videoclip.mp4&quot; type=&quot;video\/mp4&quot;&gt;&lt;\/video&gt;\r\n<\/pre>\n<p>\n2)&nbsp;scrivere uno script che determini le&nbsp;dimensioni del fotogramma di&nbsp;ogni singolo video e&nbsp;inserisca i&nbsp;valori ottenuti nel codice html dell&rsquo;elemento &lt;video&gt;. Se&nbsp;avete la&nbsp;possibilit&agrave; di&nbsp;utilizzare le&nbsp;librerie ID3, potete provare a&nbsp;scrivere uno script in&nbsp;PHP con un&nbsp;codice di&nbsp;questo tipo:<\/p>\n<pre class=\"brush: php; collapse: false; title: listing 10; notranslate\" title=\"listing 10\">\r\ninclude_once('pathto\/getid3.php');\r\n$getID3 = new getID3;\r\n$file = $getID3-&gt;analyze($filename);\r\n$width = $file&#x5B;'video']&#x5B;'resolution_x'];\r\n$heigth = $file&#x5B;'video']&#x5B;'resolution_y'];\r\n<\/pre>\n<p>\nCon il&nbsp;javascript, invece, aggiungere i&nbsp;valori width e&nbsp;height in&nbsp;un&nbsp;codice html dell&rsquo;elemento &lt;video&gt; gi&agrave; presente sulla pagina sar&agrave; una missione un&nbsp;po&rsquo; incasinata. Ma&nbsp;alla base del tutto dovrebbe essere un&nbsp;codice come questo:<\/p>\n<pre class=\"brush: jscript; collapse: false; title: listing 11; notranslate\" title=\"listing 11\">\r\nvar v = document.getElementById(&quot;video&quot;);\r\nv.addEventListener( &quot;loadedmetadata&quot;, function (e) {\r\n    var width = this.videoWidth,\r\n        height = this.videoHeight;\r\n}, false );\r\n<\/pre>\n<p>\n(non aggiungo una soluzione completa solo perch&eacute; le&nbsp;caratteristiche dei siti e&nbsp;dei hosting sono troppo varie);<br \/>\n3)&nbsp;infine, gli sviluppatori potrebbero anche non preoccuparsi dei video minuscoli, giustificandosi ragionevolmente con il&nbsp;fatto che essi stiano estinguendosi nella natura digitale.<br \/>\nIndipendentemente dalla opzione da&nbsp;voi scelta, dai vostri obiettivi e&nbsp;dalle caratteristiche del progetto sul quale state lavorando, ora sapete almeno due cose importanti:<br \/>\n&ndash;&nbsp;come impostare le&nbsp;dimensioni degli elementi &lt;audio&gt; e &lt;video&gt; rendendoli comodi per gli utenti;<br \/>\n&ndash;&nbsp;come rendere gli elementi &lt;audio&gt; e &lt;video&gt; responsive indipendentemente dal loro contenuto.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Il paragrafo dell\u2019\u201cInerario\u201d che spiega come e perch\u00e9 impostare le dimensioni degli elementi <audio> e <video>.<br \/>\nQuesto paragrafo \u00e8 stato pensato principalmente per gli sviluppatori che non sanno o non pensano perch\u00e9 preoccuparsi di un argomento apparentemente cos\u00ec banale.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":452,"menu_order":35,"comment_status":"open","ping_status":"closed","template":"inerarioart.php","meta":{"footnotes":""},"class_list":["post-6062","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages\/6062","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/comments?post=6062"}],"version-history":[{"count":0,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages\/6062\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages\/452"}],"wp:attachment":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/media?parent=6062"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}