Publicar un vídeo mp4 en Drupal

Submitted by martin on Mar, 06/11/2019 - 08:48

Creamos un novo contido, tipo páxina.

paxina.png

Engadimos o título da nova. Seguindamente en ficheiros adxuntos, subimos ao servidor o vídeo

ficheirosadxuntos.png

Desmarcamos o check de Lista. Se nos fixamos aparece debaixo do cadro o enderezo URL no cal está publicado o vídeo. Neste exemplo é o seguinte: http://www.edu.xunta.gal/centros/ceiplabartapose/system/files/AS%C3%8D%20SE%20FIXO_1.mp4

 

Subimos novamente e prememos en "Desactivar texto enriquecido"

texto_enriquecido.png

E pegamos o seguinte código, pero en src debemos de inserir a url na cal se atopa o vídeo encomillado

<div>
<video width="512" height="288" controls="controls">
<source src="http://www.edu.xunta.gal/centros/ceiplabartapose/system/files/AS%C3%8D%20SE%20FIXO_1.mp4" type="video/mp4" />
O teu navegador non soporta este vídeo.
</video>
</div>

Finalmente clic en Gardar. E este sería o resultado:

resultado_video.png

Engadir Audio

Submitted by martin on Lun, 06/10/2019 - 09:56

1. Descargamos unha canción de Jamendo.com. Para iso entramos na web

http://www.jamendo.com/es/track/1099703/divergence-remastered-vip#

2. Unha vez que a temos descargado este ficheiro mp3, procedemos a crear un ficheiro ogg a partir do mp3.

Os ficheiros mp3 son leidos por Internet Explorer, Safari e Chrome. E os ficheiros ogg son interpretados por Firefox, Opera e Chrome

Para realizala conversión empregamos o programa SoundConverter. Para proceder a súa instalación:

sudo apt-get update

sudo apt-get soundconverter

O único que temos que facer é dar un clic en Add File, elixir o ficheiro descargado desde jamendo.com, e clic en Converter. O Sound converter crearnos un novo ficheiro con extensión ogg.

Tamén o podes facer o FormatJunkie (están explicadas as instruccións na páxina de incrustar vídeo).

No caso de empregar o sistema operativo Microsoft Windows, pode sernos útil o FormatFactory

http://pcfreetime.com/formatfactory/index.php?language=es

3.- Atención!. O propio Drupal permítenos subir ficheiros ó hosting. Podemos ir a agregar contido e eliximos ficheiro de audio e subímolos. Pero esta opción non permite enlazar o ficheiros que teñamos nun servizo como Dropbox ou Drive. Por mor diso, pasamos ó punto nº4, e facemos un enlace manual, empregando código html.

4.- Creamos novo contido tipo páxina. Poñémoslle título "Practica4. audio", e engadimos unha etiqueta chamada "Divergence", que é o título da canción

Sen embargo no noso caso, para non encher de ficheiros o hosting, enlazámolo desde o servidor dropbox.com

Audio mp3: http://atio.es/fi/parrot.mp3

Audio ogg: http://atio.es/fi/parrot.ogg

5.- clic en HTML, e na fiestra que aparece, copiamos o seguinte código html

<audio controls>
    <source src="http://atio.es/fi/parrot.mp3" type="audio/mpeg">
    <source src="http://atio.es/fi/parrot.ogg" type="audio/ogg">
</audio>

 

6.- Se o queremos un pouco máis completo, con opción subir volume, pausar etc, podemos pegar o seguinte código:

 

<audio id="player" controls>
    <source src="http://atio.es/fi/parrot.mp3" type="audio/mpeg">
    <source src="http://atio.es/fi/parrot.ogg" type="audio/ogg">
</audio>

<div>
 <button onclick="document.getElementById('player').play();">Reproducir</button>
 <button onclick="document.getElementById('player').pause();">Pausa</button>
 <button onclick="document.getElementById('player').volume += 0.1;">Subir Volumen</button>
 <button onclick="document.getElementById('player').volume -= 0.1;">Bajar Volumen</button>
</div>

 Para ver máis opcións, pode visitar o seguinte enderezo, de Genbeta no cal explican polo miúdo máis opcións.

 

Diminuir o peso dun vídeo e publicalo en Drupal

Submitted by martin on Lun, 06/10/2019 - 08:29

Aínda que existen moitas maneiras de baixar o peso, é dicir os megabytes dun vídeo, deixo por aquí o método que emprego eu.

1. HandBrake

En Source escollemos o vídeo que desexamos baixarlle o tamaño

source.png

Na pestana Summary indícanos as dimensión que ten o vídeo. Neste exemplo ten 1920*1080 px. Pero ocupa 160 mb. Deberemos de baixarlle o tamaño, basicamente para non arruinarlle o ancho ancho de banda aos usuario que queiran visualizalo.

Pinchamos en Picture

picture.png

En Storage Geometry, baixamoslle o tamaño ata o desexado. Con un width de 512 mantén unha visualización moi boa. Ao ir baixando o ancho, automaticamente xa adapta o alto (height). Tamén deberemos definir o nome do ficheiro e o cartafol de saída. Fixámonos que o Handbrake cambia a extensión a m4v.

novasdimensions.png

Finalmente clic en Start, para que faga a conversión de tamaño. O novo tamaño do vídeo é de 33.4 Mb. Procedemos agora co ffmulticonverter a convertilo nun ficheiro mp4

2. ffmulticonverter

Empregaremos este software para convertir a extensión m4v a mp4. Se non o temos instalado, podémolo facer coa seguinte instrución:

su root

apt install ffmulticonverter

Engadimos o ficheiro que nos gardou o Handbrake. Clic en Engadir. En converter, escollemos a extensión mp4. Eliximos o cartafol de saída. Finalmente clic en Converter.

ffmulti.png

Con este software poderíamos evitar empregar o Handbrake, pois pinchado en Máis podemos observar que podemos cambiarlle o tamaño directamente. Sen embargo entendo que é máis sinxelo co Handbrake.

O tamaño final deste vídeo exemplo é de 13.2 Mb, tamaño máis razonable.

3. Publicalo en Drupal

Creamos un novo contido, tipo páxina.

paxina.png

Engadimos o título da nova. Seguindamente en ficheiros adxuntos, subimos ao servidor o vídeo

ficheirosadxuntos.png

Desmarcamos o check de Lista. Se nos fixamos aparece debaixo do cadro o enderezo URL no cal está publicado o vídeo. Neste exemplo é o seguinte: http://www.edu.xunta.gal/centros/ceiplabartapose/system/files/AS%C3%8D%20SE%20FIXO_1.mp4

 

Subimos novamente e prememos en "Desactivar texto enriquecido"

texto_enriquecido.png

E pegamos o seguinte código, pero en src debemos de inserir a url na cal se atopa o vídeo encomillado

<div>
<video width="512" height="288" controls="controls">
<source src="http://www.edu.xunta.gal/centros/ceiplabartapose/system/files/AS%C3%8D%20SE%20FIXO_1.mp4" type="video/mp4" />
O teu navegador non soporta este vídeo.
</video>
</div>

Finalmente clic en Gardar. E este sería o resultado:

resultado_video.png

Outro software alternativo para diminir o tamaño dun vídeo: DEVEDE

apt install devede

Engadir un vídeo

Submitted by martin on Lun, 06/10/2019 - 08:27

 

Moitos centros colgan os seus vídeos en servizos como youtube, e enlázanos segundo o explicado  no apartado

Neste apartado vamos a ver como subilos vídeos ó servidor (para non encher o servidor con ficheiros de vídeo, agrego os mesmos á carpeta pública de Dropbox e enlazámolos, como se estiveran no propio servidor).

1. Descargamos o ficheiro en mp4 que subín á carpeta pública de Dropbox

http://atio.es/fi/video.mp4

2. Instalamos e abrimos o software FF Multi Converter

sudo apt-get install ffmulticonverter

No caso de empregar o sistema operativo Windows, pode sernos útil o Handbrake ou o FormatFactory:

http://pcfreetime.com/formatfactory/index.php?language=es

https://handbrake.fr/downloads.php

3. Convertemos o formato mp4 que descargamos no apartado 1 en formato ogv e en formato webm

Velaquí quedan os enlaces dos ficheiros no servidor de dropbox:

formato mp4: http://atio.es/fi/video.mp4

formato webm: http://atio.es/fi/video.webm

formato ogv: http://atio.es/fi/video.ogg

4. Creas unha nova páxina, titulada "Costa da Morte". Endades en etiquetas "Costa da Morte", e clic en HTML. Pegas o seguinte código:

<div>
<video width="320" height="240" controls="controls">
<source src="http://atio.es/fi/video.webm" type="video/webm" />
<source src="http://atio.es/fi/video.ogg" type="video/ogg" />
<source src="http://atio.es/fi/video.mp4" type="video/mp4" />
O teu navegador non soporta este vídeo.
</video>
</div>

 

 

5. Gardala páxina.

 

 

 

 

Engadir un vídeo adaptable a dispositivos móbiles

Submitted by martin on Lun, 06/10/2019 - 08:25

En moitas ocasión non é previsible controlar o tamaño que debe de ter un vídeo á hora de engadilo ao Drupal. Isto ocorre nalguhas resolucións xa que as dimensións do vídeo superan o ancho dispoñible, ou no caso de que haxa cambios estrutura dos bloques, pasando de unha columna a dúas.

Para darlle remedio a este problema, debemos de empregar os estilos CSS.

 

A. UN VÍDEO DE YOUTUBE

 

1. Escollemos o vídeo de youtube desexado. Clic en compartir e posteriormente en inserir. Obtemos un código  html como o seguinte:

<iframe width="560" height="315" src="https://www.youtube.com/embed/9aksj92T41Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Se nos fixamos, como width é de 560px e o height é de 315, a relación ancho con respecto ao alto é 16:9. Se dividimos 9/16=0.5625, que ven a ser o 56.25%, que é a relación que engadimos ao padding-bottom. Se a relación entre ancho e alto fose 4:3, como padding-top sería do 75% (3/4=0.75, é dicir o 75%)

2. Deste código eliminamos as dimensións de ancho de alto (width e height), quedado así:

<iframe src="https://www.youtube.com/embed/9aksj92T41Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

3. Inserirmos este código dentro do body do seguinte código html, quedando así:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .video-responsive{
            position:relative;
            overflow:hidden;
            padding-bottom:56.25%;
        }
        .video-responsive iframe{
            width:100%;
            height:100%;
            position:absolute;
            top:0;
            left:0;
        }    
    </style>
</head>
<body>

        <div class="video-responsive">
                <iframe src="https://www.youtube.com/embed/9aksj92T41Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>

    
</body>
</html>

 

B. UN VÍDEO SUBIDO AO DRUPAL COMO DOCUMENTO ADXUNTO

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <style>
    .video-responsive {
        position: relative;
        margin:0 auto;
        height: 0;
        overflow: hidden;
        padding-bottom: 56.25%;
        position: relative;
    }
    .video-responsive video {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left:0;        
    }
    </style>
</head>

<body>
    <div class="video-responsive">
        <video controls="controls">
            <source src="http://www.edu.xunta.gal/centros/crasantacomba/system/files/CESTA%20VIAXEIRA%20DE%20OVOS.mp4" type="video/mp4" />
            O teu navegador non soporta este vídeo.
            </video>
    </div>
</body>
</html>

 

Inserir un vídeo de Youtube

Submitted by martin on Lun, 06/10/2019 - 08:20

1.- Creamos unha nova páxina titulada "Conferencia Gunter Pauli" e vinculámola ó enlace da práctica 04, do bloque exercicios.

2.- Copiamos e pegamos no inicio da páxina o enderezo do vídeo: http://youtu.be/tDHAmONYNK0

3.- Creamos un hipervínculo á mesma páxina. Para iso seleccionamos o texto copiado, e facemos un clic en insertar/editar hipervínculo

 

 

4.- Clic en insertar/editar medio embebido, e pegamos na URL o enderezo anterior: http://youtu.be/tDHAmONYNK0

 

 

5.- Queda do seguinte xeito, pero non hai que preocuparse, pois ó pinchar en feito, visualizase de forma correcta

RESULTADO


 

Subscribe to Vídeo