</video></div>
<div style="top: 100px; left: 130px;">        #1</div>
<div style="top: 800px; right: 130px;">    #2</div>
<div style="top: 1000px; left: 130px;">        #3</div>
<div style="top: 1500px; left: 130px;">        #4</div>
<div style="top: 2100px; right: 130px;">        #5</div>
</div>
<pre>
[/html]

يجب قياس حجم وتخزين أبعاد النافذة وارتفاع التمرير الأقصى ، وتغيير حجم الفيديو بحيث يملأ الإطار دائما

هنا كيف يتم تحقيق هذا :

نقوم بتخزين الوثيقة ونافذة في المتغيرات، لذلك لا يتوجب علينا إنشاء كائنات في كل مرة :

var $doc = $(document);
var $win = $(window);
var $videoContainer = $(‘.street-view’);
var video = $(‘.street-view > video’)[0];

تعريف المتغيرات عرض الإطار والارتفاع ، (انظر calculateDimensions ()).

var windowHeight, windowWidth;
var fullHeight, scrollHeight;

نحدد أبعاد الصور المخزنة في الثوابت (وإلا سيكون علينا الانتظار حتى يتم تحميل الصور أو الفيديو قبل أن نتمكن من تغيير حجم الحاويات في الواقع).

var streetImgWidth = 1024, streetImgHeight = 640;

نحن نريد الحفاظ على الوضع الحالي التمرير (بين 0 و 1) في المتغير.

var currentPosition = 0;

في كل مرة يتم تغيير حجم الإطار نحن بحاجة إلى إعادة حساب الأبعاد، تغيير حجم صورة وخلفية / الفيديو واستدعاء معالج التمرير.

function calculateDimensions() {
windowWidth = $win.width();
windowHeight = $win.height();
fullHeight = $(‘#main’).height();
scrollHeight = fullHeight – windowHeight;
}
function handleResize() {
calculateDimensions();
resizeBackgroundImage();
handleScroll();
}
function resizeBackgroundImage(){
// get image container size
var scale = Math.max( windowHeight/streetImgHeight , windowWidth/streetImgWidth );
var width = scale * streetImgWidth , height = scale * streetImgHeight;
var left = (windowWidth-width)/2, top = (windowHeight-height)/2;
$videoContainer
.width(width).height(height)
.css(‘position’,’fixed’)
.css(‘left’,left+’px’)
.css(‘top’,top+’px’);
}

الآن كل ما تبقى هو التأكد من أن كل مرة يتم تمرير الوثيقة، سوف ننتقل إلى موقف وفق داخل الفيديو :

function handleScroll() {
currentPosition = $win.scrollTop() / scrollHeight;
render( currentPosition );
}
function render( position ) {
if ( video.duration ) {
video.currentTime = position * video.duration;
}
}

قم بدعوة “handleResize ()” للتأكد من أن كل شيء في layouted في حجمها الصحيح.

$win.resize( handleResize );
$win.scroll( handleScroll );

handleResize();

وهذا هو التنفيذ اضغط هنـــــــــــــــــــــا