2016-06-13 1 views
1

У меня есть длинная веб-страница, которая прокручивает по вертикали несколько видеороликов. Используя Media Element Player, воспроизводятся видео, но если вы перейдете в полноэкранный режим и выйдете из полноэкранного режима, страница вернется в самую верхнюю часть, независимо от того, где находится видео на странице. Я хочу, чтобы он вернулся в то же место. Вот код, я использую:Media Element Player Выход из полноэкранного прокрутки Проблема

var topPosition; 

MediaElementPlayer.prototype.enterFullScreen_org =   
MediaElementPlayer.prototype.enterFullScreen; 
MediaElementPlayer.prototype.enterFullScreen = function() { 
    console.log('enter full screen'); 
    this.enterFullScreen_org(); 
    topPosition = window.pageYOffset; 
    console.log(topPosition); 
} 

MediaElementPlayer.prototype.exitFullScreen_org = 
MediaElementPlayer.prototype.exitFullScreen; 
MediaElementPlayer.prototype.exitFullScreen = function() { 
    console.log('exit full screen') 
    this.exitFullScreen_org(); 
    ResetFullScreen(); 
} 

function ResetFullScreen() { 
    console.log('top pos:', topPosition); 
    setTimeout(function() { window.scrollTo(0, topPosition) }, 500); 
} 

console.log показывает правильное значение «topPosition», но метод window.scrollTo не появляется на работе.

ответ

0

Просматривая ваш код, похоже, что он должен работать. Однако у меня есть еще один способ установки прокрутки, которая может работать. Это будет полезно, если элемент, который вы прокручиваете, не находится на верхнем уровне.

При сохранении позиции прокрутки:

topPosition = document.body.scrollTop; 

При установке положения прокрутки:

document.body.scrollTop = topPosition; 

Если то, что вы пытаетесь прокрутить элемент внутри тела, а не само тело , просто замените document.body на элемент, который вам нужно прокрутить.

Кроме того, я нашел маленькую вещь в вашем коде:

MediaElementPlayer.prototype.enterFullScreen;' 

Там в случайной цитаты в конце этой линии.


EDIT:

Если этот способ не работает, у меня есть еще одна идея для вас. Когда они нажимают на видео, которое они просматривают, сохраните элемент, который они нажали в переменной. После выхода из полноэкранного режима прокрутите элемент в представлении. Таким образом, вы будете, более или менее, где экран был, когда он вошел в полноэкранный режим.

Каждое видео имеет onclick, содержащий следующее; это сохраняет элемент, на который они нажали.

lastVideoClicked = event.target; 

При выходе из полноэкранного режима этот код попытается прокрутить этот элемент обратно в поле зрения.

lastVideoClicked.scrollIntoView(); 

Вы можете попробовать его на сайте Stack Overflow здесь - перейдите к нижней части страницы, откройте консоль JavaScript и введите код document.getElementById('hlogo').scrollIntoView(). При этом прокручивается логотип Stack Overflow.

+0

Это будет работать, но по какой-то причине после выхода из полноэкранного режима свойство document.body.scrollTop не работает. Он работает до ввода/выключения полного экрана, но не после. Я тестировал на консоли. –

+0

Это действительно странно ... Я никогда не видел этого раньше. Я собираюсь добавить к ответу еще один метод, о котором я могу думать ... – MineAndCraft12