MediaElement.js + Показать модальное JQuery: как приостановить видео / аудио× </a>

Question

Как одновременно приостановить проигрыватель и заставить скользящий модал сдвинуться вверх / в сторону («открыть»)?

В настоящее время, после нажатия кнопки воспроизведенияи верхний левый угол (x) ... на & # 215; ... нажата ... модал отодвигается, но видео продолжает воспроизводиться.Чтобы избежать этого, пользователь должен: 1) приостановить видео, а затем 2) закрыть модал.Я хотел бы щелкнуть или нажать на любой из триггеров модала - например, нажав (x) - чтобы выполнить оба действия одновременно.Я пытаюсь найти решение, которое будет работать на разных платформах / устройствах.

Вот то, что я получил до сих пор, но оно не работает ...

В ГОЛОВЕ ДОМА МЕЖДУ ПИСЬМЕННЫМИ ПАКЕТАМИ

      document.getElementById("pauseX").onclick = function () {
      document.getElementById('player2').pause();
      };

ТРИГГЕР ДЛЯ ВЫЯВЛЕНИЯ МОДАЛЬНЫХ

   <a href="#" data-reveal-id="vid-1">Click here to reveal modal.</a>

ВИДЕО + МОДАЛЬНЫЙ КОНТЕЙНЕР

   <div id="vid-1" class="reveal-modal">
       <div class="center">
           <video width="480" height="270" id="player2" poster="../media/vid-1.jpg" controls="controls" preload="none">
               <source type="video/mp4" src="../media/vid-1-480x320.mp4" />
               <source type="video/webm" src="../media/vid-1-640x480.webm" />
               <object width="480" height="270" type="application/x-shockwave-flash" data="../build/flashmediaelement.swf">         
                   <param name="movie" value="../build/flashmediaelement.swf" /> 
                   <param name="flashvars" value="controls=true&amp;file=../media/vid-1-480x320.mp4" />         
                   <img src="../media/vid-1.jpg" width="480" height="270" alt="Vid 1" 
        title="No video playback. Update browser, enable Javascript, or install Flash." />
               </object>    
           </video>
          </div>
          <a id="pauseX" class="close-reveal-modal">&#215;</a>
   </div>

Уже пробовали многие другие решения, включая ...

Javascript для остановки воспроизведения видео HTML5 при закрытии модального окна

... поэтому любая помощь приветствуется.Я думаю, что возможно либо файл MediaElement.js, либо файл Reveal.js, возможно, потребуется настроить или что-то еще?

Между прочим, нажатие в любом месте за пределами модального режима, т. Е. На «блеск», вызывает его скольжение вверх / в сторону;нажатие клавиши Escape на клавиатуре делает то же самое.Нажатие в любом месте на видеоплеере вызывает его паузу.Хотелось бы, чтобы все эти функции сохранялись вместе с прослушиванием на мобильных устройствах.(Еще не проверял.)

Answer 1

Понял с помощью этого скрипта ...

<script>
    $('.close-reveal-modal').click(function() {
        $('video, audio').each(function() {
            $(this)[0].player.pause();        
        });
    });
</script>

На каждой странице было несколько видео MediaElement.js (по одному на каждый потенциальный модал) ... каждый видео идентифицировался с одним и тем же атрибутом id = "player2" ..., который также не позволял проверять страницу. Попытался переключить это в моем оригинальном скрипте с getElementByID на getElementByName ... не сработало. Создан класс вместо идентификатора для каждого игрока ... , который не работал. Независимо от проблем с проверкой: вышеприведенное решение - просто вставка класса .close-reve-modal непосредственно в сценарий «остановить все» для MediaElement.js прекрасно работает. (Спасибо @Fabrizio за предложение, чтобы я начал проверять свои атрибуты ID для начала ...)

Answer 2

если у вас есть document.getElementById("pauseX").onclick... в верхней части документа, возможно, код не работает, потому что элемент с идентификатором pauseX еще не находится в DOM.Посмотрите на консоль javascript, вы должны увидеть некоторые связанные ошибки

Попробуйте переместить эти инструкции внизу или на событие готовности DOM