1. Descargamos un vídeo:

https://atio.es/pub/mar.mp4

2. Coa axuda do explorador de ficheiros podemos analizar o peso do ficheiro. Podemos observar que ten un tamaño de 16.6 Mb

3. Abrímolo co HandBrake. Visualizamos as dimensións do vídeo e a relación entre ancho e alto

Neste exemplo podemos observar que o vídeo ten unha duración de 23 segundos, ten un tamaño de 1920x1080 píxeles e cunha proporción 16:9

4. A calidade é boa. Pero quizais excesiva para unha publicación ordinaria. En primeiro lugar os usuarios da páxina web non visualizarán o vídeo cun tamaño tan grande, pois ocuparía moito espazo na pantalla e segundo, terían que gastar moitos datos para visualizar un vídeo cun tamaño de tan só 23 segundos. Tendo en conta o anterior, pode que decidamos diminuír o seu peso facendo uns axustes básicos. Para isto empregamos o software HandBrake.

a. Clic na pestana Dimensions

b. Na columna central observamos  a resolución actual

Polo tanto, será nesta columna onde configuraremos as dimensións máximas do vídeo a publicar. Por exemplo, podemos escoller un formato normalizado en Resolución Limit de 576p PAL, e en Scaled size observamos que terá un tamaño de 720x576 px

Pero se na Resolución Limit escollemos a opción Custom (personalizada), podemos inserir as dimensións de forma manual. Introducimos o ancho desexado, por exemplo 520 px. Pero a aplicación non configura o alto, tendo en conta a proporción ancho alto (16:9), polo que podemos botar man dunha sinxela regra de tres e calcular o alto para que non se deforme o vídeo:

16 ________9
520________x

x=520*9/16= 292 px

Entón dispoñemos dunha configuración estándar e outra personalizada. Neste exemplo escollo a primeira opción a de 576p PAL. 

c. Se o desexamos tamén podemos diminuír a calidade do son, co mesmo obxectivo: que pese menos o arquivo. Para isto pinchamos na pestana de Audio

E seguidamente pinchamos no lapis, que está no marxe dereito

No apartado Bitrate/Quality, baixamos a 96, por exemplo

d. Finalmente, configuramos o nome do ficheiro resultante no fondo da pantalla. A extensión que asigna o HandBrake é m4v en vez de mp4, pero funciona do mesmo modo. E despois se o desexamos podemos renomealo, aínda que non é necesario.

E configuramos o cartafol de saída. Por defecto é o de Vídeos

Pinchamos na icona de Start para crear un novo vídeo

e. Co botón dereito do rato, analizamos novamente o peso do ficheiro resultante

Polo que observamos o aforro é importante, pasamos de 16,6 Mb a 6,4 Mb.

4. Abrimos o vídeo con VídeoLan (VLC) e coa axuda do capturador de pantalla gardamos unha imaxe singular do vídeo e dun tamaño aproximado ao que terá no vídeo (720*576), pero sen preocuparnos se é algo máis grande. Esta imaxe será o poster, é dicir, trátase dunha imaxe que o navegador sempre renderizará, sen necesidade de comezar a descargar o vídeo. Esteticamente mellor moito a aparencia da páxina, pois non se ven ocos sen información. No meu caso emprego o programa Spectacle para facer as capturas.

E gardamos a captura co nome que desexemos. No meu caso, chamareille mar_poster.png

Polo tanto e ata o momento dispoñemos de dous ficheiros, mar_b.m4v e mar_poster.png

5. Abrimos o Drupal, e creamos unha nova publicación de tipo Páxina, por exemplo. Para iso pinchamos en Crear contido > páxina. Inserimos o nome da páxina e seleccionamos a categoría e o termo.

a. Dirixímonos a Ficheiros adxuntos e subimos aos servidor os dous ficheiros creados ata o momento. Pinchamos en Navegar, procuramos un dos ficheiros e clic en Adxuntar. Repetimos o proceso co outro ficheiro

Unha vez que subamos os dous ficheiros visualizaremos a pantalla do seguinte xeito. En cor morado destaco as url públicas dos dous ficheiros.

Copiamos a un editor de texto plano: Gedit, MousePad, Kate, etc, ou ben nun editor de código como o Visual Studio Code o seguinte código HTML5.

<div style="text-align:center;">
<video width="720" height="576" controls="controls" autostart="0" poster="http://url do póster">
<source src="http://url do vídeo" type="video/mp4" />
O teu navegador non soporta este vídeo.
</video>
</div>

Substituímos a url do póster e a do vídeo polas que visualizamos na pantalla anterior destacadas en cor morada.

Queda neste caso, algo así. Copiámolo ao portapapeles

<div style="text-align:center;">
<video width="720" height="576" controls="controls" autostart="0" poster="http://www.edu.xunta.gal/centros/zonaceed6/system/files/mar_poster.png">
<source src="http://www.edu.xunta.gal/centros/zonaceed6/system/files/mar_b.m4v" type="video/mp4" />
O teu navegador non soporta este vídeo.
</video>
</div>

b. Seguidamente pinchamos en Disable rich-text ou en HTML. Pegamos o código anterior e seguidamente pinchamos en gardar. Cada vez que o abramos, o propio Drupal fará cambios no código e deixará de funcionar, polo que teremos que pegar novamente o código

E en base ao anterior, como faríamos para introducir antes do vídeo un título e un parágrafo?.

Temos dúas opcións:

a.Introducimos todo o texto antes do vídeo e xunto previo a gardar pegamos o código do vídeo en html.

b. Empregar un editor de código ou texto plano. Escribimos o código HTML para o título e para o texto. Por exemplo, editamos algo así:

<h2>Pregunto aos homes e ás mulleres do noso mar</h2>
 
<p>Mariñeiros de Viveiro,</p>
<p>Fisterra, Caión, Malpica,</p>
<p>Pontevedra, Arousa, Vigo,</p>
<p>Noia, A Coruña, Muxía,</p>
<p>pescadores e peixeiras,</p>
<p>mariscadoras das rías</p>
<p>¿de quen son os areeiros</p>
<p>e os cons e faros e as illas?</p>
<p>(...)</p>
<p>¿de quen o verdello, a area,</p>
<p>os laños, as ardentías, </p>
<p>e as nécoras e centolas</p>
<p>e rodaballos e minchas,</p>
<p>(...)</p>
<p>Decídeme de quen son</p>
<p>praia, areas, augas, rías...</p>
<p>____________</p>
<p>Bernardino Graña</p>

<div style="text-align:center;">
<video width="720" height="576" controls="controls" autostart="0" poster="http://www.edu.xunta.gal/centros/zonaceed6/system/files/mar_poster.png">
<source src="http://www.edu.xunta.gal/centros/zonaceed6/system/files/mar_b.m4v" type="video/mp4" />
O teu navegador non soporta este vídeo.
</video>
</div>

E o resultado pode ser o seguinte:

Pregunto aos homes e ás mulleres do noso mar

Mariñeiros de Viveiro,

Fisterra, Caión, Malpica,

Pontevedra, Arousa, Vigo,

Noia, A Coruña, Muxía,

pescadores e peixeiras,

mariscadoras das rías

¿de quen son os areeiros

e os cons e faros e as illas?

(...)

¿de quen o verdello, a area,

os laños, as ardentías,

e as nécoras e centolas

e rodaballos e minchas,

(...)

Decídeme de quen son

praia, areas, augas, rías...

____________

Bernardino Graña