Recherche solution pour site Web affichage de vidéos Page HTML

Fermé
mikemnd Messages postés 2 Date d'inscription samedi 19 novembre 2016 Statut Membre Dernière intervention 20 novembre 2016 - 19 nov. 2016 à 19:52
dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 - 20 nov. 2016 à 11:26
Bonjour,

Mon problème est assez simple...enfin je crois...
J'ai un site web en Wordpress 4.6 dans lequel je crée des pages intégrant des vidéos positionnées sur vimeo.com ( Lien des vidéos déposées sur ce site.

J'aimerai pouvoir intégrer un seul lecteur vidéo HTML5, et des liens sous ce lecteur.
Chaque lien correspondra à une vidéo stockée sur viméo.com
Mon souhait : Un utilisateur clique sur un lien, la vidéo démarrer dans le lecteur HTML5 de la même page.
je peux avoir dans cette page 30 à 50 liens correspondants à des vidéos autoformation déposées sur vimeo.com.
SI quelqu'un pouvait m'aider pour réaliser çà..en Javascript ??? intégré dans la pahe html ?

Merci d'avoir pris le temps de lire ce message.
Merci pour votre aide dans tous les cas.
Clt Mike

2 réponses

dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 451
20 nov. 2016 à 09:45
Bonjour,

Je n'ai pas la solution en JavaScript, mais en PHP.
Si ça peut te servir, à placer dans un fichier vimeo.php :

<?php
empty($_POST['code']) ? $code = '' : $code = $_POST['code'];
?>

<div style="text-align: center">
<object><form action="vimeo.php" method="post" name="choix">
<p><select name="code" onChange="document.choix.submit();">
<option>Choisissez la vidéo</option>
<option value="133267312">Titre video1</option>
<option value="178430917">Titre video2</option>
<option value="135584424">Titre video3</option>
</select></p>
<noscript><p><input type="submit" value="OK"></p></noscript>
</form></object>
</div>

<p> </p>
<p> </p>

<?php
if ($code != '') {
?>
<p style="text-align: center;"><object type="text/html" data="https://player.vimeo.com/video/<?php echo $code; ?>" style="width:70%; height:400px;"></object></p>
<?php
}
?>


Tu peux placer ce fichier à la racine de ton site et l'insérer dans une page de ton site avec un <iframe> ou un <object>.

0
mikemnd Messages postés 2 Date d'inscription samedi 19 novembre 2016 Statut Membre Dernière intervention 20 novembre 2016
Modifié par mikemnd le 20/11/2016 à 10:20
Merci beaucoup dugenou,
Ton code php est super...
Seul détail, dans ma demande, j'ai exprimé souhaiter avoir des vidéos au choix sous mon lecteur vidéo html...
En fait, mauvaise déclinaison de choix de ma part...Je voulais dire :
1°) J'ai un lecteur vidéo HTML5 dans ma page html
2°) Dans la même page, je créé des liens url pour chaque vidéos déposées sur vimeo.com. Chaque lien activé par l'internaute devra activer la vidéo correspondante au lien concerné, et la lecture de la dite vidéo se faire uniquement dans le lecteur video situé dans la page en question.
Dans ma demande de départ j'avais indiqué des liens sous le lecteur vidéo, ce qui, dans ton code, représente les options liées au lecteur.
Ton code correspondait bien à ma demande initiale...

Mon besoin est celui que je viens de "resituer"...
Excuse moi...
Peux-tu m'aider avec un code approprié.

D'autre part quand tu dit que je dois mettre ce code dans la racine de mon site OK. Viméo me donne 2 types de liens dont un code iframe avec les caractéristiques du lecteur, taille, lien vimeo etc.....)
Je dois mettre ce code iframe dans ma page html en question ?
Je t'avoue jamais avoir été jusque là...Si tu pouvais éclaire ma lanterne sur ce point aussi...
D'avance encore un très grand merci. j'apprécie ton aide.
Cordialement.
Mike
0
dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 451
Modifié par dugenou le 20/11/2016 à 11:27
Si tu veux afficher des vidéos partagées chez Viméo, Youtube ou autres, tu n'as pas besoin d'un lecteur HTML5 sur ton site, tu utiliseras le lecteur de ces plates-formes de partage.

Le code fourni par Viméo, en <iframe> est utilisable, mais il ne répond pas à tes besoins, si j'ai bien compris, car tu aurais une fenêtre pour chaque vidéo, ce qui serait très lourd et pas très pratique pour tes visiteurs, surtout avec 50 vidéos.

Chaque vidéo chez Viméo correspond à un code chiffré, il n'y a que ce code qui change d'une URL à une autre. Dans mon code, le code correspond à la variable $code et la valeur de cette variable est précisée par la liste déroulante. Pour ajouter d'autres vidéos dans cette liste, il suffit d'ajouter une ligne <option> correspondant à la vidéo :

<option value="123456789">Titre video4</option>


Bien entendu, tu peux mettre le titre que tu veux à la place de Titre video4.

Concernant les options proposés, si tu en as besoin, tu peux les intégrer au code que je t'ai fourni, dans cette partie :

<p style="text-align: center;"><object type="text/html" data="https://player.vimeo.com/video/<?php echo $code; ?>" style="width:70%; height:400px;"></object></p>


Je te propose de mettre le fichier contenant mon code à la racine de ton site, car je suppose que tu ne peux/sais pas l'intégrer à une page en PHP de WordPress. C'est plus facile avec cette méthode, tu n'as qu'à l'insérer dans une page, en utilisant l'éditeur de WordPress.

Pour l'insérer, tu peux utiliser ce code :

<p style="text-align: center;"><object type="text/html" data="vimeo.php" style="width:70%; height:700px;"></object></p>
0