> Tous les forums > Forum Forum des Webmasters
 Insérer une vidéo dans WordPress
Ajouter un message à la discussion
Page : [1] 
Page 1 sur 1
Pegase7845
  Posté le 24/06/2019 @ 22:58 
Aller en bas de la page 
Petit astucien

Bonjour à tous,

Je fais le suivi et la mise à jour d'un site réalisé sous WordPress.
Je souhaite mettre une vidéo visible directement sur une page. J'ai vu sur le site Alsacreations.com ICI qu'il fallait coder les vidéos dans 3 formats différents pour être compatible avec tous les navigateurs, à savoir : mp4, webm et ogg.

Ce qui pour mon site donnerait par exemple

<video poster="http://fnar.info/wp-content/uploads/2019/06/Point_information_2.png" controls="controls" width="100%" height="100%">

<source src="http://fnar.info/wp-content/uploads/2019/06/Point_information_2..mp4" />

<source src="http://fnar.info/wp-content/uploads/2019/06/Point_information_2..webm" />

<source src="http://fnar.info/wp-content/uploads/2019/06/Point_information_2..ogg" />

</video>

Effectivement, j'ai essayé, ça fonctionne.

Par curiosité et espoir de simplification j'ai supprimé les lignes concernant webm et ogg, ce qui donne

<video poster="http://fnar.info/wp-content/uploads/2019/06/Point_information_2.png" preload="auto" controls="controls" width="100%" height="100%">

<source src="http://fnar.info/wp-content/uploads/2019/06/Point_information_2.mp4" />

</video>

Cela fonctionne tout aussi bien et j'ai vérifié avec Edge, Internet Explorer, Chrome, Firefox, Opera sur PC. Ça fonctionne également sur mon smartphone sous Androïd.

Quelqu'un peut-il me dire si les fichiers *.webm et *.ogg sont indispensables et qu'utilisez-vous pour les convertir depuis un *.mp4

Autre question, si quelqu'un travaille avec un Mac peut-il faire l'essai ?

Page du site concerné : https://fnar.info/ensemble-pour-lautonomie/

Merci d'avance de vos réponses.

Pégase

Publicité
zoulouman
 Posté le 27/06/2019 à 18:13 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Salut,

L'article d'AlsaCréations date un peu (décembre 2014). Aujourd'hui, tous les navigateurs prennent en charge le MP4, saus Opera Mini et Firefox avec lequel l'accélération matérielle n'est pas prise en charge, il faut donc éviter la HD avec Firefox Androïd.

https://caniuse.com/#feat=mpeg4



Modifié par zoulouman le 27/06/2019 18:15
Pegase7845
 Posté le 27/06/2019 à 19:23 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Merci zoulouman de ton intervention.

Ton lien est très intéressant,

Aujourd'hui, tous les navigateurs prennent en charge le MP4,

ce qui veut dire que je n'ai pas à faire les transcodages en *.webm et *.ogg, cela va me faire du travail en moins : super !

Si tu as été sur le site tu auras vu qu'il était destiné principalement à des retraités, Certains ne sont pas jeunes y compris dans les responsables bénévoles qui ont besoin du site de la FNAR pour leur association. Beaucoup utilise Internet Explorer souvent sans savoir qu'il y a des alternatives

Je n'arrive pas à retrouver avec quelle version de Windows IE 9 est apparu. Le sais-tu ?

Merci encore et marche à l'ombre

Pégase

zoulouman
 Posté le 27/06/2019 à 19:55 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

C'est certain que tu vas gagner du temps avec un seul format de vidéos !
Sinon, le plus simple est aussi de passer par Youtube ou Daylimotion. Là au moins, pas de problèmes de compatibilité et de qualité. Si il n'y a pas de soucis de Copyright, bien sûr. Un fond sonore sous Copyright suffit à faire dégager une vidéo sauf pour Daylimotion qui est un peu moins "chatouilleux" que son compère Google.
Avec un hébergement classique, le débit risque d'être trop faible. Il faut faire un compromis entre qualité et débit, sinon la vidéo risque de "sauter" ou faire des pauses le temps que ça charge.
Enfin, c'est toi qui voit.

IE9 est sorti avec Vista et Win 7. Il peut être mis à jour jusqu'à la version 11.

Pegase7845
 Posté le 29/06/2019 à 13:41 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Merci de toutes tes informations,

Il me reste un problème, la vidéo que l'on diffuse est enregistré chez Dailymotion ici https://www.dailymotion.com/video/x6tqvh4

Dans un 1er temps je l'ai téléchargé et enregistré sur notre site et j'ai placé le code

<video preload="auto" controls="controls" width="100%" height="100%">
<source src="http://fnar.info/wp-content/uploads/2019/06/Point_information_2.mp4" />
</video>

Pas de pb, mais je souhaiterai ne pas télécharger cette vidéo sur notre site et avec un lien, aller la chercher directement chez Dailymotion, quelque chose du genre

<video preload="auto" width="100%" height="100%">
<source src="https://www.dailymotion.com/video/x6tqvh4" />
</video>

Mais cela ne fonctionne pas, la fenêtre est noir et le bouton play est grisé et inopérant. Par contre si je mets tout simplement le code

https://www.dailymotion.com/video/x6tqvh4

cela fonctionne, la vidéo apparaît bien dans la page mais dans ce cas je ne sais pas gérer la taille et le preload.

J'ai cherché en vain.

Merci de tes lumières

Bon WE

Pégase



Modifié par Pegase7845 le 29/06/2019 13:44
zoulouman
 Posté le 29/06/2019 à 14:57 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Salut,

Utilise tout bêtement un iframe : (pour les dimensions, c'est toi qui voit)

<iframe frameborder="0" width="800" height="450" src="https://www.dailymotion.com/embed/video/x6tqvh4" allowfullscreen title="Vidéo Dailymotion"></iframe>

Pegase7845
 Posté le 30/06/2019 à 14:48 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Merci zoulouman de tes lignes de code.

Je ne peux essayer aujourd'hui cette solution, car apparemment les serveurs de notre hébergeur sont en rideau, je ne peux me connecter au backoffice du site, ni au site d'ailleurs.

Dès que c'est réparé,je fais le test et je te tiens au courant

Merci et bon dimanche

Pégase

zoulouman
 Posté le 30/06/2019 à 19:18 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Par contre, regarde bien l'adresse dans l'iframe.
Avec dailymotion, il faut utiliser le mot clé embed.

Ce mot clé permet de n'afficher que la vidéo, pas la page dailymotion.

Pegase7845
 Posté le 30/06/2019 à 20:12 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Merci pour cette info complémentaire que je n'avais pas repéré.

J'ai fait un essai en local, cela semble fonctionné sauf que la vidéo commence par être fou et s'améliore au fil du temps Je pense que c'est du à la lenteur générale du fonctionnement en local et au chargement de la vidéo

J'ai aussi des petits pb avec les dimensions, les width="100%" height="100%" ne semble pas bien fonctionner je verrai cela plus tard.

Pégase

Publicité
zoulouman
 Posté le 30/06/2019 à 20:22 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Au lancement de la vidéo, réduits la qualité si tu as des problèmes de débit.

Pour les dimensions, donne une dimension fixe à l'iframe et joue sur la largeur écran (ou des DIV) :

<style>

frame, iframe, embed {

max-width: 100%;

}

</style>

Pegase7845
 Posté le 30/06/2019 à 20:41 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

OK bonne idée pour les dimensions, j'essaie dès que j'ai 5 minutes

zoulouman
 Posté le 01/07/2019 à 16:47 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Ok.

Pegase7845
 Posté le 07/07/2019 à 21:54 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Bonsoir,

Je reviens, le site est de nouveau opérationnel (pb de renouvellement de nom de domaine non payé...)

Sur le site avec la solution

<iframe frameborder="0" width="800" height="450" src="https://www.dailymotion.com/embed/video/x6tqvh4" allowfullscreen title="Vidéo Dailymotion"></iframe>

je n'ai pas de pb de flou au démarrage et de fluidité et pourtant de là où je me connecte je n'ai pas une connexion rapide (je suis à la campagne actuellement)

Je n'ai pas encore résolu le pb des dimensions.

Merci de ton aide

Pégase

Pegase7845
 Posté le 12/07/2019 à 14:16 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Bonjour

J'ai refait un essai, je n'arrive pas à utiliser ce code pour régler la largeur de l'écran.

<style>

frame, iframe, embed {

max-width: 100%;

}

</style>

A vrai dire je ne vois pas trop comment l'intégrer dans ce cas.
Désolé de poser une question probablement basique.

D'avance merci de ton aide

Pégase

Kensaon
 Posté le 19/07/2019 à 11:41 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Nouvel astucien

Hello,

Moi j'intègre des vidéos en utilisant youtube. Je rajoute un bout de code pour pas que les suggestions n'apparaissent en fin de vidéo. Voici le code html que j'utilise, la vidéo prend toute la largeur :

<div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;"><iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://www.youtube.com/embed/liendelavideo?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>



Modifié par Kensaon le 19/07/2019 11:42
Pegase7845
 Posté le 19/07/2019 à 13:35 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Bonjour et merci Kensaon de ton intervention.

J'ai appliqué ton code comme ci-dessous, et effectivement la vidéo prend toute la largeur quelque soit le support (PC Smartphone...) c'est exactement ce que je cherchais.

<div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;"><iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://www.dailymotion.com/embed/video/x6tqvh4" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

Par contre lorsque la vidéo s'affiche si je déplace la souris sur la droite des suggestions apparaissent et à la fin de la vidéo d'autres, indésirables, s'affichent !

As-tu une solution à me proposer ?

De plus, je n'ai pas bien compris la fonction "padding-bottom: 56.25%", surtout pourquoi mets-tu 56.25% et non pas 0

D'avance merci

Pégase

Page : [1] 
Page 1 sur 1

Vous devez être connecté pour poster des messages. Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !


Sujets relatifs
Insérer une vidéo dans mon site
besoin d'aide pour insérer une video dans SPIP
insérer une vidéo dans sa page web
insérer des données depuis un tableau dans une base
Javascript ne fonctionne pas dans mon site wordpress ?
Intégrer Vidéo / Wordpress.com
Insérer compteur dans partie privée
Comment insérer une gif dans un fichier html ?
Insérer du code dans une page php
Faille de sécurité dans le plugin SEO de WordPress
Plus de sujets relatifs à Insérer une vidéo dans WordPress
 > Tous les forums > Forum Forum des Webmasters