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

我目前正在使用外部视频播放器使用由 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>

对我来说重要的是,一旦模态关闭,oneline-wrap 类中的视频就会暂停。我尝试在关闭时强制将一个单行暂停的类放入其中,但这没有用。我真的没有足够的知识来很好地解决这个问题,也许你们中的一些人可以指出我解决这个问题的正确方向。


慕桂英4014372
浏览 156回答 1
1回答
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript