-1

我正在制作一个网站，它有一个视频资产（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>

任何人都可以帮助我吗？在此先感谢 Alejandro Castan PS：对不起我的英语小...

4

3 回答 3

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);
});
于 2013-09-13T21:37:42.523 回答
0

你这样做是不对的 ！您只需要打开一个 div 并且它是一个块元素，这意味着它将占据所有可用的位置。然后，您可以使用 JS 来缩放该主 div 中的视频和其他元素，以适应它。它会起作用的。:) 你不必使用 JS 来实现 :)

于 2013-09-13T22:42:55.377 回答
0

将视频设置为像 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() );

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

于 2013-09-13T22:51:28.820 回答