web-dev-qa-db-ja.com

jqueryでyoutubeビデオを停止しますか？

基本的に、負の左CSS値を適用してスライドする3つのパネルのみを作成したjqueryスライダーがあります。うまく機能しますが、1つのスライドにYouTubeビデオがありますが、スライドしても止まりません。 IE以外のすべてで動作するdisplay：noneとVisibility：hiddenを試してみましたが、オーディオはIEで動き続けます。

Jqueryでビデオを殺す簡単な方法はありますか？

javascriptjqueryyoutube
50
wesbos

APIドキュメント から：

player.stopVideo()

だからjQueryで：

$('#playerID').get(0).stopVideo();
37
cobbal

このソリューションはシンプルでエレガントで、すべてのブラウザーで機能します。

var video = $("#playerid").attr("src");
$("#playerid").attr("src","");
$("#playerid").attr("src",video);
86
HeyTiger

ビデオを開始するには

var videoURL = $('#playerID').prop('src');
videoURL += "&autoplay=1";
$('#playerID').prop('src',videoURL);

ビデオを停止するには

var videoURL = $('#playerID').prop('src');
videoURL = videoURL.replace("&autoplay=1", "");
$('#playerID').prop('src','');
$('#playerID').prop('src',videoURL);

追加パラメーターがない場合は、「＆autoplay = 1」を「？autoplay = 1」に置き換えることができます。

fFとChromeでvimeoとyoutubeの両方で動作します

18
Faiz Mohamed Haneef

1.含む

<script type="text/javascript" src="http://www.youtube.com/player_api"></script>

2. youtube iframeを追加します。

<iframe id="player" src="http://www.youtube.com/embed/YOURID?rel=0&wmode=Opaque&enablejsapi=1" frameborder="0"></iframe>

3.マジックタイム。

      <script>
            var player;
            function onYouTubePlayerAPIReady() {player = new YT.Player('player');}
            //so on jquery event or whatever call the play or stop on the video.
            //to play player.playVideo();
            //to stop player.stopVideo();
     </script>
18
Chris Wheaton

私は以前にこの問題を抱えていましたが、ビデオをIEで停止する唯一の方法はDOMから削除することです。

17
Felix

私は同じ問題に直面していました。多くの代替手段を実行した後、埋め込みsrc = ""を同じURLでリセットするだけでした。

コードスニペット：

  $("#videocontainer").fadeOut(200);<br/>
  $("#videoplayer").attr("src",videoURL);

ビデオを非表示にすると、少なくともビデオの再生を停止できました。:-)

8
JackSparrow

最新のYouTube embed形式で機能するこれに対する私のソリューションは次のとおりです。

ビデオの再生中のiframeにid="#video"、この単純なJavascriptが仕事をします。

$(document).ready(function(){
  var stopVideo = function(player) {
    var vidSrc = player.prop('src');
    player.prop('src', ''); // to force it to pause
    player.prop('src', vidSrc);
  };

  // at some appropriate time later in your code
  stopVideo($('#video'));

});

私は、YouTube APIが、サイトがhttpsサイトでない場合、またはYouTubeが推奨する最新の形式を使用してビデオが埋め込まれている場合、またはno-cookiesオプションを設定すると、これらのソリューションは機能しませんになり、ビデオの代わりに "TVがデッドチャンネルに設定されました"の効果が得られます。

上記をすべてのブラウザでテストしましたが、非常に確実に動作します。

7
Dave Sag

iframe srcにautoplayプロパティがある場合、src attr/propをリロードするのに役立ちませんので、autoplay = 1をautoplay =に置き換える必要があります

  var stopVideo = function(player) {
    var vidSrc = player.prop('src').replace('autoplay=1','autoplay=0');
    player.prop('src', vidSrc);
  };

  stopVideo($('#video'));
4
talsibony

残念ながら、オブジェクトタグのid属性が存在しない場合、play/stop/pauseVideo（）はIEで機能しません。

<object style="display: block; margin-left: auto; margin-right: auto;" width="425" height="344" data="http://www.youtube.com/v/7scnebkm3r0&amp;fs=1&amp;border=1&amp;autoplay=1&amp;enablejsapi=1&amp;version=3" type="application/x-shockwave-flash"><param name="allowFullScreen" value="true" />
  <param name="allowscriptaccess" value="always" />
  <param name="allowfullscreen" value="true" />
  <param name="src" value="http://www.youtube.com/v/7scnebkm3r0&amp;fs=1&amp;border=1&amp;autoplay=1&amp;enablejsapi=1&amp;version=3" />
</object>
<object id="idexists" style="display: block; margin-left: auto; margin-right: auto;" width="425" height="344" data="http://www.youtube.com/v/pDW47HNaN84&amp;fs=1&amp;border=1&amp;autoplay=1&amp;enablejsapi=1&amp;version=3" type="application/x-shockwave-flash">
  <param name="allowscriptaccess" value="always" />
  <param name="allowFullScreen" value="true" />
  <param name="src" value="http://www.youtube.com/v/pDW47HNaN84&amp;fs=1&amp;border=1&amp;autoplay=1&amp;enablejsapi=1&amp;version=3" />
</object>
<script>
  function pauseVideo()
  {
    $("object").each
    (
      function(index)
      {
        obj = $(this).get(0);
        if (obj.pauseVideo) obj.pauseVideo();
      }
    );
  }
</script>
<button onClick="pauseVideo();">Pause</button>

それを試してみてください！

3
Progz Killer

これを理解するのに少しスカウトする必要がありましたが、このクロスブラウザ実装に落ち着きました：

HTML

<div class="video" style="display: none">
    <div class="mask"></div>
    <a href="#" class="close-btn"><span class="fa fa-times"></span></a>
    <div class="overlay">
        <iframe id="player" width="100%" height="70%" src="//www.youtube.com/embed/Xp697DqsbUU" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

jQuery

$('.launch-video').click(function() {
  $('.video').show();
  $("#player").attr('src','//www.youtube.com/embed/Xp697DqsbUU'); 
});

$('.close-btn').click(function() {
  $('.video').hide();
  $("#player").attr('src','');   
});

基本的には、ライトボックスを開いてsrc属性を設定し、閉じるときにsrc値を削除するだけです（開いたときに値を再設定します）。

2
Matt Saunders

これは、YouTubeプレーヤーとVimeoプレーヤーの両方で機能します。基本的にはsrc属性をリセットするだけなので、ビデオが最初に戻ることに注意してください。

var $theSource = $theArticleDiv.find('.views-field-field-video-1 iframe').attr('src');

$theArticleDiv.find('.views-field-field-video-1 iframe').attr('src', $theSource); //reset the video so it stops playing

$ theArticleDivは現在の動画のコンテナです。ページに複数の動画があり、実行時にDrupalビューを介して公開されているため、IDがどのようになるかわかりません。そこで、muyクリックイベントを現在表示されている要素にバインドし、その親を見つけて、それが$ theArticleDivであると判断しました。

（ '.views-field-field-video-1 iframe'）は、現在の動画のiframe、特に現在表示されているiframeを見つけます。そのiframeにはsrc属性があります。私はそれを拾って、それを既にあったものにリセットし、ビデオは自動的に停止し、最初に戻ります。ユーザーが一時停止して再開したい場合は、もちろんビデオを閉じずにそれを行うことができます-しかし、率直に言って、ビデオを閉じた場合、最初にリセットされたという事実で生きることができると感じています。

HTH

2
Sam Moore

さて、これを行うにはもっと簡単な方法があります。 YouTubeビデオの埋め込みリンクを取得したら、少し下にスクロールすると、iFrame埋め込み、古い埋め込みを使用、関連するビデオなどのオプションが表示されます。そこで、[古い埋め込みリンクを使用]を選択します。これにより問題が解決します。

2
santo101

実際には swfobject google library でjavascriptが必要で、youtubeビデオの埋め込みを正しくビルドするだけです。

これは一例です

<script type="text/javascript" src="swfobject.js"></script>    
<div style="width: 425; height: 356px;">
  <div id="ytapiplayer">
    You need Flash player 8+ and JavaScript enabled to view this video.
  </div>      
  <script type="text/javascript">
    var params = { allowScriptAccess: "always" };
    var atts = { id: "myytplayer" };
    swfobject.embedSWF("http://www.youtube.com/v/y5whWXxGHUA?enablejsapi=1&playerapiid=ytplayer&version=3",
    "ytapiplayer", "425", "356", "8", null, null, params, atts);
  </script>
</div>

その後、この関数を呼び出すことができます。

ytplayer = document.getElementById("myytplayer");
ytplayer.playVideo();
ytplayer.pauseVideo();
ytplayer.stopVideo();
1
vhtellez

IE9 | IE8 | IE7を含むすべての最新ブラウザーで動作するようになりました。次のコードは、jQuery UIダイアログモーダルでYouTubeビデオを開き、ダイアログを開くと0:00からビデオを自動再生し、ダイアログを閉じるとビデオを停止します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>    

<script type="text/javascript">

    google.load("swfobject", "2.1");

    function _run() {
        /* YouTube player embed for modal dialog */
        // The video to load.
        var videoID = "INSERT YOUR YOUTUBE VIDEO ID HERE"
        // Lets Flash from another domain call JavaScript
        var params = { allowScriptAccess: "always" };
        // The element id of the Flash embed
        var atts = { id: "ytPlayer" };
        // All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
        swfobject.embedSWF("http://www.youtube.com/v/" + videoID + "?version=3&enablejsapi=1&playerapiid=player1&autoplay=1",
                       "videoDiv", "879", "520", "9", null, null, params, atts);
    }
    google.setOnLoadCallback(_run);

    $(function () {
        $("#big-video").dialog({
            autoOpen: false,
            close: function (event, ui) {
                ytPlayer.stopVideo() // stops video/audio on dialog close
            },
            modal: true,
            open: function (event, ui) {
                ytPlayer.seekTo(0) // resets playback to beginning of video and then plays video
            }
        });

        $("#big-video-opener").click(function () {
            $("#big-video").dialog("open");
            return false;
        });

    });
</script>

<div id="big-video" title="Video">
    <div id="videoDiv">Loading...</div>
</div>

<a id="big-video-opener" class="button" href="#">Watch the short video</a>
1
dexterca

時々playerID.stopVideo（）を使用している場合;動作しません、ここにトリックがあります、

 function stopVideo() {
           playerID.seekTo(0);
    playerID.stopVideo();
}
0
Dheeraj Vijay