與videobg.js和視頻錨點問題

http://www.summerserver.com/video

我利用在視頻下面的代碼庫：

的問題我有如下：

該視頻顯示在div中，但由於用戶分辨率/屏幕dif在每個屏幕上看起來都不一樣。我希望它是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 
});

我不知道如何告訴它使用一個不同點錨（或者如果這甚至有可能）。視頻內容的最好部分是底部，因爲頂部更多的是天空的東西....任何想法如何實現這一點？

謝謝！

來源

2013-06-12 lobstahcrushah

首先，您必須將屬性寬度：「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版本）或搜索「//視頻元素」評論。您將找到視頻對象的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-05 17:37:06

與videobg.js和視頻錨點問題

回答

相關問題