El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Contingut del curs

Incrustar vídeos en una pàgina web és una tècnica essencial per enriquir el contingut i fer-lo més interactiu i atractiu per als usuaris. En aquest tema, aprendrem com afegir vídeos a les nostres pàgines HTML utilitzant diferents mètodes.

Contingut del tema

Utilitzant l'etiqueta <video>
Atributs de l'etiqueta <video>
Incrustant vídeos de YouTube
Exercicis pràctics

Utilitzant l'etiqueta `<video>`

L'etiqueta <video> d'HTML5 permet incrustar vídeos directament en una pàgina web. Aquesta etiqueta és molt poderosa i flexible, permetent-nos controlar la reproducció del vídeo, afegir subtítols, i molt més.

Exemple bàsic

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Incrustant Vídeos</title>
</head>
<body>
    <h1>Exemple de Vídeo</h1>
    <video width="320" height="240" controls>
        <source src="video.mp4" type="video/mp4">
        El teu navegador no suporta l'etiqueta de vídeo.
    </video>
</body>
</html>

Explicació del codi

<video width="320" height="240" controls>: L'etiqueta <video> defineix un contenidor per a la reproducció de vídeo. Els atributs width i height defineixen la mida del vídeo. L'atribut controls afegeix controls de reproducció com play, pause, etc.
<source src="video.mp4" type="video/mp4">: L'etiqueta <source> especifica la ruta del vídeo i el seu tipus MIME.
El teu navegador no suporta l'etiqueta de vídeo.: Aquest text es mostrarà si el navegador no suporta l'etiqueta <video>.

Atributs de l'etiqueta `<video>`

L'etiqueta <video> té diversos atributs que ens permeten personalitzar la reproducció del vídeo:

Atribut	Descripció
`src`	Especifica la ruta del fitxer de vídeo.
`controls`	Afegeix controls de reproducció (play, pause, etc.).
`autoplay`	El vídeo es reprodueix automàticament quan la pàgina es carrega.
`loop`	El vídeo es reprodueix en bucle.
`muted`	El vídeo es reprodueix sense so.
`poster`	Especifica una imatge que es mostra abans que el vídeo es reprodueixi.

Exemple amb més atributs

<video width="320" height="240" controls autoplay loop muted poster="poster.jpg">
    <source src="video.mp4" type="video/mp4">
    El teu navegador no suporta l'etiqueta de vídeo.
</video>

Incrustant vídeos de YouTube

YouTube proporciona una manera fàcil d'incrustar vídeos utilitzant un iframe. Això ens permet afegir vídeos de YouTube a les nostres pàgines web sense haver de descarregar-los.

Exemple d'incrustació de YouTube

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Incrustant Vídeos de YouTube</title>
</head>
<body>
    <h1>Vídeo de YouTube</h1>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>

Explicació del codi

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>: L'etiqueta <iframe> s'utilitza per incrustar el vídeo de YouTube. Els atributs width i height defineixen la mida del vídeo. L'atribut src conté l'URL del vídeo de YouTube. Els atributs allow i allowfullscreen permeten funcionalitats addicionals com la reproducció automàtica i la visualització a pantalla completa.

Exercicis pràctics

Exercici 1: Incrustar un vídeo local

Crea una pàgina HTML que incrusti un vídeo local utilitzant l'etiqueta <video>.
Afegeix controls de reproducció i una imatge de pòster.

Solució

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vídeo Local</title>
</head>
<body>
    <h1>Vídeo Local</h1>
    <video width="320" height="240" controls poster="poster.jpg">
        <source src="video.mp4" type="video/mp4">
        El teu navegador no suporta l'etiqueta de vídeo.
    </video>
</body>
</html>

Exercici 2: Incrustar un vídeo de YouTube

Crea una pàgina HTML que incrusti un vídeo de YouTube utilitzant un iframe.
Assegura't que el vídeo es pugui veure a pantalla completa.

Solució

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vídeo de YouTube</title>
</head>
<body>
    <h1>Vídeo de YouTube</h1>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>

Conclusió

Incrustar vídeos en les nostres pàgines HTML és una tècnica essencial per enriquir el contingut i fer-lo més atractiu. Hem après a utilitzar l'etiqueta <video> per afegir vídeos locals i a incrustar vídeos de YouTube utilitzant un iframe. A més, hem explorat diversos atributs que ens permeten personalitzar la reproducció dels vídeos. Amb aquests coneixements, estem preparats per crear pàgines web més dinàmiques i interactives.

Curs d'HTML

Mòdul 1: Introducció a l'HTML

Mòdul 2: Formatació de text en HTML

Mòdul 3: Enllaços i mitjans en HTML

Mòdul 4: Taules en HTML

Mòdul 5: Formularis en HTML

Mòdul 6: Elements semàntics d'HTML5

Mòdul 7: Tècniques avançades d'HTML

Mòdul 8: Integració d'HTML i CSS

Mòdul 9: Disseny web responsiu

Mòdul 10: Millors pràctiques i accessibilitat

Mòdul 11: Projecte: Construint un lloc web complet

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència