5568 sujets

Sémantique web et HTML

Balise <video> en dessous d'un png transparent ?

Bonjour à tous.

Je suis en train de faire mon site perso et je rencontre un problème dont je n'ai pas trouvé la solution. Arrivant vers la fin, je m'en remets à vous.

Je souhaite superposé à une balise HTML 5 <video> un png qui laisse apparaitre par transparence la vidéo. L'intérêt de la chose est d'intégrer le lecteur vidéo dans un png représentant une veille télévision.
Lorsque je click sur un bouton, la vidéo correspondante apparait dans la télé png transparent(j'ai fait cette action à l'aide de javascript apparition disparition de la div.... ).

Mon PROBLEME est que les boutons du lecteur <video> ne sont pas réactifs dut à la superposition du png "Télé".

Cela fait trois jours que j'essaye et cherche sans résultat...
Il y aurait il une solution pour rendre non présent le png pour la souris et que du coup je récupère mon interaction avec le lecteur <video> ?

Je suis débutant ! Smiley langue J'utilise une feuille de style CSS et une feuille JS.
Je vous remercie par avance !!! J'ai peur de votre réponse qui je pense va être négative... j'ai basé tout mon graphisme la dessus.... snif ! Smiley ohwell
Bonjour,

Veux-tu avoir les boutons de ton lecteur vidéo qui apparaissent au-dessus de ton cadre de vieille télé ou ton cadre de vieille télé a-t-il déjà des boutons que tu aimerais utiliser pour contrôler ta vidéo sans faire apparaitre les boutons de ton lecteur?
merci pour vos réponses !
- Adien881, j'aurais juste voulu utilisé les boutons incorporé à la balise <video> . En fait mon png télé se superpose dans ses parties opaque un tout petit peu avec <video> pour faire croire que la video est dans la télé mais on pourrait utilisé les boutons de <video> si le png devant ne les désactivait pas dans leur interaction avec la souris.
Mais bon cela n'est pas possible Smiley ohwell je pense donc le plus posible me parait ta deuxième solution....

Je vais travaillé la dessus.
Patidou, ta piste est bonne, je ne savais pas que cela était possible en JS, Cela me soulage, car l'idée de devoir repartir sur du flash... je vais bosser la dessus....

Si vous avez un "tremplin de lancement" je suis preneur ! Smiley biggrin
Soit tu peux mettre ta balise video par dessus le PNG et ainsi rentre les contrôles accessibles, soit tu recréer els contrôles par dessous le tout comme dis plus haut. Smiley cligne

Tous ce qu'il y a à savoir sur la balise video : http://www.w3.org/TR/html5/video.html (attentions, certaines fonctionnalités ne sont pas encore implémentés sur les navigateur)
Merci merci merci à vous deux ! J'ai toutes les pistes dont j'avais besoin !
Je suis dessus, j'adapte tout cela ! Très belle découverte le w3.org !

Je vous remercie encore !
Merci à Patidou, moust et fvsh pour ces liens. J’avais bien aimé aussi la page d’alsacréation sur ce sujet. Malheureusement la balise video est encore jeune et elle n’est compatible que sur les derniers navigateurs. Il faudrait demander à Jimbobguigui quel est le public visé par sa page.

J’ai une solution moins gracieuse mais qui marche sur tous les navigateurs.
Pour laisser apparaitre (et rendre fonctionnel) le centre d’une image (écran de la télé ci-dessous) on ne peut pas créer des images avec un trou rectangulaire au milieu, mais on peut découper l’image en 5 parties.

upload/21414-ecran-tele.jpg
Les morceaux 1, 2, 3 et 4 du puzzle entourent la zone cliquable grâce à un positionnement css et on met à la corbeille le morceau non numéroté du puzzle.
Ici ce morceau est assez grand pour contenir tout le lecteur, mais on peut très bien le réduire pour ne laisser cliquable que les boutons de contrôle.
Modifié par adrien881 (14 Feb 2011 - 15:25)
Je n'y avais pas pensé !!! C'est peut être la solution la plus simple. En espérant que les positions absolute soit les même dans tout les navigateurs.
j'ai cherché toute la matinée une solution JS sans résultat car un autre problème est surgit...
J'avais commencé mes pages en html 4 mais par souci de compatibilité avec tout les navigateur le html 5 me paraissait plus approprié.
- J'ai fais un menu (à l'époque du html4) avec des mini tv qui lorsque l'on click dessus fond apparaître la vidéo correspondante dans la grande TV png. J'étais en <object> et du coup ma valeur autostart lançait la video dans la grande TV png sur le clik de ma petite tv du menu.
elle apparaissait avec les valeurs display.

Maintenant avec <video> la valeur autostart lance la vidéo à l'ouverture de la page et non à l'apparition de l'élément... et si je ne mets pas d'autostart cela oblige l'utilisateur à cliké une fois sur mon menu avec un petit play qui apparait et une nouvelle fois sur la télé pour lancer la vidéo. (c'est du détail je vous l'accorde mais bon...)

En tout cas Adrien ta solution me plait beaucoup et je vais peut être revenir au html4 car avec mes connaissances je n'arrive pas à créer l'interactivité entre mon menu et la vidéo en JS....

Pour illustrer tout cela j'ai déposé sur mon serveur les éléments incriminés à :
http://www.g-clipse.com/testtv/tv.html
Plutôt que découper l'image, on peut utiliser une image de fond et placer la vidéo au milieu, non?
(Et si on a vraiment besoin de plusieurs éléments de décoration, on ne découpera pas l'image pour autant, on utilisera plutôt la technique des sprites.)
Sujet clos
Aller à