Vidéo en plein écran en arrière-plan

Question

Bonne journée. J'ai essayé de trouver un moyen d'appliquer la vidéo en plein écran en arrière-plan comme sur cette page ici: spotify. Je suppose que cela peut être fait en HTML5, mais j'essaie de suivre certaines instructions de stackoverflow et ça ne marche pas pour moi. Évidemment, je ne veux pas le calendrier et les autres contrôles sur la vidéo, juste une simple vidéo en arrière-plan. Jusqu'à présent je tentais d'utiliser ceci:

jsFiddles sous le code

<style> 
    #body{position:absolute; width:100%; height:100%} 
    #myvideo{position:relative; top:0; left:0; width:100%; height:100%; z-index:-999;} 
    #fullpage{width:80%; margin:0 auto; background-color:#900; z-index:100;} 

</style> 


<video width="100%" height="100%" autoplay="autoplay" id="myvideo"> 
    <source src="http://www.pete.dj/video/video.webm"></source> 
    <source src="http://www.pete.dj/video/video.mp4"></source> 
</video> 


<script language="javascript"> 
var elem = document.getElementById("myvideo"); 
if (elem.requestFullscreen) { 
    elem.requestFullscreen(); 
} else if (elem.mozRequestFullScreen) { 
    elem.mozRequestFullScreen(); 
} else if (elem.webkitRequestFullscreen) { 
    elem.webkitRequestFullscreen(); 
} 
</script> 


<div id="fullpage"> 
    content goes here 
</div> 

mais il n'a pas bien fonctionné. Voici ce qui est faux:

1. vidéo joue sur toute la hauteur, ne pas étiré ou redimensionnée pour couvrir toute la largeur de l'écran
2. vidéo joue sur OK chrome, mais il ne fonctionne pas sur d'autres navigateurs, Quelle pourrait être la raison? Je pensais que html5 permet de jouer sur tous les navigateurs. J'ai l'impression que ce n'est pas une question de codecs ou des fichiers eux-mêmes. Peut-il être causé par le codage? jsFiddle ici: fiddle1

après que j'ai réussi à résoudre le problème avec la largeur de la vidéo - alors il ne fait pas comme un arrière-plan, comme les barres de défilement apparaissent. Que puis-je faire pour me débarrasser des barres de défilement causées par la vidéo? Je les veux seulement si la #fullpage réelle l'exige. Malheureusement aussi #fullpage est derrière l'arrière-plan dans ce cas ... au lieu de sur le dessus de celui-ci ici est un violon pour celui-ci: fiddle2

le site réel ici: video test

Merci pour votre aide et temps.

Answer 1

ok, c'est ce que devrait faire le travail. Il peut être utile pour quelqu'un à l'avenir .:

(function($){ 

    $.fn.videoBG = function(selector, options) { 

     var options = {}; 
     if (typeof selector == "object") { 
      options = $.extend({}, $.fn.videoBG.defaults, selector); 
     } 
     else if (!selector) { 
      options = $.fn.videoBG.defaults; 
     } 
     else { 
      return $(selector).videoBG(options);   
     } 

     var container = $(this); 

     // check if elements available otherwise it will cause issues 
     if (!container.length) 
      return; 

     // container to be at least relative 
     if (container.css('position') == 'static' || !container.css('position')) 
      container.css('position','relative'); 

     // we need a width 
     if (options.width == 0) 
      options.width = container.width(); 

     // we need a height 
     if (options.height == 0) 
      options.height = container.height();  

     // get the wrapper 
     var wrap = $.fn.videoBG.wrapper(); 
     wrap.height(options.height) 
      .width(options.width); 

     // if is a text replacement 
     if (options.textReplacement) { 

      // force sizes 
      options.scale = true; 

      // set sizes and forcing text out 
      container.width(options.width) 
       .height(options.height) 
       .css('text-indent','-9999px'); 
     } 
     else { 

      // set the wrapper above the video 
      wrap.css('z-index',options.zIndex+1); 
     } 

     // move the contents into the wrapper 
     wrap.html(container.clone(true)); 

     // get the video 
     var video = $.fn.videoBG.video(options); 

     // if we are forcing width/height 
     if (options.scale) { 

      // overlay wrapper 
      wrap.height(options.height) 
       .width(options.width); 

      // video 
      video.height(options.height) 
       .width(options.width); 
     } 

     // add it all to the container 
     container.html(wrap); 
     container.append(video); 

     return video.find("video")[0]; 
    } 

    // set to fullscreen 
    $.fn.videoBG.setFullscreen = function($el) { 
     var windowWidth = $(window).width(), 
      windowHeight = $(window).height(); 

     $el.css('min-height',0).css('min-width',0); 
     $el.parent().width(windowWidth).height(windowHeight); 
     // if by width 
     if (windowWidth/windowHeight > $el.aspectRatio) { 
      $el.width(windowWidth).height('auto'); 
      // shift the element up 
      var height = $el.height(); 
      var shift = (height - windowHeight)/2; 
      if (shift < 0) shift = 0; 
      $el.css("top",-shift); 
     } else { 
      $el.width('auto').height(windowHeight);   
      // shift the element left 
      var width = $el.width(); 
      var shift = (width - windowWidth)/2; 
      if (shift < 0) shift = 0; 
      $el.css("left",-shift); 

      // this is a hack mainly due to the iphone 
      if (shift === 0) { 
       var t = setTimeout(function() { 
        $.fn.videoBG.setFullscreen($el); 
       },500); 
      } 
     } 

     $('body > .videoBG_wrapper').width(windowWidth).height(windowHeight); 

    } 

    // get the formatted video element 
    $.fn.videoBG.video = function(options) { 

     $('html, body').scrollTop(-1); 

     // video container 
     var $div = $('<div/>'); 
     $div.addClass('videoBG') 
      .css('position',options.position) 
      .css('z-index',options.zIndex) 
      .css('top',0) 
      .css('left',0) 
      .css('height',options.height) 
      .css('width',options.width) 
      .css('opacity',options.opacity) 
      .css('overflow','hidden'); 

     // video element 
     var $video = $('<video/>'); 
     $video.css('position','absolute') 
      .css('z-index',options.zIndex) 
      .attr('poster',options.poster) 
      .css('top',0) 
      .css('left',0) 
      .css('min-width','100%') 
      .css('min-height','100%'); 

     if (options.autoplay) { 
      $video.attr('autoplay',options.autoplay); 
     } 

     // if fullscreen 
     if (options.fullscreen) { 
      $video.bind('canplay',function() { 
       // set the aspect ratio 
       $video.aspectRatio = $video.width()/$video.height(); 
       $.fn.videoBG.setFullscreen($video); 
      }) 

      // listen out for screenresize 
      var resizeTimeout; 
      $(window).resize(function() { 
       clearTimeout(resizeTimeout); 
       resizeTimeout = setTimeout(function() { 
        $.fn.videoBG.setFullscreen($video); 
       },100); 
      }); 
      $.fn.videoBG.setFullscreen($video); 
     } 


     // video standard element 
     var v = $video[0]; 

     // if meant to loop 
     if (options.loop) { 
      loops_left = options.loop; 

      // cant use the loop attribute as firefox doesnt support it 
      $video.bind('ended', function(){ 

       // if we have some loops to throw 
       if (loops_left) 
        // replay that bad boy 
        v.play(); 

       // if not forever 
       if (loops_left !== true) 
        // one less loop 
        loops_left--; 
      }); 
     } 

     // when can play, play 
     $video.bind('canplay', function(){ 

      if (options.autoplay) 
       // replay that bad boy 
       v.play(); 

     }); 


     // if supports video 
     if ($.fn.videoBG.supportsVideo()) { 

      // supports webm 
      if ($.fn.videoBG.supportType('webm')){ 

       // play webm 
       $video.attr('src',options.webm); 
      } 
      // supports mp4 
      else if ($.fn.videoBG.supportType('mp4')) {  

       // play mp4 
       $video.attr('src',options.mp4); 

      // $video.html('<source src="'.options.mp4.'" />'); 

      } 
      // throw ogv at it then 
      else { 

       // play ogv 
       $video.attr('src',options.ogv); 
      } 

     } 



     // image for those that dont support the video 
     var $img = $('<img/>'); 
     $img.attr('src',options.poster) 
      .css('position','absolute') 
      .css('z-index',options.zIndex) 
      .css('top',0) 
      .css('left',0) 
      .css('min-width','100%') 
      .css('min-height','100%'); 

     // add the image to the video 
     // if suuports video 
     if ($.fn.videoBG.supportsVideo()) { 
      // add the video to the wrapper 
      $div.html($video); 
     } 

     // nope - whoa old skool 
     else { 

      // add the image instead 
      $div.html($img); 
     } 

     // if text replacement 
     if (options.textReplacement) { 

      // force the heights and widths 
      $div.css('min-height',1).css('min-width',1); 
      $video.css('min-height',1).css('min-width',1); 
      $img.css('min-height',1).css('min-width',1); 

      $div.height(options.height).width(options.width); 
      $video.height(options.height).width(options.width); 
      $img.height(options.height).width(options.width); 
     } 

     if ($.fn.videoBG.supportsVideo()) { 
      v.play(); 
     } 
     return $div; 
    } 

    // check if suuports video 
    $.fn.videoBG.supportsVideo = function() { 
     return (document.createElement('video').canPlayType); 
    } 

    // check which type is supported 
    $.fn.videoBG.supportType = function(str) { 

     // if not at all supported 
     if (!$.fn.videoBG.supportsVideo()) 
      return false; 

     // create video 
     var v = document.createElement('video'); 

     // check which? 
     switch (str) { 
      case 'webm' : 
       return (v.canPlayType('video/webm; codecs="vp8, vorbis"')); 
       break; 
      case 'mp4' : 
       return (v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"')); 
       break; 
      case 'ogv' : 
       return (v.canPlayType('video/ogg; codecs="theora, vorbis"')); 
       break;   
     } 
     // nope 
     return false; 
    } 

    // get the overlay wrapper 
    $.fn.videoBG.wrapper = function() { 
     var $wrap = $('<div/>'); 
     $wrap.addClass('videoBG_wrapper') 
      .css('position','absolute') 
      .css('top',0) 
      .css('left',0); 
     return $wrap; 
    } 

    // these are the defaults 
    $.fn.videoBG.defaults = { 
      mp4:'', 
      ogv:'', 
      webm:'', 
      poster:'', 
      autoplay:true, 
      loop:true, 
      scale:false, 
      position:"absolute", 
      opacity:1, 
      textReplacement:false, 
      zIndex:0, 
      width:0, 
      height:0, 
      fullscreen:false, 
      imgFallback:true 
     } 

})(jQuery); 



$(document).ready(function() { 


    $('body').videoBG({ 
     position:"fixed", 
     zIndex:0, 
     mp4:'http://www.pete.dj/video/video.mp4', 
     ogv:'http://www.pete.dj/video/video.ogv', 
     webm:'http://www.pete.dj/video/video.webm', 
     poster:'http://www.pete.dj/video/video.jpg', 
     opacity:1, 
     fullscreen:true, 
    }); 

}) 

jfiddle ici: jfiddle

Answer 2

body{margin:0;} 

Je suppose que c'est l'extrait CSS que vous recherchez.

Answer 3

basiquement vous pouvez écouter l'événement window.onresize puis lissée comme:

var elem = document.getElementById("myvideo"); 

elem.width = window.innerWidth; 
elem.height = window.innerHeight; 

window.onresize=function(){ 
    elem.width = window.innerWidth; 
    elem.height = window.innerHeight; 
};