Son d'une vidéo au survol de la souris

Salut à tous,

Pour commencer, un grand merci aux contributeurs, j'ai le plaisir de trouver mon bonheur à chaque fois sur le site, mais pour ce coup, je sèche. Alors c'est mon premier message

Je mets une vidéo publicitaire sur mon site qui est avec le CMS Wordpress. Dans un widget texte, j'ai collé du HTML 5 pour avoir une vidéo :
- en lancement automatique mais sans le son.
- en lancement manuel mais avec le son.

Jusque là tout va bien, je cherche juste à améliorer tout cela et voilà mes interrogations.

1 - Quand la vidéo est en lancement automatique (et donc sans son), j'aimerais que le passage de la souris sur la vidéo entraîne la mise en route du son (muted="false").

2 - Quand la vidéo est en lancement manuel, j'aimerais que le passage de la souris sur l'encadré l'agrandisse (actuellement de 300px, j'aimerais passer à 600px en partant du même endroit si possible).

3 - Est-il possible de ne plus afficher la vidéo et de la remplacer par une simple image si l'utilisateur l'a déjà visionnée 3 ou 5 fois dans la journée par exemple? (Comme une publicité capée, il me semble que c'est le terme).

Alors ma question : est-ce techniquement possible de réaliser ces 3 besoins? Si oui, quelle technologie, du JQuery? Avez-vous des pistes ou des bouts de codes qui me permettrait de creuser? Je ne connais pas le JQuery mais n'ai rien contre m'y mettre pour faire aboutir ce besoin.

Votre aide me sera précieuse, merci d'avance!
Modifié par Geoffray (22 Jan 2015 - 16:52)

Salut de mémoire tu peux coller du jsdans les XT de WP

As tu essaye de poser QQ chose ?

Non rien essayé car je ne connais pas le JQuery et en plus je ne sais pas si ce que j'espère faire est possible. J'ai le niveau pour aller intégrer du JQuery dans mon thème, pas de soucis, par contre je n'ai pas (encore) le niveau pour écrire du JQuery ni même savoir si ce que j'espère faire est possible.

Une idée de la faisabilité et des pistes de recherche?

Salut Geoffray,
ceci https://msdn.microsoft.com/fr-fr/library/hh924823(v=vs.85).aspx devrait t'instruire pour toujours et te satisfaire dès maintenant.
Le tutoriel explique comment contrôler une <video> par méthodes et fonctions javascript.

EDIT : Le lien ne semble pas fonctionner d'ici ; le copier-coller dans la barre de ton navigateur sera la bonne solution pour accéder enfin à la connaissance ...
Modifié par senteur_honrable (30 Jan 2015 - 21:40)

Salut à tous,

Merci pour vos conseils, j'ai trouvé mon bonheur. Finalement c'était seulement quelques lignes de codes, il suffisait de s'y mettre un peu...

Rappel : Le cahier des charges était d'avoir une vidéo en pause et au passage de la souris dessus, elle devait se mettre en route. J'ai donc 3 formats + la vidéo Youtube qui se joue selon le navigateur et j'ai mis un Div pour pouvoir avoir l’événement déclencheur onmouseover qui ne fonctionnait pas sur la balise vidéo... donc j'ai triché

<div onmouseover="piloteVideo()" onmouseout="piloteVideo()">
<video id="lavideo" width="300" height="200" controls="controls" onmouseover="piloteVideo()> 
    <source src="video/apps.mp4" type="video/mp4" /> 
    <source src="video/apps.webm" type="video/webm" /> 
    <source src="video/apps.ogv" type="video/ogg" /> 
    <object type="application/x-shockwave-flash" width="400" height="222" data="http://www.youtube.com/v/HVMoJqg41Bw"> 
     <param name="movie" value="https://www.youtube.com/v/zx4H20LnfDc" /> 
     <param name="wmode" value="transparent" /> 
     <!--[if lte IE 6 ]>
     <embed src="http://www.youtube.com/v/HVMoJqg41Bw" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="222"></embed>
     <![endif]--> 
     <p>Vous n'avez pas de navigateur moderne, ni flash d'installé sur Internet Explorer... suivez les liens ci-dessous pour télécharger les vidéos.</p> 
    </object> 
   </video>
</div> 
<script>
	var lavideo = document.getElementById("lavideo");
	function piloteVideo() {
		if (lavideo.paused) {
			lavideo.play();
                        //lavideo.muted = false;
		} else {
			lavideo.pause();
                        //lavideo.muted = true;
		}
	} 
</script>

J'ai bon chef?

Maintenant, je cherche à agrandir cette vidéo, genre 200 ou 300% toujours au survol de la souris, vous avez des pistes?

Merci d'avance!

Je m'auto-corrige car j'avais fait des erreurs et j'ai un peu avancé. Je lance bien la vidéo au passage de la souris, je la coupe quand la souris part.

Maintenant j'aimerais que la vidéo s'agrandisse (x2) au survol. Seul soucis, elle est dans un widget texte d'une barre latérale de 300 pixels et je la joue déjà au maxi. J'aimerais qu'elle dépasse cette largeur mais je n'y parvient pas. Avec le code CSS que j'ai mis, je vois bien qu'elle essaie de s'agrandir, le "block" s'agrandit bien, mais la vidéo elle ne s'agrandis pas...

Le code inséré dans un widget Wordpress text en barre latérale :

<video id="lavideo" class="videopub" width="300" height="200" onmouseover="piloteVideo()" onmouseout="piloteVideo()" controls="controls"> 
    <source src="video/apps.mp4" type="video/mp4" /> 
    <source src="video/apps.webm" type="video/webm" /> 
    <source src="video/apps.ogv" type="video/ogg" /> 
    <object type="application/x-shockwave-flash" width="400" height="222" data="http://www.youtube.com/v/HVMoJqg41Bw"> 
     <param name="movie" value="https://www.youtube.com/v/zx4H20LnfDc" /> 
     <param name="wmode" value="transparent" /> 
     <!--[if lte IE 6 ]>
     <embed src="http://www.youtube.com/v/HVMoJqg41Bw" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="222"></embed>
     <![endif]--> 
     <p>Vous n'avez pas de navigateur moderne, ni flash d'installé sur Internet Explorer...</p> 
    </object> 
   </video>
<script>
	var lavideo = document.getElementById("lavideo");
	function piloteVideo() {
		if (lavideo.paused) {
			lavideo.play();
                        //lavideo.muted = false;
		} else {
			lavideo.pause();
                        //lavideo.muted = true;
		}
	} 
</script>

Le CSS rajouté :

video.videopub {
    z-index: 100;
    width: 300px;
    height: 250px;
}

video.videopub:hover {
    width: 300px;
    height: 250px;   
}