MediaElement.js + Specat jQuery Modal: Как сделать паузу видео/аудио на ×

Question

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

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

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

В главе DOM между тегами сценария

      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, либо файл Specat.js, возможно, потребуется настроить или что -то в этом роде?

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

Answer 1

Получил это с помощью этого сценария ...

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

На каждой странице было несколько VIDS MediaElement.js (по одному для каждого потенциального модала) ... Каждый VID был идентифицирован с одним и тем же атрибутом ID = "Player2" ... который также удерживал страницу от проверки. Попробовал переключить это в моем оригинальном скрипте с GetElementById на GetElementByName ... не сработал. Создал класс вместо идентификатора для каждого игрока ...что не работал. Безрассудный вопрос о проблемах проверки: вышеуказанное решение-воспроизведение, вставляя класс .close-reveal-modal непосредственно в скрипт «Stop All» для MediaElement.js отлично работает. (Спасибо @fabrizio за предложение, чтобы я проверил свои атрибуты идентификатора с самого начала ...)

Answer 2

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

Попробуйте переместить эти инструкции внизу или на Dom Ready Event