web-dev-qa-db-ja.com

iframeを非表示にしているときにYouTubeプレーヤーを一時停止するにはどうすればよいですか？

<iframe>にYouTube動画を含む非表示のdivがあります。ユーザーがリンクをクリックすると、このdivが表示され、ユーザーはビデオを再生できるようになります。

ユーザーがパネルを閉じると、ビデオの再生が停止します。どうすればこれを達成できますか？

コード：

<!-- link to open popupVid -->
<p><a href="javascript:;" onClick="document.getElementById('popupVid').style.display='';">Click here</a> to see my presenting showreel, to give you an idea of my style - usually described as authoritative, affable and and engaging.</p>

<!-- popup and contents -->
<div id="popupVid" style="position:absolute;left:0px;top:87px;width:500px;background-color:#D05F27;height:auto;display:none;z-index:200;">

  <iframe width="500" height="315" src="http://www.youtube.com/embed/T39hYJAwR40" frameborder="0" allowfullscreen></iframe>

  <br /><br /> 
  <a href="javascript:;" onClick="document.getElementById('popupVid').style.display='none';">
  close
  </a>
</div><!--end of popupVid -->
javascriptyoutube-apiyoutube-javascript-api
84
0161-Jon

この動作を実装する最も簡単な方法は、必要に応じてpauseVideoおよびplayVideoメソッドを呼び出すことです。 前の回答 の結果に触発されて、希望する動作を達成するためのプラグインなしの関数を作成しました。

唯一の調整：

  • 関数toggleVideoを追加しました
  • この機能を有効にするために、YouTubeのURLに?enablejsapi=1を追加しました

デモ： http://jsfiddle.net/ZcMkt/
コード：

<script>
function toggleVideo(state) {
    // if state == 'hide', hide. Else: show video
    var div = document.getElementById("popupVid");
    var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
    div.style.display = state == 'hide' ? 'none' : '';
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
}
</script>

<p><a href="javascript:;" onClick="toggleVideo();">Click here</a> to see my presenting showreel, to give you an idea of my style - usually described as authoritative, affable and and engaging.</p>

<!-- popup and contents -->
<div id="popupVid" style="position:absolute;left:0px;top:87px;width:500px;background-color:#D05F27;height:auto;display:none;z-index:200;">
   <iframe width="500" height="315" src="http://www.youtube.com/embed/T39hYJAwR40?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
   <br /><br />
   <a href="javascript:;" onClick="toggleVideo('hide');">close</a>
177
Rob W

モーダルウィンドウでiframeを非表示/一時停止する使用法に対するRobWの答えをjQueryが取り上げています。

    function toggleVideo(state) {
        if(state == 'hide'){
            $('#video-div').modal('hide');
            document.getElementById('video-iframe'+id).contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
        }
        else {
            $('#video-div').modal('show');
            document.getElementById('video-iframe'+id).contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
        }
    }

参照されるhtml要素は、show/hideメソッドを呼び出すモーダルdiv自体（＃video-div）と、src = ""のようにビデオのURLを持ち、接尾辞enablejsapiを持つiframe（＃video-iframe）です。 = 1？ プレーヤーのプログラムによる制御を可能にします（例。

HTMLの詳細については、RobWの回答を参照してください。

23
DrewT

RobWとDrewTの回答に基づいてページ上のすべての動画を一時停止する簡単なjQueryスニペットを次に示します。

jQuery("iframe").each(function() {
  jQuery(this)[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')
});
15
quartarian

簡単な方法は、ビデオのsrcを何も設定しないことです。そのため、ビデオが非表示になっている間はビデオが消え、ビデオを開くリンクをクリックするとsrcが目的のビデオに戻ります。 youtube iframeにIDを設定し、次のようにそのIDを使用してsrc関数を呼び出します。

<script type="text/javascript">
function deleteVideo()
{
document.getElementById('VideoPlayer').src='';
}

function LoadVideo()
{
document.getElementById('VideoPlayer').src='http://www.youtube.com/embed/WHAT,EVER,YOUTUBE,VIDEO,YOU,WHANT';
}
</script>

<body>

<p onclick="LoadVideo()">LOAD VIDEO</P>
<p onclick="deleteVideo()">CLOSE</P>

<iframe id="VideoPlayer" width="853" height="480" src="http://www.youtube.com/WHAT,EVER,YOUTUBE,VIDEO,YOU,HAVE" frameborder="0" allowfullscreen></iframe>

</boby>
9
Paula

その他の回答 に記載されているplayVideo/pauseVideoコマンドを使用する前に、iframeのsrcに?enablejsapi=trueを設定する必要があるため、これをJavascriptを介してプログラムで追加します（特に、たとえば、YouTube埋め込みコードをカットアンドペーストしたばかりの他のユーザーによって埋め込まれたビデオにこの動作を適用したい場合）。その場合、次のようなものが役に立つかもしれません：

function initVideos() {

  // Find all video iframes on the page:
  var iframes = $(".video").find("iframe");

  // For each of them:
  for (var i = 0; i < iframes.length; i++) {
    // If "enablejsapi" is not set on the iframe's src, set it:
    if (iframes[i].src.indexOf("enablejsapi") === -1) {
      // ...check whether there is already a query string or not:
      // (ie. whether to prefix "enablejsapi" with a "?" or an "&")
      var prefix = (iframes[i].src.indexOf("?") === -1) ? "?" : "&amp;";
      iframes[i].src += prefix + "enablejsapi=true";
    }
  }
}

...document.readyでこれを呼び出すと、「video」のクラスを持つdiv内のすべてのiframeのソースにenablejsapi=trueが追加され、playVideo/pauseVideoコマンドが機能するようになります。

（nb。この例では、var iframesを設定するその1行にjQueryを使用していますが、jQueryを使用していない場合、一般的なアプローチは純粋なJavascriptでも同様に機能します）。

6
Nick F

Divを非表示にする前に、YouTubeプレーヤーインスタンスでstopVideo()メソッドを呼び出すことにより、動画を停止できます。

player.stopVideo()

詳細については、こちらをご覧ください： http://code.google.com/apis/youtube/js_api_reference.html#Playback_controls

5
david

RobWの方法は私にとってはうまくいきました。 jQueryを使用している人のために、私が最終的に使用した簡易バージョンを以下に示します。

var iframe = $(video_player_div).find('iframe');

var src = $(iframe).attr('src');      

$(iframe).attr('src', '').attr('src', src);

この例では、「video_player」はiframeを含む親divです。

4
skribbz14

1つのページに複数のYouTubeビデオが埋め込まれている場合に機能するjQueryを使用して考案したソリューションを共有したかったのです。私の場合、各ビデオのモーダルポップアップを次のように定義しました。

<div id="videoModalXX">
...
    <button onclick="stopVideo(videoID);" type="button" class="close"></button>
    ...
    <iframe width="90%" height="400" src="//www.youtube-nocookie.com/embed/video_id?rel=0&enablejsapi=1&version=3" frameborder="0" allowfullscreen></iframe>
...
</div>

この場合、videoModalXXはビデオの一意のIDを表します。次に、次の関数がビデオを停止します。

function stopVideo(id)
{
    $("#videoModal" + id + " iframe")[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
}

このアプローチが好きなのは、戻って後で見たい場合に備えて、中断したところからビデオを一時停止したままにするからです。特定のIDを持つビデオモーダル内のiframeを探しているので、私にとってはうまくいきます。特別なYouTube要素IDは必要ありません。うまくいけば、誰かがこれも役に立つと思うでしょう。

4
Poldon

iframeのsrcを削除するだけです

$('button.close').click(function(){
    $('iframe').attr('src','');;
});
2
rakesh kejriwal

Rob Wの回答は、スライダーが非表示になっているときにiframeでビデオを一時停止する方法を見つけるのに役立ちました。それでも、私はそれを機能させる前にいくつかの修正が必要でした。これが私のhtmlのスニペットです。

<div class="flexslider" style="height: 330px;">
  <ul class="slides">
    <li class="post-64"><img src="http://localhost/.../Banner_image.jpg"></li>
    <li class="post-65><img  src="http://localhost/..../banner_image_2.jpg "></li>
    <li class="post-67 ">
        <div class="fluid-width-video-wrapper ">
            <iframe frameborder="0 " allowfullscreen=" " src="//www.youtube.com/embed/video-ID?enablejsapi=1 " id="fitvid831673 "></iframe>
        </div>
    </li>
  </ul>
</div>

これがlocalhostsで動作し、Rob Wが「enablejsapi = 1」が動画URLの最後に追加されました。

以下は私のJSファイルです。

jQuery(document).ready(function($){
    jQuery(".flexslider").click(function (e) {
        setTimeout(checkiframe, 1000); //Checking the DOM if iframe is hidden. Timer is used to wait for 1 second before checking the DOM if its updated

    });
});

function checkiframe(){
    var iframe_flag =jQuery("iframe").is(":visible"); //Flagging if iFrame is Visible
    console.log(iframe_flag);
    var tooglePlay=0;
    if (iframe_flag) {                                //If Visible then AutoPlaying the Video
        tooglePlay=1;
        setTimeout(toogleVideo, 1000);                //Also using timeout here
    }
    if (!iframe_flag) {     
        tooglePlay =0;
        setTimeout(toogleVideo('hide'), 1000);  
    }   
}

function toogleVideo(state) {
    var div = document.getElementsByTagName("iframe")[0].contentWindow;
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    div.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
};

また、より単純な例として、これを JSFiddle で確認してください。

1
Fahim

このアプローチにはjQueryが必要です。まず、iframeを選択します。

var yourIframe = $('iframe#yourId');
//yourId or something to select your iframe.

ここで、このiframeの再生/一時停止ボタンを選択してクリックします

$('button.ytp-play-button.ytp-button', yourIframe).click();

それがあなたのお役に立てば幸いです。

1
Hongarc

ここと他の場所でのRobWの回答は非常に役に立ちましたが、私のニーズはもっとシンプルであることがわかりました。私はこれに答えました elsewhere ですが、おそらくここでも役に立つでしょう。

UIWebViewにロードされるHTML文字列を形成するメソッドがあります。

NSString *urlString = [NSString stringWithFormat:@"https://www.youtube.com/embed/%@",videoID];

preparedHTML = [NSString stringWithFormat:@"<html><body style='background:none; text-align:center;'><script type='text/javascript' src='http://www.youtube.com/iframe_api'></script><script type='text/javascript'>var player; function onYouTubeIframeAPIReady(){player=new YT.Player('player')}</script><iframe id='player' class='youtube-player' type='text/html' width='%f' height='%f' src='%@?rel=0&showinfo=0&enablejsapi=1' style='text-align:center; border: 6px solid; border-radius:5px; background-color:transparent;' rel=nofollow allowfullscreen></iframe></body></html>", 628.0f, 352.0f, urlString];

PrepareHTML文字列のスタイル設定は無視できます。重要な側面は次のとおりです。

  • APIを使用して「YT.player」オブジェクトを作成します。ある時点では、iFrameタグにビデオしかなかったため、後でJSで「プレーヤー」オブジェクトを参照できませんでした。
  • 最初のスクリプトタグ（iframe_api srcタグを持つもの）が省略されているいくつかの例をWebで見ましたが、これを機能させるためには絶対に必要でした。
  • APIスクリプトの最初に「player」変数を作成します。また、その行を省略した例もいくつか見ました。
  • APIスクリプトで参照されるiFrameにidタグを追加します。私はその部分をほとんど忘れていました。
  • IFrame srcタグの末尾に「enablejsapi = 1」を追加します。最初はiFrameタグの属性として持っていたので、しばらくハングアップしました。これは機能しません/機能しませんでした。

ビデオを一時停止する必要があるとき、これを実行するだけです：

[webView stringByEvaluatingJavaScriptFromString:@"player.pauseVideo();"];

お役に立てば幸いです！

0
Brian

より簡潔でエレガントで安全な答え：ビデオURLの最後に「？enablejsapi = 1」を追加してから、pauseコマンドを表す通常のオブジェクトを構築して文字列化します。

const YouTube_pause_video_command_JSON = JSON.stringify(Object.create(null, {
    "event": {
        "value": "command",
        "enumerable": true
    },
    "func": {
        "value": "pauseVideo",
        "enumerable": true
    }
}));

Window.postMessageメソッドを使用して、結果のJSON文字列を埋め込みビデオドキュメントに送信します。

// |iframe_element| is defined elsewhere.
const video_URL = iframe_element.getAttributeNS(null, "src");
iframe_element.contentWindow.postMessage(YouTube_pause_video_command_JSON, video_URL);

メッセージが意図しない受信者に送信されないように、Window.postMessageメソッドのtargetOrigin引数にビデオURLを指定してください。

0
Patrick Dark

これはYTプレーヤーでうまく機能しています

 createPlayer(): void {
  return new window['YT'].Player(this.youtube.playerId, {
  height: this.youtube.playerHeight,
  width: this.youtube.playerWidth,
  playerVars: {
    rel: 0,
    showinfo: 0
  }
});
}

this.youtube.player.pauseVideo（）;

0
HuyLe