Play/Pause vidéo onclick

Par NdinhC, il y a 10 ans

Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

J'utilise ceci lien sur mon site pour réaliser un mode théatre. Niveau affichage tout est ok. Ce sont des iframes du lecteur twitch.

Ce que je veux

Et voilà le problème c'est que je voudrais que quand on ouvre le mode théâtre, la vidéo d'en dessous se mette sur pause et lorsqu'on ferme l'overlay, que la vidéo de l'overlay se mette sur pause. J'ai pu limiter la superposition de lecture des vidéos avec des &!autoplay mais si le visiteur lance la vidéo, puis ouvre le mode théâtre et lit la seconde vidéo, celle d'en dessous continue de tourner..

Comment puis-je faire pour régler ce problème ?

Merci :D

6 réponses

NdinhC, il y a 10 ans

Oh mon dieu merci beaucoup ! <3 Je testerai tout ça à tête reposée :) Parce que je suis un peu codeur du dimanche.. oui. voila.

NdinhC, il y a 10 ans

Merci, je vais essayer de comprendre mais je t'avouerai n'avoir aucune notion en javascript :/ Donc si quelqu'un peut m'expliquer stepbystep ou bien me rediriger vers un tuto.. J'aurai du apprendre le js plutôt que le C++ qui ont l'air de se ressembler un peu xP

Mais déjà histoire de voir si j'ai pigé l'idée, il faut que je donne un ID à mes vidéos (celle du mode théâtre et celle du non-mode théâtre)
Ensuite je devrais faire comprendre au script que lorsqu'on je clique sur mon bouton théâtre, ça doit mettre la vidéo1 sur pause et lorsque je clique sur le bouton fermeture, ça doit mettre la vidéo2 sur pause et remettre la vidéo1 sur play. D'ailleurs une fois que j'aurai compris le fonctionnement, je pense que ça sera pas trop compliqué de rajouter une ligne pour play la vidéo1 lorsque bouton fermeture est appuyé.

Réflexion :

Ceci sont les déclarations des variables video, theatre, boutontheatre,boutonfermeture

var video = document.getElementById("video"); var theatre = document.getElementById("theatre"); var bouton = document.getElementById("boutontheatre"); var boutonfermeture = document.getElementById("boutonfermeture");
NdinhC, il y a 10 ans

Oui merci, ça m'éclaircit un peu plus :) Du coup j'ai fais une esquisse, mais je vois pas à quoi mon btn theatre va me servir :

function vidplay() { var video1 = document.getElementById("video1"); var video2 = document.getElementById("video2"); var theatre_in = document.getElementById("theatre_in"); var btn_theatre = document.getElementById("btn_theatre"); var theatre_out = document.getElementById("theatre_out"); if(document.getElementById('theatre_in').clicked == true){ video1.pause(); video2.play(); if(document.getElementById('theatre_out').clicked == true){ video1.play(); video2.pause(); }

Qu'en pensez-vous ?

NdinhC, il y a 10 ans

Chouette :) Je testerai ça, et donc coté html, je fait de la sorte ? :

Vidéo 1 Twitch : <iframe id="video1" src...> Image bouton théâtre : <img id="theatre_in" ...>

C'est comme que ça marche ? :D

NdinhC, il y a 10 ans

Merci infiniment, si j'arrive à faire fonctionner la bête grâce à toi, j'apprends le Js :D
Bonne nuit

NdinhC, il y a 10 ans

J'ai réussi, je suis trop fort ... :')
j'ai utilisé la modification du src = en ajoutant soit &autoplay=1 pour play et &!autoplay pour pause (rien trouvé de mieux). J'ai fusionné les deux scripts play-pause&overlay pour avoir qu'un id pour deux actions et la c'est l'extase ! RENDU

Voici mon code si jamais quelqu'un tombe dessus un jour :

<script> // Quand theatre_in est pressé, play theatre & pause notheatre $(document).ready(function () { $('#theatre_in').on('click', function (ev) { $('#notheatre')[0].src += '&!autoplay'; $('#theatre')[0].src += '&autoplay=1'; ev.preventDefault(); }); }); // Quand theatre_out est pressé, pause theatre & play notheatre $(document).ready(function () { $('#theatre_out').on('click', function (ev) { $('#theatre')[0].src += '&!autoplay'; $('#notheatre')[0].src += '&autoplay=1'; ev.preventDefault(); }); }); // Overlay : on $( "#theatre_in" ).click(function() { $( ".overlay" ).addClass ('overlay-open'); }); // Overlay : off $( "#theatre_out" ).click(function() { $( ".overlay" ).removeClass ( 'overlay-open' ); }); </script>

PS : d'ailleurs si vous voyez un moyen de l'optimiser avec une autre fonction pour play/pause que passer par src je suis preneur :)