Как запустить MediaElementPlayer при прокрутке в окне?

Question

Как запустить MediaElementPlayer при прокрутке в окне?

0

Поэтому мне было интересно, смогу ли я сделать так, чтобы видео на моем веб-сайте начинало играть, когда пользователь просматривает его. Я пробовал довольно много вещей, таких как scrollspy и какой-то другой код, который я нашел на этом веб-сайте, но ничто из этого не работает, я всегда получаю тот же результат: сайт полностью запутывается, фотографии перемещаются из поля зрения, разделы меняют места или исчезают, и это не очень весело.

Это текущий JS-код для нашего MediaElementPlayer:

if ($('.video-promo').length ) {
    var player_promo = new MediaElementPlayer('.video-promo', {
        videoWidth: '100%',
        videoHeight: '100%',
        loop: false,
        alwaysShowControls: true,
        features: [],
    });

    player_promo.play();
}

И HTML:

        <section class="promo motions">
        <video class="video-promo">
                <source type="video/mp4" src="assets/video/demo.mp4" />
        </video>
      <div class="video-overlay"></div>
    </section>

Приветствия за любую помощь! : D

Aria Roberts 18 фев. 2014, в 09:59

Источник

0

Не могли бы вы опубликовать скрипку, чтобы помочь вам быстрее?
xhallix 18 фев. 2014, в 08:38

Теги:

javascript

html

video

1 ответ

Ещё вопросы

Не могли бы вы опубликовать скрипку, чтобы помочь вам быстрее?

Sgoldy · Answer 1 · 2014-02-18T07-20-00.000Z

Проверьте ответ Dan: Как узнать, отображается ли элемент DOM в текущем окне просмотра?

Вкратце вы можете добавить:

function isElementInViewport (el) {
    var rect = el.getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
    );
}

function elementVisibilityMayChange () {
    return function () {
        if ( isElementInViewport($('.video-promo')[0]) ) {
            player_promo.play();
        }
    }
}

var handler = elementVisibilityMayChange();

$(window).on('DOMContentLoaded load resize scroll', handler);

В любом месте на странице с видео плеер будет делать.
Я сделал именно это, но это все равно испортило страницу. Пример: i.imgur.com/dDdMIjz.png & i.imgur.com/xkpRB5M.png (это видео - обычно оно занимает всю эту область. Я бы показал больше, но я не очень хочу показывать тоже большая часть моего незаконченного сайта: 3
Хорошо, я получил его, чтобы перестать портить страницу, но он по-прежнему не воспроизводит видео, когда я прокручиваю на него.