Question

我在以下位置有一个网站：

http://www.summerserver.com/video

我正在为视频使用以下代码库：

我遇到的问题如下：

视频显示在div中，但由于用户分辨率/屏幕差异，它在每个屏幕上看起来都不同。我希望它是100％宽度。那部分有效。问题是视频拉伸的锚点似乎是左上角。我想在左下角。用户屏幕的分辨率越高，视频底部被裁剪得越多。我宁愿将视频的顶部裁剪而不是底部。

以下是我正在使用的.js：

//videoDemo 
$('#div_demo').videoBG({
    mp4:'_assets/vid/index_video.mp4',
    ogv:'_assets/vid/index_video.ogv',
    webm:'_assets/vid/index_video.webm',
    poster:'_assets/img/index_video.jpg',
    scale:true,
    zIndex:0
});

我不知道如何告诉它使用不同的锚点（或者如果这是可能的话）。视频内容的最佳部分是底部，因为顶部更像是天空的东西....有关如何实现这一点的任何想法？

谢谢！

Answer 1

首先，您必须将属性宽度：“100％”添加到videoGB调用。

//videoDemo 
$('#div_demo').videoBG({
    mp4:'_assets/vid/index_video.mp4',
    ogv:'_assets/vid/index_video.ogv',
    webm:'_assets/vid/index_video.webm',
    poster:'_assets/img/index_video.jpg',
    scale:true,
    zIndex:0,
    width: "100%"
});

对于底层问题，您必须输入videogb.js并进行修改。

在第148行（在我的js版本中）或搜索“// video element”评论。您将找到视频对象的CSS定义。更改“底部”的“顶部”属性。

这可能是这样的：

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

请记住，您将在此版本中使用的所有视频都将在底部对齐。

videobg.js和视频锚点的问题

1 个答案: