Приостановка видео внутри чистого CSS-режима при закрытии с использованием внешнего источника видеоплеера - PullRequest
Новая
       22

Приостановка видео внутри чистого CSS-режима при закрытии с использованием внешнего источника видеоплеера

0 голосов
/ 03 июня 2019

В настоящее время я использую внешний видеопроигрыватель для преобразования различных видео в модалы с помощью iframe, вызываемого функцией PHP (см. Код ниже). Видеоплеер отсюда: https://onelineplayer.com/

Для модальных я использую модальное решение css отсюда: https://github.com/drublic/css-modal/

Видео загружается нормально, все идет гладко, но я пока не могу преодолеть одно препятствие: я хочу приостановить или остановить видео после закрытия модального режима, либо нажав кнопку закрытия, либо щелкнув за пределами модальной области. Как я могу это сделать?

Вот как это выглядит: https://vimeo.com/339937444

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

var vid = document.getElementsByClassName('oneline');
$('#modal-close').click(function(){
vid.pause();
});

var $video = $(".oneline")[0];
$video.autoplay = false;

$(".modal-close").click(function() {
$video.pause();
$video.currentTime = 0;
});

Это HTML-код модального окна: 

 <section class="modal--show modal-main" id="<?php echo $postid; ?>"     
  tabindex="-1" role="dialog" aria-labelledby="<?php echo $postid; ?>" aria-hidden="true">
  <div class="modal-inner">
    <header id="modal-label">
    </header>

    <div class="modal-content">
      <?php echo wp_show_posts_videolink(); ?>
    </div>

  </div>

  <a href="#!" class="modal-close" id="modal-close" title="Close this modal" 
  data-close="Close" data-dismiss="modal" >
</a>
</section>

Это (закороченный) вывод wp_show_posts_videolink (); Функция сверху, отображающая весь iframe onelineplayer вместо того, чтобы открыть модал: 

  <iframe allowfullscreen="" scrolling="no" style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px;" src="https://onelineplayer.com/player.html?autoplay=false&amp;loop=false&amp;autopause=true&amp;muted=true&amp;url=https://vimeo.com/189904045&amp;poster=null&amp;time=true&amp;progressBar=true&amp;playButton=true&amp;overlay=true&amp;muteButton=true&amp;fullscreenButton=true&amp;style=light&amp;logo=false&amp;quality=720p" frameborder="0"></iframe>
#document
<html>
<head>

  <meta property="og:url" content="https://onelineplayer.com">
  <meta property="og:image" content="https://onelineplayer.com/common/images/ol-og-screen.png">
  <link rel="stylesheet" href="player.css">
  <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA119543203-1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'UA-119543203-1');
  </script>
</head>
<body class="oneline-player">
  <div class="oneline-wrap oneline-ready oneline-paused">
    <video class="oneline" preload="metadata" playsinline="" 
    src="https://gcs.vimeo.akamaized.net/exp=1559553745~acl=%2A%2F633644040.mp4%2A~hmac=feeca06925acd17aa4dfa5ee1221dd58a20d016081d5f20667e1a76ba6c59ff0/vimeo-prod-skyfire-std-us/01/2980/7/189904045/633644040.mp4" poster="https://i.vimeocdn.com/video/600730411"></video>
    <script src="player.js"></script>
    <script>
      init()
    </script>

  </body>
  </html>
</iframe>

Что для меня важно, так это то, что видео внутри класса oneline-wrap останавливается после закрытия модального окна. Я пытался заставить класс с паузой в нем, когда он был закрыт, но это не сработало. Я действительно недостаточно осведомлен, чтобы хорошо разобраться в проблеме, возможно, некоторые из вас могут указать мне верное направление решения этой проблемы.

1 Ответ

1 голос
/ 03 июня 2019

Ваша основная проблема в том, что вы пытаетесь получить доступ к содержимому iFrame onelineplayer.com с помощью кода JavaScript, который находится за пределами iFrame. Это не позволит вам сделать это из-за той же политики происхождения, которая запрещает JavaScript доступ к контенту через домены.

Технически существуют способы связи с междоменным iFrame, но другой стороне (в вашем случае onelineplayer.com) необходимо реализовать / разрешить ее со своей стороны.

Все ваши видео с vimeo? Есть какая-то конкретная причина, по которой вы используете onelineplayer.com, а не более "родную" интеграцию vimeo?

...