복붙노트

[JQUERY] jQuery로 유튜브 비디오를 중지?

JQUERY

jQuery로 유튜브 비디오를 중지?

해결법

  1. 1.은 API 문서에서 :

    은 API 문서에서 :

    player.stopVideo()

    jQuery를 너무 :

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

  2. 2.이 솔루션은 우아하고, 간단하고 모든 브라우저에서 작동합니다 :

    이 솔루션은 우아하고, 간단하고 모든 브라우저에서 작동합니다 :

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

  3. 3.1.include

    1.include

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

    당신의 유튜브은 iframe을 2.add.

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

    3.magic 시간.

          <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>

  4. 4.비디오를 시작하려면

    비디오를 시작하려면

    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);

    당신은과 "& 자동 재생 = 1"을 대체 할 수 있습니다 "? 자동 재생 = 1"추가 매개 변수가없는 넣다

    FF & 크롬에 비 메오와 유튜브 모두를위한 작품

  5. 5.나는 전에이 문제를 했어 내가 왔어요 결론은 IE에서 비디오를 막을 수있는 유일한 방법은 DOM에서 제거하는 것입니다.

    나는 전에이 문제를 했어 내가 왔어요 결론은 IE에서 비디오를 막을 수있는 유일한 방법은 DOM에서 제거하는 것입니다.

  6. 6.저도 같은 문제에 직면했다. 난 그냥 같은 URL에 ""= 임베드 SRC를 다시 한 짓을 대안의 많은 후.

    저도 같은 문제에 직면했다. 난 그냥 같은 URL에 ""= 임베드 SRC를 다시 한 짓을 대안의 많은 후.

    코드 스 니펫 :

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

    나는 그것을 숨길 때 나는 경기에서 적어도 정류장에서 해당 동영상에 수 있었다. :-)

  7. 7.현대 YouTube에 작동하는이 내 솔루션은 다음과 같은 형식은 포함.

    현대 YouTube에 작동하는이 내 솔루션은 다음과 같은 형식은 포함.

    비디오가 재생되는 iframe을 가정하면 자바 스크립트의 간단한 비트는 일을 할 것, ID = "# 비디오"를 가지고있다.

    $(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'));

});

    나는 유튜브 API의 사용을 포함이 문제에 제안 된 솔루션을 본 적이 있지만 귀하의 사이트가 HTTPS 사이트가 아니거나 경우 비디오가 YouTube에서 권장하는 현대적인 형식을 사용하여 내장되어, 또는 당신이없는 쿠키 옵션 세트가있는 경우, 다음 해당 솔루션은 작업을하지 않고 대신 비디오의 효과 "죽은 채널 TV 세트"를 얻는다.

    나는 내 손을 누워 수있는 모든 브라우저에서 위의 테스트를했는데 그것은 매우 안정적으로 작동합니다.

  8. 8.당신이있는 iframe 자동 재생 속성이 경우는 다시로드에 도움을 못해 됨 src SRC에 ATTR / 소품 자동 재생 = 0으로 자동 재생 = 1을 교체해야하므로

    당신이있는 iframe 자동 재생 속성이 경우는 다시로드에 도움을 못해 됨 src SRC에 ATTR / 소품 자동 재생 = 0으로 자동 재생 = 1을 교체해야하므로

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

  stopVideo($('#video'));

  9. 9.불행하게도, object 태그의 id 속성이 할 경우이 아닌 존재, 재생 / 정지 / pauseVideo는 () IE에서 작동하지 않습니다.

    불행하게도, object 태그의 id 속성이 할 경우이 아닌 존재, 재생 / 정지 / 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>

    시도 해봐!

  10. 10.음,이 일을 훨씬 더 쉬운 방법이있다. 당신이 약간 아래로 삽입 YouTube 동영상에 대한 링크, 스크롤을 잡고 때 당신은 몇 가지 옵션이 표시됩니다 : iFrame을 삽입, 사용 이전 형식의 임베드, 관련 동영상 등 가, 사용을 이전 소스 링크를 선택합니다. 이 문제를 해결합니다.

    음,이 일을 훨씬 더 쉬운 방법이있다. 당신이 약간 아래로 삽입 YouTube 동영상에 대한 링크, 스크롤을 잡고 때 당신은 몇 가지 옵션이 표시됩니다 : iFrame을 삽입, 사용 이전 형식의 임베드, 관련 동영상 등 가, 사용을 이전 소스 링크를 선택합니다. 이 문제를 해결합니다.

  11. 11.이것은 모두 유튜브와 비 메오 플레이어에서 나를 위해 작동합니다. 기본적으로 내가 너무 비디오가 처음으로 되돌아 갈 것입니다 점에 유의, src 속성을 재설정하고 있습니다.

    이것은 모두 유튜브와 비 메오 플레이어에서 나를 위해 작동합니다. 기본적으로 내가 너무 비디오가 처음으로 되돌아 갈 것입니다 점에 유의, 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 내 현재 비디오의 컨테이너 - 나는 페이지에 여러 동영상이 있기 때문에, 그들이 런타임에 드루팔보기를 통해 노출되고있어, 나는 그들의 식별자가 될 것 무엇 아무 생각이 없습니다. 나는 현재 표시 요소에 이벤트를 클릭 루이 구속했습니다 그래서, 그 부모를 발견하고는 $ theArticleDiv입니다 결정했다.

    ( '.views 필드 필드 비디오-1은 iframe')가 나를 위해 현재 비디오의 iframe을 발견 - 지금 눈에 보이는 권리의 하나의 특정있다. iframe이는 src 속성이 있는지 확인합니다. 난 그냥 그 위로를 선택하고 우측 후면에 이미 무엇을 재설정하고 자동적으로 비디오를 중지하고 다시 시작 돌아갑니다. 내 사용자가 일시 중지하고 다시 시작하려는 경우, 그들은 물론, 비디오를 닫지 않고 그것을 할 수 있습니다 -하지만 그들은 가까운 영상을한다면 솔직히, 나는 그들이 사실을 살 수 있다고 생각 시작에 그것의 재설정이.

    HTH

  12. 12.그것은 나에게이 밖으로을 조사해내는 주위 정찰의 비트를했다,하지만 난이 크로스 브라우저 구현에 정착했습니다 :

    그것은 나에게이 밖으로을 조사해내는 주위 정찰의 비트를했다,하지만 난이 크로스 브라우저 구현에 정착했습니다 :

    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 값을 제거합니다.

  13. 13.IE8 | | IE7 나는이 IE9 포함한 모든 현대적인 브라우저에서 작동되었다. 다음 코드는 jQuery를 UI 대화 모달에서 YouTube 동영상을 열고 대화 가까이에 대화 개방에 0시에서 비디오 및 정지 영상을 자동 재생됩니다.

    IE8 | | IE7 나는이 IE9 포함한 모든 현대적인 브라우저에서 작동되었다. 다음 코드는 jQuery를 UI 대화 모달에서 YouTube 동영상을 열고 대화 가까이에 대화 개방에 0시에서 비디오 및 정지 영상을 자동 재생됩니다.

    <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>

  14. 14.사실 당신은 자바 스크립트를 필요 swfobject 구글 라이브러리를 올바르게 YouTube 동영상의 퍼가기를 구축

    사실 당신은 자바 스크립트를 필요 swfobject 구글 라이브러리를 올바르게 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();

  15. 15.당신은) (때로는 플레이어 ID.stopVideo를 사용하는 경우, 여기에 작동 트릭하지 않으며,

    당신은) (때로는 플레이어 ID.stopVideo를 사용하는 경우, 여기에 작동 트릭하지 않으며,

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

  16. 16.이것은 나를 위해 작동

    이것은 나를 위해 작동

    stopIframeVideo = () => { 보자은 iframe은 $를 = ( '. 영상은 iframe') iframe.each ((인덱스) => { iframe이 [인덱스] .contentWindow.postMessage ( "{"이벤트 ":"커맨드 ","FUNC "" '+'stopVideo '+' ","인수 '' '}', '*'); }) }; $ ( '. 가까운'). ((클릭) => { stopIframeVideo () });

  17. 17.사람들을 위해 누가 자바 스크립트 솔루션을 찾고 있습니다

    사람들을 위해 누가 자바 스크립트 솔루션을 찾고 있습니다

    let iframeDiv = document.getElementById('demoVideo');
                        let video = iframeDiv.src;
                        iframeDiv.src = "";
                        iframeDiv.src = video;

    그것은 완벽하게 iframe 태그에 = 'demoVideo'나를 위해 단지 넣어 ID를 근무하고 당신은 갈 수 있습니다 :)

  18. 18.그런 간단한.

    그런 간단한.

    가까운 팝의 기능에 다음 줄을 포함한다.

    $('#youriframeid').remove();

    19. from https://stackoverflow.com/questions/2128535/stop-a-youtube-video-with-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 터치 장치 .click 함수 문서화  (0) 2020.10.24
[JQUERY] jQuery를 선택에서 "컨텍스트"는 무엇입니까?  (1) 2020.10.24
[JQUERY] 자동 스케일링 입력 [TYPE = 텍스트] 값 폭을 위해?  (0) 2020.10.24
[JQUERY] 캔의 jQuery .keypress () 더 동시에 하나의 키보다 감지?  (0) 2020.10.24
[JQUERY] 내가 jQuery를 개체에서 선택을받을 수있는 방법  (0) 2020.10.24
,

티스토리툴바