> 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

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.

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 participer à la discussion.
Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !
Recevoir PC Astuces par e-mail


La Lettre quotidienne +226 000 inscrits
Avec l'actu, des logiciels, des applis, des astuces, des bons plans, ...

Les bonnes affaires
Une fois par semaine, un récap des meilleurs offres.

Les fonds d'écran
De jolies photos pour personnaliser votre bureau. Une fois par semaine.

Les nouveaux Bons Plans
Des notifications pour ne pas rater les bons plans publiés sur le site.

Les bons plans du moment PC Astuces

Tous les Bons Plans
69,90 €Boîtier PC ATX Fractal Design Meshify C avec vitre en verre trempé à 69,90 €
Valable jusqu'au 23 Janvier

Cdiscount solde le très bon boîter moyen tour Fractal Design Meshify C avec panneau latéral en verre trempé à 69,90 € alors qu'on le trouve ailleurs à plus de 95 €. Intelligemment conçu, le boîtier Meshify C de Fractal Design s'adresse avant tout à toutes les personnes recherchant un boîtier silencieux prêt à recevoir un système puissant et expansible de refroidissement par air ou par liquide mais également à ceux qui recherche un boîtier au look ravageur. 

Combinant design, espace et aération, le Meshify C peut accueillir jusqu'à jusqu’à 2 disques durs 3.5" HDD/SSD (et 3 x 2.5" SSD), une alimentation ATX, une carte graphique de plus de 315 mm et des possibilités de refroidissement allant de 7 ventilateurs de 120 mm ou 140 mm à du watercooling (240 mm au dessus, 360 mm en façade).


> Voir l'offre
684,61 €Acer Nitro 5 (15,6'' FHD, Ryzen 5,8 Go, SSD 512Go, GTX 1650, Windows 10) à 684,61 €
Valable jusqu'au 22 Janvier

RueDuCommerce solde l'ordinateur portable Acer Aspire Nitro AN515-44-R838 qui passe à 684,61 € au lieu de 829 €. Ce portable dédié aux joueurs dispose d'un écran 15,6 pouces FHD 1920 x 1080, d'un processeur AMD Ryzen 5 4600H (6 coeurs), de 8 Go de mémoire RAM (1 slot de libre), d'un SSD de 512 Go et d'une carte graphique Nvidia GeForce GTX 1650 avec 4 Go de mémoire. Le tout tourne sous Windows 10 que vous pourrez passer à Windows 11.


> Voir l'offre
15,97 €Carte mémoire SDXC SanDisk Extreme 64 Go à 15,97 €
Valable jusqu'au 25 Janvier

Fnac fait une promotion sur la carte mémoire SDXC SanDisk Extreme 64 Go à 15,97 €. Cette carte mémoire est certifiée classe 10 U3 et autorise des débits de 70 Mo/s en capture et 150 Mo/s en transfert.


> 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