javascript - 停止播放视频

Question

我在同一页面上有两个视频，它们在 iframe 中打开。当我关闭弹出窗口时，视频不会停止。它一直在播放。由于我无法控制的情况，我必须在 iframe 中处理视频。

有人可以帮忙吗，下面是相同的代码:

jQuery:

$("[data-media]").on("click", function(e) {
    e.preventDefault();
    var $this = $(this);
    var videoUrl = $this.attr("data-media");
    var popup = $this.attr("href");
    var $popupIframe = $(popup).find("iframe");

    $popupIframe.attr("src", videoUrl);



    var left = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var left = left/2 - 340;

    var top = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    var top = top/2 - 180;

    document.getElementById("vid").style.top = top + "px";
    document.getElementById("vid").style.left = left + "px"; 
    document.getElementById("vid1").style.top = top + "px";
    document.getElementById("vid1").style.left = left + "px"; 

    $this.closest(".page").addClass("show-popup");
});

$(".popup").on("click", function(e) {
    e.preventDefault();
    e.stopPropagation();

    $(".page").removeClass("show-popup");
});

$(".popup > iframe").on("click", function(e) {
    e.stopPropagation();
});

HTML:

<div class="popup" id="media-popup"> <!-- video embedded -->
                <iframe id="vid" src="http://player.vimeo.com/video/1212121210?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                <iframe class="show-2" style="display: none;" id="vid1" src="http://player.vimeo.com/video/112324343?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>   
                <a class="video-close" href="#0"></a>
            </div><!-- popup -->


<a id="video" data-media="//www.vimeo.com/134243242">video 1</a>
<a id="video" class="video-2" data-media="//www.vimeo.com/00102102">Video 2</a>

Answer 1

这对我很有帮助，看看吧! click here to go to the original answer

基本上，您需要使用 iframe 或视频来启动播放器，并且该代码会在您需要时停止它。

var stopVideo = function ( element ) {
var iframe = element.querySelector( 'iframe');
var video = element.querySelector( 'video' );
if ( iframe !== null ) {
    var iframeSrc = iframe.src;
    iframe.src = iframeSrc;
}
if ( video !== null ) {
    video.pause();
}
};