个人中心
gpt4 book ai didi

javascript - 关闭时使用外部视频播放器源在纯 CSS 模式内暂停视频

转载 作者：行者123 更新时间：2023-12-02 23:32:47 24 4
gpt4 key购买 nike

我目前正在使用外部视频播放器，通过 PHP 函数调用的 iframe 将不同的视频放入模态中(请参阅下面的代码)。视频播放器是此处的 onelineplayer: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() 的(短路)输出；从上面的函数显示整个 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)放入其中，但这没有用。我真的没有足够的知识来很好地掌握这个问题，也许你们中的一些人可以给我指出解决这个问题的正确方向。

最佳答案

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

从技术上讲，有多种方法可以与跨域 iFrame 进行通信，但另一方(在您的情况下是 onelineplayer.com)需要从他们的一侧实现/允许它。

您的所有视频都是来自 vimeo 吗？您使用 onelineplayer.com 而不是更“原生”的 vimeo 集成有什么具体原因吗？

关于javascript - 关闭时使用外部视频播放器源在纯 CSS 模式内暂停视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56424084/

24 4 0
文章推荐： javascript - 运行样板 react 导航应用程序时的 "undefined is not an object (evaluating ' Component.router ')"
文章推荐： javascript - 即使指定了索引，对象中的所有数组值也会在 this.setState 中更新
文章推荐： javascript - 将纹理分配给 Three.js 中加载的 glb 模型
文章推荐： javascript - GTM javascript 不填充变量
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com