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

Question

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).

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

Answer 1

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()">

...

JS

function switchToVideo(){

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

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

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

}

Answer 2

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.

Answer 3

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>