> Tous les forums > Forum des Webmasters
 Insérer une vidéo dans WordPressSujet résolu
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

zoulouman
 Posté le 24/07/2019 à 19:42 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Salut,

Désolé, je m'étais offert un peu de repos, et j'estime que c'étais pas volé.

C'est le souci avec Dailymotion, ils enchaînent les vidéos à la suite.
Je ne sais pas si il est possible de couper ça, il faudrait faire une recherche.
Google peut être ton ami quand il ne t'espionne pas.

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

Bonsoir,

Désolé, je m'étais offert un peu de repos...

Je t'en pris c'est déjà sympa de me répondre.

Ok pour Dailymotion cela vient de leur process. Ce n'est pas grave, en faite la solution que j'utilise actuellement est de ne récupérer que la vidéo qui m’intéresse et je la stocke sur le site.

Si j'avais pu faire un lien direct sans les vidéos enchaînées, cela m'aurait évité le stockage. Mais comme je ne pense pas en avoir trop à mettre ce n'est pas un pb.

Merci de ton aide

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 !


Les bons plans du moment PC Astuces

Tous les Bons Plans
289,59 €Disque dur externe Western Digital My Book Duo 12 To USB 3.1 à 289,59 €
Valable jusqu'au 25 Février

Amazon propose actuellement le disque dur externe Western Digital My Book 12 To USB 3.1 à 289,59 livré gratuitement. On le trouve ailleurs autour à partir de 380 €. Le My Book Duo est une solution de stockage RAID de bureau d’une très grande capacité, idéale pour stocker des photos, des vidéos, des documents et de la musique. Vous pourrez l'utiliser en mode RAID 0 pour des perfomances ultrarapides (vitesse de lecture séquentielle pouvant atteindre 360 Mo/s) ou bien en mode RAID 1 pour bénéficier d’une redondance et mettre vos données en miroir sur les disques durs installés dans le boîtier. Ce dernier comporte en effet 2 disques durs Western Digital RED de 6 To adaptés aux NAS et qui peuvent être récupérés pour être utilisés ailleurs. Sachant qu'un disque dur RED 6 To coûte au moins 200 €, l'achat du Western Digital My Book Duo 12 To peut aussi être une solution économique si vous avez besoin de 2 disques durs 6 To pour votre NAS.


> Voir l'offre
79,99 €Kit 5.1 Logitech Z607 bluetooth à 79,99 €
Valable jusqu'au 01 Mars

Amazon fait une promotion sur le kit d'enceintes 5.1 Logitech Z607 qui passe à 79,99 € livré gratuitement alors qu'on le trouve ailleurs autour de 125 €. Ce kit dispose d'un caisson de basses, d'une voie centrale et de 4 satellites offrant au total  une puissance de crête de 160 Watts et 80 Watts en puissance RMS. De quoi profiter pleinement de vos films et de vos jeux dans une pièce moyenne. D'autant que des câbles extra-longs (6,2 m) sont fournis pour les satellites arrières. Grâce à ses entrées 3.5mm et RCA, vous pourrez relier le kit à un PC, à une console de jeux, un lecteur DVD/Blu-Ray tandis que sa connexion bluetooth vous permettra de l'utiliser pour vos appareils sans fil. Vous pouvez même lui brancher directement une carte mémoire ou une clé USB et écouter la radio FM. Une télécommande (sans fil) vous permettra de contrôler tout cela. Une excellente affaire !


> Voir l'offre
64,13 €Disque dur externe portable Toshiba Canvio Basics 2 To USB 3.0 à 64,13 €
Valable jusqu'au 01 Mars

Amazon propose actuellement le disque dur externe portable Toshiba Canvio Basics 2 To USB 3.0 à 64,13 € seulement ! Avec ses 2 To et sa connectique USB 3.0 compatible USB 2.0, vous aurez de quoi stocker rapidement et emporter avec vous vos photos, vos films, etc.  La livraison est gratuite.


> Voir l'offre

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