Serait-il possible de "cacher" une vidéo derrière une image?

Essentiellement, au chargement de la page, je veux qu'une vidéo soit cachée derrière une image (je suppose que cela peut être fait avec des divs de positionnement).Serait-il possible de "cacher" une vidéo derrière une image?

Je voudrais que la vidéo commence à être lue lorsqu'un utilisateur clique sur l'image cachée derrière la vidéo. Cela devrait être possible avec un peu de JavaScript/CSS.

Ce que je demande vraiment, c'est si quelqu'un en connaît des exemples, ou serait-ce possible avec une extension jQuery/Mootools ...? Je préférerais ne pas utiliser Flash pour que cela fonctionne sur iPhone/iPad.

Merci

Source

2010-08-11 Jason

Quel genre de vidéo-nous parlons? Je sais qu'il est possible de cacher une vidéo flash, mais cela ne fonctionnera pas avec des trucs comme WMV/ASF etc. – Sebs

Cela est normalement effectué lors de l'intégration de séquences Quicktime. Cela peut être fait directement avec la vidéo si vous êtes en mesure de définir son cadre d'affiche. Il est également couramment fait en plaçant une image sur l'écran au même endroit que la vidéo et en basculant entre eux. Le code pourrait ressembler à ceci.

HTML

...

<embed id="video" style="display: none;">...<embed>

<img id="poster" onclick="switchToVideo()">

...

function switchToVideo(){

document.getElementById('video').style.display = "block";

document.getElementById('poster').style.display = "none";

document.getElementById('video').Play();

}

Source

2010-08-11 14:57:38

Merci - C'est une solution très simple et efficace. Je l'utilise conjointement avec l'API YouTube JS. Je voudrais également étudier la méthode z-index. Bien que j'ai le sentiment que cela ne soit pas aussi simple, car la vidéo YouTube devrait charger et appeler sa fonction "onReady", ce qu'elle ne fait pas dans ce cas, car elle n'est pas affichée. Je vous tiens au courant. – Jason

Comme vous avez décrit (je ne sais pas la syntaxe exacte), il suffit de placer une image avec un niveau z plus élevé sur tout ce que vous voulez cacher et gérer une méthode onClick en JavaScript.

Source

2010-08-11 14:58:46 Steven

Etes-vous sûr que cela fonctionne? Le commentaire de Prot0 suggère qu'il ne fonctionnera pas avec les vidéos WMV et éventuellement les vidéos QT. Les sites de bandes annonces de films d'Apple utilisent la technique cachée/visible de javascript/css proposée par Peter. –

Vous ne cacheriez pas la vidéo explicitement. Juste mettre une image dessus. – Steven

C'est ce que je dis. Un grand nombre de contrôles vidéo intégrés ne respectent pas z-index. C'est pourquoi vous ne pouvez pas placer une image sur une vidéo intégrée ou écrire du texte sur une vidéo intégrée. –

Pour que l'empilage fonctionne avec les vidéos, vous devez ajouter la variable wmode à l'objet/à l'imbrication. Aussi, pour empiler vous devrez utiliser position: absolute sur l'élément que vous voulez placer au-dessus de l'autre. Contenez-les tous les deux dans un conteneur relatif et augmentez l'indice z sur celui qui doit être supérieur.

Voici un exemple d'ajouter wmode à la vidéo:

<object width="400" height="300"> 
    <param name="movie" value="" /> 
    <param name="wmode" value="transparent"> 
    <!--[if !IE]>--> 
    <embed src="" width="400" height="300" wmode="transparent" menu="false"> 
    <!--<![endif]--> 
</object>

Source

2010-08-11 15:30:34 UpHelix

Je n'ai pas de vidéos WMV pour l'essayer, mais il y a une suggestion que 'wmode' seul ne fonctionnera pas. Mais il y a une correction en utilisant '': http://www.sitepoint.com/forums/showthread.php?t=543926 –

Serait-il possible de "cacher" une vidéo derrière une image?

Répondre

Questions connexes