Ticker

6/recent/ticker-posts

Reproducir Video Con HTML5

Hadsonpar abril 23, 2024



Este tutorial revisaremos y desarrollaremos una página web aplicando el elemento HTML5 VIDEO con la finalidad de agregar videos a nuestras páginas.


Requisitos:

  1. Visual Studio Code.
  2. HTML5 y CSS3
  3. Chrome o Safari.
  4. Video MP4

Lo que veremos en este tutorial:

  1. Construir la página HTML5.
  2. Elemento HTML5 - Video.
  3. Construir el CSS para las páginas.
  4. Resumen.

1. Contruir la página HTML5.

Crear un nuevo archivo HTML de nombre video.html. En el siguiente bloque de código se ejecutará el video:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>HTML5 Element Video - Hadsonpar</title>
    <link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
    <!-- ***** HTML5 Element Video Start ***** -->
    <div class="main-banner" id="top">        
        <video autoplay muted loop id="bg-video"
             src="https://storage.googleapis.com/cms-storage-bucket/029113ae2cbbcf9493fe.mp4" type="video/mp4">
        </video>
        <div class="video-overlay header-text">
            <div class="caption">
                <h6>HTML5 Video</h6>
                <h2>Many Tutorials <a href="http://blog.hadsonpar.com/"><em>Blog</em></a></h2>
                <div class="main-button scroll-to-section">
                    <a href="http://blog.hadsonpar.com/2024/04/reproducir-video-con-html5.html">Reproducir Video Con HTML5</a>
                </div>
            </div>
        </div>
    </div>
    <!-- ***** HTML5 Element Video End ***** -->
</body>
</html>

2. Elemento HTML5 - Video.


Atributos Video:

autoplay: Atributo booleano; si esta se especifica, el video comenzará a reproducirse automáticamente tan pronto como sea posible al cargar la página web.

autobuffer: Atributo booleano; si se especifica, el video comenzará automáticamente incluso si no está listo para reproducirse de forma automática. 

buffered: Atributo que se puede leer para determinar qué intervalos de tiempo del multimedia se han almacenado en búfer, este atributo también contiene un objeto TimeRanges (en-US) .

controls: Controles para permitir que el usuario controle la reproducción del video, incluyendo volumen, búsqueda y pausar/reanudar reproducción.

height: La altura del área de visualización del vídeo en píxeles CSS.

width: La anchura del área de visualización del vídeo en píxeles CSS.

loop: Atributo booleano; si se especifica, al final del video retormará automáticamente al principio.

preload: El objetivo de este atributo enumerado es proporcionar una sugerencia al navegador sobre qué cree el autor que llevará a la mejor experiencia para el usuario. Se considera los siguientes valores:

  • none: sugiere bien que el autor cree que el usuario no tendrá que consultar ese video, bien que el servidor desea minimizar su tráfico; es decir, esta sugerencia indica que no se debe almacenar en caché este video.
  • metadatos: sugiere que aunque el autor piensa que el usuario no tendrá que consultar este video, es razonable capturar los metadatos (p. ej. longitud).
  • auto: sugiere que el usuario necesita tener prioridad; es decir, esta sugerencia indica que, si es necesario, se puede descargar el video completo, incluso aunque el usuario no vaya a usarlo.
  • la cadena vacía: que es un sinónimo del valor auto.

Si no está configurado, su valor predeterminado estará definido por el navegador (es decir, cada navegador puede elegir su propio valor predeterminado), aunque se aconseje que se establezca el valor inicial.

poster: Una URL que indica un marco de póster para mostrar el resultado hasta que el usuario reproduzca o busque. Si este atributo no se especifica, no se muestra nada hasta que el primer cuadro está disponible, entonces se muestra el primer marco como el marco de póster.

src: La URL del vídeo que se va a insertar.

También podrás optar por el usar el elemento <source> dentro del bloque de vídeo para especificar el video que se va a incrustar.

3. Construir el CSS para las páginas.

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div{
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}


header {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  background-color: #fff;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2 {
  margin-top: 0px;
  margin-bottom: 0px;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #0078FF;
  color: #fff;
}

::-moz-selection {
  background: #0078FF;
  color: #fff;
}

.main-button a {
  display: inline-block;
  font-size: 15px;
  padding: 12px 20px;
  background-color: #0078FF;
  color: #fff;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  transition: all .3s;
}

.main-button a:hover {
  background-color: #65ADFF;
}

/* 
---------------------------------------------
banner
--------------------------------------------- 
*/
.main-banner {
  position: relative;
}

#bg-video {
    min-width: 100%;
    min-height: 100vh;
    max-width: 100%;
    max-height: 100vh;
    object-fit: cover;
    z-index: -1;
}

#bg-video::-webkit-media-controls {
    display: none !important;
}

.video-overlay {
    position: absolute;
    background-color: rgba(35,45,57,0.8);
    top: 0;
    left: 0;
    bottom: 7px;
    width: 100%;
}

.main-banner .caption {
  text-align: center;
  position: absolute;
  width: 80%;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.main-banner .caption h6 {
  margin-top: 0px;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
}

.main-banner .caption h2 {
  margin-top: 30px;
  margin-bottom: 25px;
  font-size: 84px;
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
}

.main-banner .caption h2 em {
  font-style: normal;
  color: #0078FF;
  font-weight: 900;
}
/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/
@media (max-width: 992px) {

  .main-banner .caption h2 {
    font-size: 64px;
  }
}


3. Resumen.

El elemento vídeo de HTML5 indica al navegador que cargue un archivo de vídeo desde otra fuente, especificando la ubicación del archivo de vídeo, de forma similar a como un navegador carga un archivo de imagen (la imagen en sí no se almacena en el archivo HTML, sino que el navegador la saca de otro lugar). También se pueden incluir el ancho, la altura y otros atributos para indicar al navegador cómo debe mostrar el vídeo. Otro código de marcado puede indicar al navegador dónde colocarlo en la página.

La etiqueta de vídeo de HTML5 es <video>, y la etiqueta de cierre, de forma similar a otros elementos de HTML, es </video>.

Disponible en GitHub


Gracias nuevamente 😊; comentarios y apreciaciones son bienvenido, un fuerte abrazo para todos ✌...!!
Hadsonpar

Publicadas por Hadsonpar

Apasionado por las nuevas tecnologías, la investigación, los patrones de diseño y las buenas prácticas; con experiencia y participación en diversos proyectos de banca y seguros desde la etapa de análisis, diseño, desarrollo, implementación, testing y certificación.

Publicar un comentario

0 Comentarios