Integrer une vidéo dans un site web

dr-lu74 Messages postés 34 Statut Membre -  
animostab Messages postés 3003 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Je recherche un moyen pour lorsqu'on accède à une page web (Genre page d'accueil) on ai une vidéo qui se lit automatique (Jusque là pour integrer une vidéo avec lecture auto ça va) mais une fenêtre au dessus de la page d'accueil qui lit une vidéo après, on ai accès au site.

Merci d'avance
dr-lu74

1 réponse

  1.
    animostab Messages postés 3003 Date d'inscription   Statut Membre Dernière intervention   738
     
    Salut

    je t'explique le principe tu peux faire ca avec html / css plus un petit brin de jquery
    tu crée 1 div qui prend tout le site et placée au dessus de tous les div avec z-index et avec une opacity
    tu crée une autre avec la video que tu centre avec css et placée au dessus de la précédente avec z-index et positionnée en absolute

    et avec jquery tu detecte la fin de la video et tu cache les 2 div précédentes

    ca donnerait ca (non testé)

    dans le head 

    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script>
     $(function () {
    	$("#mavideo").bind("ended", function() {
    	   $("#coverall").hide(300);
               $("#cadrevideo").hide(300);
    	});
    });
    </script>

    ensuite tu fait ca en html juste après <body> 

    <div id="coverall"></div>
    <div id="cadrevideo">
    <video id="mavideo"> ...le code d'appel de ta vidéo ...</video>
    </div>

    le css 

    #coverall {
        position:fixed;
        display:none;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background-color: #999999;
        z-index:900; /* pour être pardessus tous les autres div */
        opacity:0.5;
        filter: alpha(opacity=50);  
    }

    #cadrevideo {
        width:500px;
        height:300px;
        position:absolute;
        left:50%; 
        top:50%; 
        margin:-150px 0 0 -250px; /* la moitié des width */
        z-index:1000; 
    }
    0