Bonsoir,

J'ai une page php avec plusieurs lien vidéo, je cherche a mettre a jour une autre page (qui inclus le lecteur, la synopsis ect ...).

Pour être plus clair je clic sur une vidéo qui m'envoi vers ma page "ex: playervideo.php" qui se met a jours avec les informations indiqué dans le JS.

j'ai cherché sur le Web, mais difficile de trouvé la bonne formulation.

Merci de votre aide

Bonjour,

Une solution serait d'inclure un formulaire pour chaque vide de la page de départ, avec les valeur à transmettre dans des champs de type "hidden", qu'on récupère dans la variable de type tableau $_POST dans la page playervideo.php

Mais question subsidiaire, d'où proviennent ces données ? généralement, elles proviennent d'une Base de Données, et dans ce cas il suffit d'indiquer l'ID de la vidéo cliquée dans un simple lien de la forme 

playervideo.php?id=<?php echo $video_id; ?>

pour chaque video (un simple lien href standard), et dans la page liée playervideo.php, on récupère l'id dans la variable $_GET, et on lit dans la BDD les données de cette vidéo

Sinon d'où proviennent ces données ?

Je n'est aucune base en php, ni en base de donné (dommage puisque mon serveur maison le prend en charge),

je bidouille, je pensai pouvoir utilisé quelque chose du genre 

<a onclick="f1()" ><img src="films.jpg" width="150" height="210" alt=""/></a>

et dans le JS

function f1() {

location.href="playerfilms.php"

    document.getElementById("film").src = "film.mp4";

document.getElementById("player").poster = "film.jpg";

    document.getElementById("player").load();

}

Désolé

-
Edité par MickaëlT 12 octobre 2017 à 20:32:19

Je suis mal barré si je comprend bien

Hello,

Pas obligatoirement mal barré ! Si j'ai bien compris :

on a une page d'accueil avec des liens vers des vidéos (sous forme d'une vignette et d'un titre, par exemple), il faut que chaque lien amène à la page de détail de la video. Donc il faut une page de détail qui affiche la vidéo cliquée et diverses infos sur cette vidéo.

Combien de liens vidéos sur la page d'accueil, autrement dit combien de vidéos prévues ?

On peut faire quelque chose en Javascript, à défaut d'un langage serveur

J'ai environ une vingtaine de vidéos pour le moment.

Dans ma page ou il y aura le lecteur y aura des informations comme, la Synopsis, le réalisateur, date de sortie ect ..

OK on peut faire quelque chose en Javascript, ce serait mieux avec un langage serveur, par exemple en PHP/MySQL

1 Les liens d'origine pour 3 videos :

<a href="detail_video.html?video=0">Seven Sisters</a>
<a href="detail_video.html?video=1">Les Proies </a>
<a href="detail_video.html?video=2">Le Redoutable</a>

La page detail_video.html va contenir les données des vidéos sous forme d'un tableau multi-dimensionnel javascript,
on va tout mettre dans un script externe qu'on appellera en bas de la page HTML.

Le tableau multidimensionnel :

var videos = [

// Seven Sisters
{'nom':"Seven Sisters",
'realisateur':"Tommy Wirkola",
'duree':123,
'description':"Film de science fiction bla bla bla",
'acteurs':"Glenn Close, Willem Dafoe, Noomi Rapace"},

// Les Proies
{'nom':"Les Proies",
'realisateur':"Sofia Coppola",
'duree':93,
'description':"Film dramatique bla bla bla",
'acteurs':"Colin Farrell, Nicole Kidman, Kirsten Dunst"},

// Le Redoutable
{'nom':"Le Redoutable",
'realisateur':"Michel Hazanavicius",
'duree':107,
'description':"Film biographique bla bla bla",
'acteurs':"Louis Garrel, Stacy Martin, Grégory Gadebois"}

];

il faut juste faire attention aux virgules, mais le principe est bon.

Ensuite il faut récupérer dans l'URL le numéro de la vidéo à utiliser (les tableaux en Javascript commencent toujours à 0), passé dans l'URL,
on repère la position du "=" et prend ce qu'il y a après jusqu'à la fin,

var str = window.location.href;
var pos = str.lastIndexOf("=");
var video_id = str.substring(pos+1);

video_id aura la valeur 0, 1 ou 2 selon le lien cliqué sur la page précédente et donc la valeur de 'video' dans l'url. 
Les éléments du film sont accessibles ainsi :

videos[video_id].nom;
videos[video_id].realisateur;
videos[video_id].duree;
etc.

maintenant c'est un jeu d'enfant d'afficher par exemple le titre

HTML

<h1 id="titre"></h1>

JS pour afficher le titre dans le <h1> :

document.getElementById("titre").innerHTML = videos[video_id].nom;

Il faut juste faire attention aux virgules finales dans le tableau multi dimensionnel ...

J'ai du mal mis prendre, j'arrive pas a le faire fonctionner, avez vous la possibilité de me partage les fichier prêt a l'emploi ?
Merci encore pour votre coup de main^^

Normalement, on ne fait ça ici, ce n'est pas un libre service de scripts gratuits, on aide les gens à avancer, à trouver leurs erreurs, on donne des conseils, on aiguille sur de bonnes pistes, etc. mais on ne fait pas le travail à leur place, encore une fois il n'y a pas ici de travailleur gratuits et corvéables, dispos pour faire le boulot à la place des autres,
tu penses que je vais passer encore du temps pour tes beaux yeux à trouver un système d'hébergement de fichiers gratuits, finaliser mes pages d'exemple et uploader le tout pour que tu n'aies plus qu'à copier/coller sans rien comprendre ? Alors que je t'ai donné tous les éléments ?

Franchement ça me met hors de moi de bon matin, je veux bien aider les gens dans la mesure de mes moyens mais pas de cette manière, désolé, tu as tout déjà sur un plateau : les liens appelants, le script js quasi terminé, avec des explications. 

Et "je n'arrive pas à le faire fonctionner", ça ne veut rien dire, c'est comme "M'sieur ça marche pas !" "Qu'est-ce qui marche pas ? " "Ben le truc, ça marche pas !"

il se passe quoi ? qu'est ce qui ne fonctionne pas ? qu'est ce que tu n'as pas compris ? Est-ce qu'il y a des points en javascript qui t'échappe ? 

Je suis sincèrement désolé.

J'ai pourtant essayer pendant quelques heurs "avec mon niveau 0",

je vais continué a suivre des tutos sur le web et évité de trop en demandé. 

Je tien quant même a te remercier pour l'aide que tu apporte à moi et a d'autre.

Cordialement.

Les 3 fichiers ici :

https://drive.google.com/open?id=0B8fLwngUV5d9OWFOTGEyV2RuOVk

-
Edité par ChrisLebure 14 octobre 2017 à 13:58:38

j'ai appris énormément grâce a toi.

j'ai réussi a l’intégré à ma page et à ajouter de nouveaux éléments.

// ---------------------------
// 1 initialisation
// ---------------------------

var videos = [

//0 Aladdin
{'nom':"Aladdin",
'realisateur':"John Musker, Ron Clements",
'duree':"1h30",
'genre':"Animation, Famille",
'synopsis':"Comment Aladdin, grâce à la felonie du grand vizir, va se procurer la lampe magique qui héberge le fameux génie et nous entraïner dans la plus étonnante des aventures.",
'acteurs':"",
'annee':"1993",
'player':"animations/Aladdin2.jpg",
'source':"animations/Aladdin.mp4"},

//1 Aladdin Le retour de Jafar
{'nom':"Aladdin Le retour de Jafar",
'realisateur':" Tad Stones, Alan Zaslove",
'duree':"1h09",
'genre':"Animation, Famille",
'synopsis':"Après un bref séjour dans la lampe magique, le sinistre Jafar souhaite se venger d'Aladdin, de Jasmine et du sultan, mais Iago, son perroquet le trahi, se sentant malaimé et maltraité par Jafar. Il va rejoindre Aladdin et ses amis pour essayer de prendre le pouvoir mais va ressentir peu à peu de l'amitié pour ses anciens ennemis. Pendant ce temps, Jafar a été libéré par Abis Mal, un voleur aussi incompétent que stupide, vouant aussi une féroce haine pour Aladdin.",
'acteurs':"",
'annee':"1994",
'player':"animations/Aladdin Le retour de Jafar2.jpg",
'source':"animations/Aladdin Le retour de Jafar.mp4"},

//2 Aladdin et le Roi des voleurs
{'nom':"Aladdin et le Roi des voleurs",
'realisateur':"Patty Jenkins",
'duree':"1h20",
'genre':"Animation, Famille",
'synopsis':"Tout le royaume d'Agrabah célèbre enfin le mariage d'Aladdin et Jasmine mais l'évènement est interrompu par Cassim et sa quarantaine de voleurs. Ces derniers pillent tout le palais, à la recherche de la mystérieuse main de Midas. Après ce larcin, les bandits disparaissent et Aladdin aidé par le Génie, Iago et son fidèle Abu décide de lancer à leur poursuite..",
'acteurs':"",
'annee':"1999",
'player':"animations/Aladdin et le Roi des voleurs2.jpg",
'source':"animations/Aladdin et le Roi des voleurs.mp4"},

//3 Alice au pays des merveilles
{'nom':"Alice au pays des merveilles",
'realisateur':" Hamilton Luske, Wilfred Jackson",
'duree':"1h15",
'genre':"Animation, Famille",
'synopsis':"Alors qu'elle travaille à ses leçons, Alice se laisse entrainer par le sommeil et tombe dans une profonde rêverie. Poursuivant un lapin très en retard elle accède au pays des merveilles où une suite d'aventures rocambolesques et insolites l'attendent. Tantôt rapetissée, tantôt gigantesque, Alice oscile au gré de ses rencontres entre la quête du merveilleux et l'expérience cauchemardesque.",
'acteurs':"",
'annee':"1951",
'player':"animations/Alice au pays des merveilles2.jpg",
'source':"animations/Alice au pays des merveilles.mp4"},

];

// -----------------------------------------------
// 2 récupération du numéro de la video dans l'URL
// -----------------------------------------------

var str = window.location.href;
var pos = str.lastIndexOf("=");
var video_id = str.substring(pos+1);

// --------------------------------
// 3 affichage des éléments du film  
// --------------------------------



document.getElementById("titre").innerHTML = videos[video_id].nom;
document.getElementById("realisateur").innerHTML = videos[video_id].realisateur;
document.getElementById("duree").innerHTML = videos[video_id].duree;
document.getElementById("acteurs").innerHTML = videos[video_id].acteurs;
document.getElementById("genre").innerHTML = videos[video_id].genre;
document.getElementById("player").src = videos[video_id].source;
document.getElementById("annee").innerHTML = videos[video_id].annee;
document.getElementById("player").poster = videos[video_id].player;
document.getElementById("player").title = videos[video_id].nom;
window.parent.document.title = videos[video_id].nom;
document.getElementById("synopsis").innerHTML = videos[video_id].synopsis;

Ça rend plutôt pas mal.

il me reste encore le plus dur, personnalisé le lecteur vidéo.

Je me sers + ou - de ce que j'ai appris avec toi pour intégrer à une même page toutes les vidéos d'une même saison de ma série préféré.

Je tiens encore a te remercier sans toi j'aurai crée une page pour chaque video

-
Edité par MickaëlT 15 octobre 2017 à 23:25:54

Très joli, avec les jacquettes des videos,

voici une nouvelle version, avec le array videos dans un script à part,
l'intérêt est qu'on peut du coup créer automatiquement la liste des videos,
voir la page videos.html et le script qui crée la liste : liste-videos.js

Donc tu pourrais créer plusieurs fichiers data.js, un pour chaque saison, si j'ai bien compris, il faudrait passer dans l'url le data à utiliser, à essayer

lien pour la V2 sur google drive : https://drive.google.com/open?id=0B8fLwngUV5d9N080YWRxOEdOS3M

j'ai eu un peu de mal comprend son fonctionnement, mais après quelque heurs

j'ai ressui a l’intégrer a mes pages c'est bien plus simple et rapide.

Pour mes sériés j'ai fait ça :

dans le html:

onclick="f1()" href="#"

et dans mon JS:

function f1() {
	document.location = "#Ep. 1 :  L'hiver vient";
    document.getElementById("s1e1").src = "series/got/S1E1 L'hiver vient.mp4";
    document.getElementById("player").load();
	document.getElementById('titre').innerHTML = "Ep. 1 :  L'hiver vient";
document.getElementById('titre2').innerHTML = "Ep. 1 :  L'hiver vient";
}

sa fonctionne parfaitement

Me reste plus qu'a trouve comment personnalisé le player par défaut  de chrome (bien trop blanc a mon gout  pour mon site).

Un énorme merci pour l'aide que tu m'as apportée.

oui ça marche bien, pense à mettre le sujet en "résolu" si c'est le cas

Pour personnaliser le player; voir Google : "personnaliser player video html5"

Exple : http://inserthtml.developpez.com/tutoriels/javascript/lecteur-video-personnalise/

Merci et a bientôt.