Question

我正在建立一个网站，它有视频资产（mp4文件）的背景，当我测试它时，我在Chrome / Explorer / Firefox中以不同的方式看到它，为此，我需要添加到我的代码中适合所有浏览器。我的代码如下：

<html>
<head>
<script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
</head>
<body>
<body style="width: 100%; height: 100%;">
<video width="1920" height="1080" controls autoplay loop= "loop">
  <source src="background.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
<script>   
$(function(){

var FancyPointer = function(){
  // A revealing module pattern, to create an
  // extensible pointer object.
  var pointerIcons = [], // Array of pointers.
      el, $el,           // element to listen to
      defaultImgSettings = {
          src: 'globe.gif',
          height: '30px',
          width: '30px',
          xPos: -15,
          yPos: -15
      };
  function startPointing(){

      $el.on("mousemove", function(e){
        var evt = e;
        $(pointerIcons).each(function(index, pointerEl){
          $(pointerEl.imgEl).clone()
            .css({
                'position':'absolute',
                'top':e.pageY+pointerEl.yPos,
                'left':e.pageX+pointerEl.xPos,
                'width': pointerEl.width,
                'height': pointerEl.height
            }).prependTo( $(document.body))
            .fadeOut(500, 'linear', function(){
                $(this).remove(); 
            });
        });

      });
  }

  function addPointer(options){
      var pointerEl = {};
      pointerEl.src = options.src || defaultImgSettings.src;
      pointerEl.height =options.height || defaultImgSettings.height;
      pointerEl.width = options.width || defaultImgSettings.width;
      pointerEl.xPos = options.xPos || defaultImgSettings.xPos;
      pointerEl.yPos = options.yPos || defaultImgSettings.yPos;

      pointerEl.imgEl = new Image();
      pointerEl.imgEl.src = pointerEl.src;
      $(pointerEl.imgEl).attr("height",  pointerEl.height)
        .attr("width",  pointerEl.width);

      pointerIcons.push(pointerEl);
  }

  function init(element){
    // the required option for the init should be the element in which we'll be listening.
    // If there is also an array included, the array should contain a number of options for
    //  the addPointer function. Otherwise, the user will need to manually call addPointer with
    //  each pointer to be added.
    el = element; // Save the original element
    $el = $(el);     // also create a jQuery-wrapped reference for later use.

    // Now here, we create an array, containing all the additional parameters after the first
    var args = Array.prototype.slice.call(arguments, 1);
    // Now, iterate over all these additional arguments. If we have any, assume them to be
    //  the options for addPointer (see above).

      if(args){
      $(args).each(function(index, pointerEl){
          addPointer(pointerEl);
      });
    }

    startPointing();

  }

  return {
    init: init,
    add: addPointer
  };
}(); 


FancyPointer.init("body",
{
      src: 'globe.gif',
      width: '80px',
      height: '80px',
      xPos: -40,
      yPos: -40
    }, 
    {
      src: 'smartphone.gif',
      width: '60px',
      height: '60px',
      xPos: 25,
      yPos: 25
    }, {
      src: 'monitor.gif',
      width: '50px',
      height: '50px',
      xPos: 30,
      yPos: -80
    },
    {
      src: 'tablet.gif',
      width: '55px',
      height: '55px',
      xPos: -85,
      yPos: -85
    },
    {
      src: 'laptop.gif',
      width: '50px',
      height: '50px',
      xPos: -80,
      yPos: 30
    },
    {
      src: 'chain.gif',
      width: '30px',
      height: '30px',
      xPos: -45,
      yPos: -50
    },
    {
      src: 'chain.gif',
      width: '30px',
      height: '30px',
      xPos: 15,
      yPos: 10
    },
    {
      src: 'chain1.gif',
      width: '30px',
      height: '30px',
      xPos: -45,
      yPos: 10
    },
    {
      src: 'chain1.gif',
      width: '30px',
      height: '30px',
      xPos: 25,
      yPos: -60
    });

   $("#addTrailer").on("click", function(){
        $(this).hide();
        FancyPointer.add({
          src: 'trail4.gif',
          width: '100px',
          height: '100px',
          xPos: -45,
          yPos: 25
        });
    })    
});
;</script>
</body>
</html>

任何人都可以帮助我吗？提前致谢亚历杭德罗·卡斯坦 PS：抱歉我的小英语......

Answer 1

这是我前一段时间编写的一些代码，用于制作<video>全屏背景：

// Resize the video elements so that we don't get any borders due to aspect ratio
function resizeVideo() {
  if ($(window).height() > $(window).width() * 0.5425) { // Which dimension is bigger dependant on aspect ratio (16:9)
    $("video").removeAttr("height").removeAttr("width").width("auto").height("100%");
  }
  else {
    $("video").removeAttr("height").removeAttr("width").width("100%").height("auto");
  }
};

// Add the resize function to the window resize event but put it on a short timer as to not call it too often
var resizeTimer;
$(window).resize(function () {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(resizeVideo, 150);
});

Answer 2

你做错了！你只需要打开一个div，它就是一个块元素，wicth意味着它将占用所有可用的地方。然后，您可以使用JS来扩展视频等元素以及该主要div中的其他元素以适应它。它会奏效。 :)你不必使用JS进行永久性的操作：）

Answer 3

将视频设置为像1920这样的固定宽度是一个非常糟糕的主意！

你可以使用CSS将视频设置为100％的宽度和高度，这样它就变得灵活，但是你可能会失去宽高比并扭曲视频。因此，如果您只是将视频用作背景而不关心字幕和其他视频资源，通常最好让视频填满屏幕并使边缘被切断。

如果您要进行http://www.facebook.com/home效果，并希望按比例调整标头大小。你可以这样做：

var mastheadHeight,
    windowHeight = $(window).height(),
    windowWidth = $(window).width();

mastheadHeight = Math.min(Math.floor(windowWidth / 2), windowHeight - $('.menu').height() );

然后在浏览器调整大小上检查这一点，以使其响应。注意我在我的标头底部添加了一个菜单，该菜单从视频高度中减去，以便它仍然在屏幕上显示！

如何让我的网页拉伸以适应所有浏览器？

3 个答案: