5549 sujets

Sémantique web et HTML

Bonjour à vous tous,

Je reviens vers vous parce que j'ai un soucis avec l'élément <vidéo> qui affiche l'encadré d'une vidéo mais ne la lance pas. C'est une vidéo qui fait partie de mon projet et donc, je vais la chercher dans mes ressources personnelles et c'est un fichier au format mp4. Voici le code HTML :
<video width="640" height="360" controls>
    <source src="../../medias/video-flexbox.mp4" type="video/mp4">
</video>
La vidéo en question est au format mp4 mais impossible de la lancer en cliquant sur le buton de lecture. J'obtiens cette image :
upload/1716200040-62242-capturedncran2024-05-20121350.png

Même chose avec la balise <iframe> où cette fois-ci je vais chercher la vidéo en question dans une plateforme externe. Voici le code HTML que j'utilise :
<iframe width="560" height="315" src="https://www.instagram.com/p/CxA3AIpArPf/?epik=dj0yJnU9SlVXdTdCaFdXY3pYV2N5a3BSUHVqV1JtV1ZWV0czQ24mcD0wJm49Q0ZVczZ6M2hiX05zYzhMeXFOdEFGdyZ0PUFBQUFBR1pMSG0w" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
J'obtiens ce résultat :
upload/1716200438-62242-capturedncran2024-05-20122007.png
Les deux cas se comportent comme s'il ne parvenait pas à trouver la vidéo au chemin indiqué mais j'ai vérifié plusieurs fois le chemin pour accéder à la vidéo, dans le premier cas, quand au second, j'ai simplement copié/collé l'adresse URL.

Quelqu'un saurait me dire pourquoi mon code ne fonctionne pas ?

Merci pour votre aide
Modifié par ObiJuanKenobi (20 May 2024 - 12:22)
Salut,
comme le dit drphilgood, ton code est bon, c'est très très certainement une question de chemin relatif/absolu.
Tu avais déjà posté au sujet des chemins. Une fois de plus, un fichier "Videos" ou "Medias" à la RACINE de ton site et
<src="Medias/ma_vidéo.mp4">

Pas de / avant Medias et attention aux accents sur le noms des vidéos ou dossiers. Tu n'est pas le seul à se faire prendre, ça arrive tous les jours.
Pour bien vérifier, copie l'adresse de ta vidéo (depuis les " du src jusqu'aux " de fermeture et mets ça dans la barre d'un navigateur, sans les ""). Si la vidéo ne s'ouvre pas, problème de chemin.
Alors, j'ai trouvé l'erreur. Dans le cas où j'utilisais l'élément <video>, le nom du fichier n'était pas bon, je confondais le tiret simple "-" avec le tiret bas underscore "_".
Par contre, l'élément <iframe> ne fonctionne pas. J'obtiens la capture écran montrée au début. Mais j'avais oublié de préciser que quand on survole l'emplacement de cette <iframe> on a cette information en plus qui s'affiche : "www.instagram.com n'autorise pas la connexion." Peut être qu'on ne peut pas utiliser les vidéos provenant de cette plateforme.
Modifié par ObiJuanKenobi (20 May 2024 - 15:03)
Modérateur
Bonjour,

Pour l'iframe, il faut rajouter "embed" dans l'url de la page instagram qu'on souhaite insérer. Par exemple, dans ton cas, la ligne ci-dessous semble fonctionner :
<iframe src="https://www.instagram.com/p/CxA3AIpArPf/embed/?epik=dj0yJnU9SlVXdTdCaFdXY3pYV2N5a3BSUHVqV1JtV1ZWV0czQ24mcD0wJm49Q0ZVczZ6M2hiX05zYzhMeXFOdEFGdyZ0PUFBQUFBR1pMSG0w"></iframe>

Amicalement,
ObiJuanKenobi a écrit :
Alors, j'ai trouvé l'erreur. Dans le cas où j'utilisais l'élément &lt;video&gt;, le nom du fichier n'était pas bon, je confondais le tiret simple "-" avec le tiret bas underscore "_".
Par contre, l'élément &lt;iframe&gt; ne fonctionne pas. J'obtiens la capture écran montrée au début. Mais j'avais oublié de préciser que quand on survole l'emplacement de cette &lt;iframe&gt; on a cette information en plus qui s'affiche : "www.instagram.com n'autorise pas la connexion." Peut être qu'on ne peut pas utiliser les vidéos provenant de cette plateforme.

Salut,
c'était donc bien un problème de chemin, le _ ou - faisant partie du chemin. Smiley cligne
Pour l'iframe, tu as la réponse en-dessous.
Bonne journée.
Merci parsimonhi, ça marche maintenant avec l'élément <iframe> mais je ne comprends pas pourquoi il faut ajouter "embed" dans l'URL, à quoi correspond-t-il ?
Modérateur
Bonjour,
ObiJuanKenobi a écrit :
Merci parsimonhi, ça marche maintenant avec l'élément <iframe> mais je ne comprends pas pourquoi il faut ajouter "embed" dans l'URL, à quoi correspond-t-il ?

C'est comme ça parce qu'instagram a voulu que ce soit comme ça : les urls avec le "embed" peuvent être utilisées dans des sites tiers comme le tien et celles sans le "embed" ne peuvent pas l'être (tout instagram n'est pas utilisable dans des sites tiers).

Il n'y a rien techniquement qui les obligeait à faire comme ça. C'est juste que ça les arrangeait que ce soit comme ça selon moi.

Amicalement,
Modifié par parsimonhi (21 May 2024 - 14:56)
@ObiJuanKenobi

Bonjour,
a écrit :
Merci parsimonhi, ça marche maintenant avec l'élément <iframe>

Et les deux autres personnes qui ont répondu à ta première question et ont donné la bonne piste (drphilgood et moi-même) ? Pas de remerciement pour elles ?
Certes, ce n'est pas écrit dans la charte du forum, mais on apprécie toujours.
Je comprends le moment, c'est une réponse peu-inclusive. Bongota et DrPhilGood vous avez été super(es) dans la résolution. On se reparle pour les ongles Smiley lol !