关闭时使用外部视频播放器源在纯 css 模式中暂停视频

Question

我目前正在使用外部视频播放器通过 PHP 函数调用的 iframe 将不同的视频放入模式中（参见下面的代码）。视频播放器是来自这里的单行播放器：https://onelineplayer.com/

对于模态，我目前使用的是 css 模态解决方案： https://github.com/drublic/css-modal/

视频加载正常，一切运行顺利，我无法克服的一个障碍是：我想在模态关闭后暂停或停止视频，方法是单击关闭按钮或在模态外部单击区域。我该怎么做？

我已经在 Whosebug 和其他网站上尝试了各种解决方案，但没有找到解决我的问题的有效解决方案。现在我正坐在这段代码上，试图让 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;
});

这是模态Window的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() 的（短路）输出；从上面的函数显示整个 onelineplayer iframe 而不是一旦打开模式：

  <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 class 内的视频就会暂停。我尝试在关闭时强制将 oneline-paused class 放入其中，但这没有用。我真的不够了解这个问题，也许你们中的一些人可以指出我解决这个问题的正确方向。

Answer 1

您的基本问题是，您试图使用位于 iFrame 外部的 JavaScript 代码访问 onelineplayer.com iFrame 的内容。由于同源政策，它不会让您这样做，这会阻止 JavaScript 跨域访问内容。

从技术上讲，有一些方法可以与 cross-domain iFrame 进行通信，但另一方（在您的情况下 onelineplayer.com）需要从他们这边 implement/allow 它。

你的视频都是vimeo的吗？您使用 onelineplayer.com 而不是更多 "native" 集成 vimeo 的具体原因是什么？

关闭时使用外部视频播放器源在纯 css 模式中暂停视频

Pausing a video inside a pure css modal when closing, using an external videoplayer source

javascript

wordpress

modal-dialog

html5-video

pause