我目前正在使用外部视频播放器使用由 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&loop=false&autopause=true&muted=true&url=https://vimeo.com/189904045&poster=null&time=true&progressBar=true&playButton=true&overlay=true&muteButton=true&fullscreenButton=true&style=light&logo=false&quality=720p" frameborder="0"></iframe>
#document
<html>
<head>
对我来说重要的是，一旦模态关闭，oneline-wrap 类中的视频就会暂停。我尝试在关闭时强制将一个单行暂停的类放入其中，但这没有用。我真的没有足够的知识来很好地解决这个问题，也许你们中的一些人可以指出我解决这个问题的正确方向。
相关分类