11401 sujets

JavaScript, DOM et API Web HTML5

Pages :
Bonjour, j'aurais une question concernant une checkbox et je suis ultra débutant en codage...

J'aimerais intégrer une checkbox qui reste cochée lorsqu'un utilisateur la cochée, même si il quitte le site et qu'il revient 2 jours après et je n'y arrive pas.

Pour le contexte : c'est un espace membre dans lequel il y a des dizaines de vidéos par page, et j'aimerai simplement afficher une case à cocher "Vidéo lue" pour que les utilisateurs sachent quelles vidéos ils ont visionné. (sachant qu'elles ne sont pas forcément regardé dans l'ordre de la page, c'est pour quoi j'aimerai mettre cette fonction)

Voilà je sais pas si c'est faisable...

Merci beaucoup
Bonjour,
Bienvenue sur le forum.
Oui, c'est tout à fait possible.
Tu as deux solutions : localStorage en JavaScript (un espace de stockage pour le nom de domaine, qui se supprime seulement si tu le décides par une fonction ou si l'utilisateur fait "localStorage.clear()" dans la console) ou, les cookies, en JS ou en PHP (c'est mieux en PHP, avec httponly). Les cookies ce sont les trucs que tu vois sur toutes les pages avec un bandeau, selon la législation française.

Donc, quand il lit la vidéo, ça édite le localStorage ou les cookies. Quand il revient, ça lit le localStorage et les cookies pour avoir une liste de checkbox à cocher, puis ça les coche.

--------------------------------------------------------------------------------------------------
Quand vous avez trouvé votre réponse, cochez "Résolu" et indiquez la meilleure solution.
Ah bonne nouvelle, merci pour la réponse ! Alors ce n'est pas mon domaine du coup mais celui de la plateforme qui héberge mes programmes.
Et du coup comment il faut s'y prendre ? Il faut faire du code ?
Mask19 a écrit :
Il faut faire du code ?

En programmation oui, il faut toujours faire du code !!! Smiley cligne

Mask19 a écrit :
Et du coup comment il faut s'y prendre ?

Et du coup, tu veux utiliser le JS ? Le PHP ?
Bin je crois pas que je puisse modifier le PHP car j'ai juste une zone marqué HTML/JS pour personnaliser l'espace membre
Je vais aller voir merci Smiley smile
Et bien il y'en a pas, je dois les créer de toute pièce avec du code justement, c'est pour ça que je suis un peu perdu ^^
J'ai des vidéos intégrées, c'est tout. Le reste page blanche
J'avoue être tellement débutant que je suis perdu.

LocalStorage c'est un bout de code qu'il faut mettre à coté d'un autre code avec lequel je crée une checkbox ?
Bonjour,
Il faut que ça coche lorsque la vidéo est finie ? A été cliquée ?
Tu veux mettre jQuery ou rester sur du JS natif (Du code simple ou du code compliqué mais pur ?) ?

Je te conseille :
- au clic de la vidéo, s'il n'y a pas de localStorage pour cette vidéo, ajouter une clé et 1 (pour le clic de la vidéo, en jQuery, c'est $("video").click(function(){}); et pour voir s'il y a un clé, utilise has et pour ajouter une clé, localStorage.setItem("id de la vidéo",1) ).
- une fonction, au démarrage de la page, qui regarde pour chaque élément de localStorage quel est l'id indiqué.

Tu as vraiment besoin de checkbox ? Si la vidéo a été vue, ça doit faire quoi ? Mettre un style ? La cacher ? Ajouter un texte ? Juste cocker une checkbox (pas très pratique) ?

Tes vidéos, t'en a beaucoup ? Combien à peu près (5, 10, 20, 50, 100, 200, 500, 1000) ?

Si tu dois affecter un style pour ces vidéos (dont cacher fait partie), tu fais une boucle for, comme
for(var i=0;i<localStorage.length;i++){
document.getElementById(key(i)).style.display="none";
}
, qui caches toutes les vidéos dont l'id est dans localStorage.

En fait, tu es débutant comment ? Tu sais ce qu'est une variable, une fonction ? Tu sais les programmer en JS ? Tu sais programmer une condition if, des boucles,... ? Tu sais manier le CSS et HTML en JS ? Le PHP ?

Tu veux juste avoir ta fonction pour ta page ou savoir comment elle fonctionne ? Tu veux la programmer toi ?

Tu as besoin de plus de code ou tu comprends et tu arrives à finir ?

--------------------------------------------------------------------------------------------------
Quand vous avez trouvé votre réponse, cochez "Résolu" et indiquez la meilleure solution.
Modifié par js_html (14 Feb 2021 - 21:16)
Alors merci beaucoup pour ta réponse Smiley smile

Je suis ultra débutant ! J'ai réussi à faire quelque petits truc sur le tas depuis que je travaille un peu sur Internet mais non, les termes que tu m'as donné ne me disent rien...je ne connais pas le langage du code.

Alors en fait il y a une centaine de vidéos répartie dans différents modules (ce sont des séances de sport) et donc les utilisateurs en font régulièrement "en piochant".

Et le problème, c'est que du coup il n'y a rien sur la plateforme qui a été conçu pour que les utilisateurs sachent quelles séances ils ont fait...
J'ai donc une l'idée de mettre à coté de chaque vidéo une checkbox pour qu'ils puissent savoir quelles séances ils ont déjà fait.

J'ai réussi à mettre une checkbox en codage mais dés que j'actualise la page elle se décoche...
D'accord.
Oui, c'est normal qu'elle se décoche, si tu ne lui dit pas de se cocher...

Je vais te reposer quelques questions :
* Tes vidéos, ce sont des vidéos hébergées sur le site ou sur Youtube, Dailymotion, Vimeo... Elles ont la balise iframe ou video ?
* Tous ces modules sont sur la même page ou même domaine ?
Est-ce que tu sais si le site utilise jQuery ?
Tu veux juste une checkbox, pas un truc plus visible ?
Tu peux donner un lien de ta page ?
(Si tu donnes le lien de ta page, les questions avec * ne sont plus utiles)
Et ouais c'est pour ça que je me suis demandé si c'était possible de faire ça...

Alors pour les questions :
-Les vidéos sont hébergés chez YouTube (URL mais je peux faire en iframe si besoin) et DailyMotion (intégrées en iframe)
*Si j'ai bien compris "iframe" c'est quand on met un bout de code "embed" pour intégrer la vidéo directement ? ^^
-Tous les modules sont sur le même domaine (qui n'est pas le mien)
- Je ne sais pas du tout pour jQuery
- Alors je suis ouvert à tout tant que les utilisateurs ont un moyen simple de savoir si ils ont fait la séance ou non. les checkbox me paraissaient pratiques mais si il y a mieux... Smiley lol
- Alors j'ai pas de lien puisque c'est un espace membre privé payant donc pas possible d'aller dessus directement...mais le site c'est s'appelle ClickFunnels.com

J'espère que je t'ai donné assez d'infos Smiley ohwell
Ok !

Mask19 a écrit :
Les vidéos sont hébergés chez YouTube (URL mais je peux faire en iframe si besoin) et DailyMotion (intégrées en iframe)
Donc, ce sont des liens ?

Mask19 a écrit :
Si j'ai bien compris "iframe" c'est quand on met un bout de code "embed" pour intégrer la vidéo directement ?
Oui, même si en français, on ne met pas de point d'interrogation après un si+question... Smiley lol

Mask19 a écrit :
Alors je suis ouvert à tout tant que les utilisateurs ont un moyen simple de savoir si ils ont fait la séance ou non. les checkbox me paraissaient pratiques mais si il y a mieux...
Je pense que c'est petit et pas très visible, mais bon. Je pense qu'un peu de CCS (le style de la page) serait mieux.

Peux-tu répondre à la question en gras ?
Ouais pas faux ^^

Alors au début je les mettais avec des liens oui donc il y'en a pas mal. Mais maintenant je les intègre en iframe avec DailyMotion

Je te met une screenshot pour que tu comprennes mieux (les vidéos sur la screen ont été ajoutée avec des URLS)
En tout cas, si ces sont des iframe, c'est le pire à gérer.
Je t'avais déjà fait le script dans le cas où c'était des <video>, si c'était des liens, il n'y avait plus qu'un truc à changer, mais là...
Aïe....

Voici le lien cjoint https://www.cjoint.com/c/KBtrF4dLleG c'est cool je connaissais pas Smiley smile

Et ouais car les liens Dailymotion ne fonctionnent pas, je suis obligé de mettre en iframe.

Après la checkbox peut ne pas avoir de lien direct avec la vidéo, l'utilisateur coche seulement la case quand il a fait une séance.
Zut !!! Smiley fache
Je n'ai pas cliqué sur "Envoyer" : désolé !

Voici le code : https://jsfiddle.net/exercices/qb9m1yvo/ :
Après, tu l'adaptes à tes vidéos.


Si tu as besoin d'aide, par exemple pour positionner les checkbox par rapport aux vidéos, tu peux refaire un sujet pour poser ta question : le forum est fait pour !

--------------------------------------------------------------------------------------------------
Quand vous avez trouvé votre réponse, cochez "Résolu" et indiquez la meilleure solution.
Pages :