0

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

http://www.summerserver.com/video

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

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

我遇到的问题如下：

视频显示在 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
});

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

谢谢！

4

1 回答 1

0

首先，您必须在 videoGB 调用中添加属性宽度：“100%”。

//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 版本中）或搜索“//视频元素”评论。您将找到视频对象的 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%');

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

于 2013-09-05T17:37:06.240 回答