在 JavaScript 中隐藏/显示 - 停止播放 YouTube iframe 视频

问题描述

我已经使用 iframe 函数嵌入视频，并且我正在通过 JavaScript 隐藏/显示内容和视频.

我有一个问题.当我在第一个视频上按播放键，然后在不停止第一个视频的情况下单击下一个视频，第一个视频继续播放.

在显示新内容时，如何在背景"中停止视频?

$(function(){$("#link1").click(show1);});功能显示1(){$("#pic1").fadeIn();$("#pic2").hide();}

我只是使用这个简单的 JavaScript 函数，其中pic1"和pic2"id 是 div 的 id，视频被嵌入其中.

我似乎无法让它发挥作用.我试图删除，但如果你想，你就不能再看到视频了.

解决方案

这是 YouTube 播放器 API 的一个实现，无需加载其他文件.要完成这项工作，您必须为所有 的 src 属性添加后缀 ?enablejsapi=1.

示例(为了便于阅读，我将代码分成几行，您可以安全地省略换行符):

<iframe width="640" height="390"src="http://www.youtube.com/embed/Xub4grFLbQM?enablejsapi=1"frameborder="0" allowfullscreen></iframe>
<div id="tS2" class="jThumbnailScroller">.. 删除了您的代码以提高可读性....<a href="#vid3" id="link3"><img src="images/thumbs/player2.jpg" height="85"/></a>....

JavaScript + jQuery 代码:

$(function() {/* elt: 可选的，一个 HTMLIFrameElement.将播放此帧的视频，*       如果可能的话.其他视频将暂停*/功能 playVideoAndPauseOthers(frame) {$('iframe[src*="http://www.youtube.com/embed/"]').each(function(i) {var func = this === 框架?'playVideo': '暂停视频';this.contentWindow.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');});}$('#tS2 a[href^="#vid"]').click(function() {var frameId =/#vid(d+)/.exec($(this).attr('href'));如果 (frameId !== null) {frameId = frameId[1];//获取frameIdplayVideoAndPauseOthers($('#pic' + frameId + ' iframe')[0]);}});});

I've used the iframe function to embed videos, and I'm hiding/showing the content and videos through JavaScript.

I have one problem. When I press play on the first video, and then click on the next without stopping the first one, the first one just keeps on playing.

What can I do to stop the video in the "background", when showing new content?

$(function(){
    $("#link1").click(show1);
});

function show1(){
    $("#pic1").fadeIn();
    $("#pic2").hide();
}

I'm just using this simple JavaScript function, where the "pic1" and "pic2" id is the id of the div, the video are embedded in.

I just can't seem to make it work. I tried to put remove, but then you can't see the video again if you want to.

解决方案

This is an implementation of the YouTube player API, without loading additional files. To get this work, you have to suffix all of your <iframe>'s src attribute with ?enablejsapi=1.

Example (I broke the code over a few lines for readability, you can safely omit the linebreaks):

<div id="pic3">
    <iframe width="640" height="390"
            src="http://www.youtube.com/embed/Xub4grFLbQM?enablejsapi=1"
            frameborder="0" allowfullscreen></iframe>
</div>

<div id="tS2" class="jThumbnailScroller">
.. Removed your code for readability....
    <a href="#vid3" id="link3"><img src="images/thumbs/player2.jpg" height="85"/></a>
    ....

JavaScript + jQuery code:

$(function() {
    /* elt: Optionally, a HTMLIFrameElement. This frame's video will be played,
     *       if possible. Other videos will be paused*/
    function playVideoAndPauseOthers(frame) {
        $('iframe[src*="http://www.youtube.com/embed/"]').each(function(i) {
            var func = this === frame ? 'playVideo' : 'pauseVideo';
            this.contentWindow.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
        });
    }
    $('#tS2 a[href^="#vid"]').click(function() {
        var frameId = /#vid(d+)/.exec($(this).attr('href'));
        if (frameId !== null) {
            frameId = frameId[1]; // Get frameId
            playVideoAndPauseOthers($('#pic' + frameId + ' iframe')[0]);
        }
    });
});

这篇关于在 JavaScript 中隐藏/显示 - 停止播放 YouTube iframe 视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！