Popin et video [Résolu]

bzzt 6 Messages postés lundi 30 décembre 2013Date d'inscription 3 janvier 2014 Dernière intervention - 30 déc. 2013 à 16:53 - Dernière réponse : bzzt 6 Messages postés lundi 30 décembre 2013Date d'inscription 3 janvier 2014 Dernière intervention
- 3 janv. 2014 à 11:10
Bonjour, alors voilà mon problème me semble assez simple, mais je ne connais pas encore je js pour m'en sortir tout seul.
J'ai créé une interface avec une seule page, et des popin qui s'incrustent une fois appelés; ils peuvent contenir des videos, et lorsque je ferme le popin, la video continue de se lire...ce qui est fort ennuyeux!! donc comme faire ???
Afficher la suite 

Votre réponse

10 réponses

jordane45 21080 Messages postés mercredi 22 octobre 2003Date d'inscriptionContributeurStatut 21 mai 2018 Dernière intervention - 30 déc. 2013 à 18:14
0
Utile
Bonjour,

Pour pouvoir t'aider il faudrait déjà que tu nous montres le code que tu utilises.....

principalement celui qui te permet de lancer la lecture de tes vidéos.
bzzt 6 Messages postés lundi 30 décembre 2013Date d'inscription 3 janvier 2014 Dernière intervention - 30 déc. 2013 à 18:16
c'est fait!!
jordane45 21080 Messages postés mercredi 22 octobre 2003Date d'inscriptionContributeurStatut 21 mai 2018 Dernière intervention - 30 déc. 2013 à 18:20
Commenter la réponse de jordane45
bzzt 6 Messages postés lundi 30 décembre 2013Date d'inscription 3 janvier 2014 Dernière intervention - Modifié par kazma le 30/12/2013 à 22:23
0
Utile
Alors:

j'appelle mon pop depuis ma page principale via un bouton:

<a class="picto_adduction"href="#pop_adduction"target="_self"></a>

et j'utilise la pseudo class target pour afficher mon pop :

.pop {

opacity: 0;

}

.pop:target {

opacity: 1;

}

le contenu de mon pop est une iframe contenant une source html dans laquelle se trouve ma video :

<div class="video">

<video width="480" height="270" autobuffer controls=yes >

<source src="video/chomage_canal_2013.mp4" type="video/mp4" />

</video>

Et enfin mon bouton "fermer" se trouve dans la div qui contient l'iframe appelée :

<div id="fermer"> <a href="#tout"target="_self"><img src="pictos/fermer.png"></a></div>

Voilà, avec 0% de javascript ça fonctionne, sauf bien sur l'arrêt de ma video si je clique sur fermer!
Commenter la réponse de bzzt
jordane45 21080 Messages postés mercredi 22 octobre 2003Date d'inscriptionContributeurStatut 21 mai 2018 Dernière intervention - Modifié par jordane45 le 30/12/2013 à 18:27
0
Utile
Tu peux essayer de "détruire" le conteneur video avant de fermer le popup.

//Rajout d'un ID pour ton DIV
<div id='ConteneurVideoPlayer' class="video">
 <video width="480" height="270" autobuffer controls=yes >
  <source src="video/chomage_canal_2013.mp4" type="video/mp4" />
 </video>
</div> 

// Le script Javascript
<script type="text/javascript">
function closeVideo(){
 document.getElementById('ConteneurVideoPlayer').innerHTML ="";
}
</script>


//Ajout d'un ONCLICK à ton lien de fermeture.
<div id="fermer"> 
 <a href="#tout" target="_self" onclick="closeVideo();">
  <img src="pictos/fermer.png">
 </a>
</div> 



Cordialement,
Jordane
Commenter la réponse de jordane45
bzzt 6 Messages postés lundi 30 décembre 2013Date d'inscription 3 janvier 2014 Dernière intervention - 30 déc. 2013 à 21:10
0
Utile
Désolé pour le code, je ferai mieux la prochaine fois ;)
Par contre ta solution ne fonctionne pas; Il ne faut rien rajouter entre certaines parenthèses laissées vides? question bête je sais, mais bon, vu que je ne connais pas js, tu aurais pu croire que je sache remplir certains espaces vides! Ce n'est pas le cas, je suis juste capable de coller tes bouts de code au bon endroit. C'est à dire que là précisément le seul doute possible était pour // Le script Javascript que j'ai coller dans le head de ma page contenant le bouton fermer; puis cela ne fonctionnant pas, dans le head de la page contenant la video; et toujours rien...

Le truc qui t'as peut-être échappé c'est que ma video est dans une page html appelée via une iframe, et j'imagine que cela à son importance, car le bouton "fermer" n'est pas dans cette page html. Mais j'ai essayé de le mettre et ça ne change rien. A part que ça ne ferme plus du tout mon pop...

Bref si tu as une autre idée je suis preneur!!
Et merci du temps que tu m'as accordé déjà ;)
Commenter la réponse de bzzt
bzzt 6 Messages postés lundi 30 décembre 2013Date d'inscription 3 janvier 2014 Dernière intervention - 31 déc. 2013 à 10:45
0
Utile
Affaire résolue!!

Je suis tombé sur un script permettant de charger et decharger ma balise video :
function LoadVideo()
{
document.getElementById('video').src='mavideo.mp4';
}
function deleteVideo()
{
document.getElementById('video').src='';


Mon bouton 'fermer' sert à la fois pour fermer le pop avec un simple history.back() + un deletevideo() pour décharger le contenu.
Et mes boutons d'ouverture, le lien href + un loadvideo()

Et le tour est joué! Bon j'ai quand même dû rapatrier mes iframe dans ma page générale, sinon ça ne marche pas, donc petite contrainte ergonomique, car je trouve ça plus simple de gérer le contenu dans un autre fichier html, mais bon, moindre mal.
Autre problème, c'est que cela me limite à un seul format de chargement video > document.getElementById('video').src='mavideo.mp4';
A moins qu'il y ai un moyen de mettre plusieur format????

Si tu as une idée...
Commenter la réponse de bzzt
jordane45 21080 Messages postés mercredi 22 octobre 2003Date d'inscriptionContributeurStatut 21 mai 2018 Dernière intervention - 31 déc. 2013 à 11:26
0
Utile
Autre problème,
Donc autre question.... celle-ci étant résolue, merci de cliquer sur le tag RESOLU en haut puis ouvre une nouvelle discussion pour cette nouvelle question...

Toutefois, le moyen que tu as mis en place pour résoudre ton souci utilise le même procédé que celui que je t'ai proposé.. tu détruits le conteneur video. Niquel.

Pour ta nouvelle question... je pense que le plus simple est de créer dynamiquement ton conteneur (vidéo / Image..) en javascript directement..

En utilisant la propriété INNERHTML tu peux remplacer le code HTML d'un élément (un div par exemple) par celui qui t'interesse.
bzzt 6 Messages postés lundi 30 décembre 2013Date d'inscription 3 janvier 2014 Dernière intervention - 3 janv. 2014 à 11:10
Merci Jordane,

En effet ta solution semble être du même ordre, et la prochaine fois je procéderai surement ainsi. En fait pour bien comprendre, ce qui me bloquait c'est que je cherchais à agir sur un fichier html externe, donc le JS ne fonctionnait pas? c'est exact?
J'ai maintenant rapatrié le html concerné directement dans ma page principale, donc cela fonctionne parfaitement.

J'aurai une autre question concernant toujours la balise video et du JS associé pour la controler, alors plutôt que d'ouvrir une autre discussion, je le fais ici, c'est plus simple pour moi, à moins que cela ne pose un souci, tu me diras!

Alors voilà :
un de mes pop-in contient une video avec un autoplay, donc quand je charge ma page de lancement et bien la video se lance évidemment! ce qui est ennuyeux. Donc j'imagine qu'un mini bout de script va me sortir d'affaire!?
Je ne sais pas écrire en JS mais la logique de son contenu serait la suivante:
-au chargement de mapage.html alors
-contenu de class="mavideo" -> src=' '
je pense qu'il faudrait passer par une source vide car la fonction autoplay ne supporte pas le 'yes' ou 'no'.

Voilà, si tu te sens de me filer encore un coup de code, ça me ferait bien commencer l'année!! ;)
Commenter la réponse de jordane45
@karamel 1655 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 19 avril 2018 Dernière intervention - 31 déc. 2013 à 14:48
0
Utile
on peut faire aussi comme ceci

document.getElementById('video').pause()
Commenter la réponse de @karamel

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.