web-dev-qa-db-fra.com

la vidéo en arrière-plan du site? HTML 5

Je souhaite utiliser une vidéo en tant qu'arrière-plan au lieu d'une image qui s'étend automatiquement sur tout l'écran (arrière-plan).

Je souhaite également faire pivoter les vidéos et les images .. afin qu’une image/vidéo aléatoire soit affichée dans n’importe quel ordre.

Il serait également intéressant de savoir comment retarder la lecture de la vidéo, de sorte que celle-ci ne soit lue qu'une fois 30 secondes après le chargement du site.

tHX!

htmlvideohtml5backgroundhtml5-video
56
Roland

Jetez un oeil à mon plugin jQuery videoBG

http://syddev.com/jquery.videoBG/

Faites de toute vidéo HTML5 un fond de site ... a une image de repli pour les navigateurs qui ne prennent pas en charge le langage HTML5

Vraiment facile à utiliser

Faites-moi savoir si vous avez besoin d'aide.

37
sydlawrence

Tout d'abord, votre balise HTML ressemble à ceci:

<video id="awesome_video" src="first_video.mp4" autoplay />

Deuxièmement, votre code JavaScript ressemblera à ceci:

<script type="text/javascript">
  var index = 1,
      playlist = ['first_video.mp4', 'second_video.mp4', 'third_video.mp4'],
      video = document.getElementById('awesome_video');

  video.addEventListener('ended', rotate_video, false);

  function rotate_video() {
    video.setAttribute('src', playlist[index]);
    video.load();
    index++;
    if (index >= playlist.length) { index = 0; }
  }
</script>

Et enfin, votre CSS:

#awesome_video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Cela créera un élément vidéo sur votre page qui commencera immédiatement à la lecture de la première vidéo, puis itérera dans la liste de lecture définie par la variable JavaScript. Votre kilométrage avec le CSS peut varier en fonction du CSS pour le reste du site, mais 100% largeur/hauteur devrait le faire sur une page de base.

25
Jey Balachandran

J'aurais peut-être une solution pour la vidéo en tant qu'arrière-plan, ajustée à la largeur ou à la hauteur du navigateur (mais la vidéo conservera tout de même le rapport de format, elle ne pourrait pas trouver de solution pour cela pour le moment.):

Placez la vidéo juste après la balise body avec style="width:100%;". Juste après, mettez une étiquette "bodydummy":

<body>
<video id="bgVideo" autoplay poster="videos/poster.png">
    <source src="videos/test-h264-640x368-highqual-winff.mp4" type="video/mp4"/>
    <source src="videos/test-640x368-webmvp8-miro.webm" type="video/webm"/>
    <source src="videos/test-640x368-theora-miro.ogv" type="video/ogg"/>    
</video>

<img id="bgImg" src="videos/poster.png" />

<!-- This image stretches exactly to the browser width/height and lies behind the video-->

<div id="bodyDummy">

Placez tout votre contenu dans bodydummy- div et placez les index z correctement dans CSS comme ceci:

#bgImg{ 
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}

#bgVideo{ 
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
}

#bodyDummy{ 
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    overflow: auto;
    width: 100%;
    height: 100%;
}

J'espère pouvoir aider. Faites-moi savoir quand vous pourriez trouver une solution pour que la vidéo conserve pas le rapport hauteur/largeur, de sorte qu'elle puisse remplir la totalité de la fenêtre du navigateur, de sorte que nous n'ayons pas à mettre un bgimage.

8
moritz