JPlayer video from youtube

Question

JPlayer에서 YouTube의 비디오를 재생하고 싶지만 어떻게해야할지 모르겠다.

답장을 보내 주셔서 감사합니다.

Answer 1

미안하지만 당신은 유튜브에서 비디오를 다운로드하고 Jplayer이 어디 넣어, 당신은 비디오 파일의 링크가 유튜브 서버와 그들에게서 발견되는 스크립트를해야 ​​할

Answer 2

을 구성해야 JPlayer YouTube 플레이어가 년대 Jplayer

Answer 3

Here 공식 주제 예야

Here이 비디오를 재생하려면이 링크를 추가합니다. 코드를 살펴보십시오. 이 도움이 되었으면합니다 .-

Answer 4

내 자신의 통합을 작성해야하므로 그 중 하나에 대한 답을 찾을 수 없습니다.

누군가가 나중에 필요할 경우를 대비하여 여기에 working demo 및 better explanation이 있습니다.

지금처럼 사용

/* Load your playlist like this: ... */ 
[ 
    { 
     title:"Finding Nemo Teaser", 
     m4v: "http://www.jplayer.org/video/m4v/Finding_Nemo_Teaser.m4v", 
    }, 

    /* YOUTUBE PART */ 
    { 
     type: "youtube", 
     title: "Finding Dory Trailer", 
     m4v:"https://www.youtube.com/watch?v=cfLob5IYMp8", 
    } 
] 

그리고

/* Put this somewhere ... */ 

$(function() { 
    /* Youtube Integration Setup */ 
    var setupYoutube = function(whereDivTo, width, height) { 
     $("<div>").attr("id", "ytplayer").appendTo(whereDivTo); 

     onYouTubeIframeAPIReady = function() { 
      youtubeApi = new YT.Player("ytplayer", { 
       width: width, 
       height: height, 
       videoId: "cfLob5IYMp8", 
       playerVars: { 
        "autoplay": 1, 
        "color": "white", 
        "modestbranding": 1, 
        "rel": 0, 
        "showinfo": 0, 
        "theme": "light" 
       }, 
       events: { 
        "onReady": function() { 
         $(document).trigger("ready.Youtube"); 
        }, 
        "onStateChange": "youtubeStateChange" 
       } 
      }); 
     } 

     $.getScript("//www.youtube.com/player_api"); 
    }, 
    loadYoutubeListeners = function(player, jplayer, id) { 
     var container = $(player.options.cssSelector.gui, player.options.cssSelectorAncestor); 

     youtubeStateChange = function(ytEvent) { 
      switch(ytEvent.data) { 
       case -1: 
        $(ytEvent.target.getIframe()).show(); 
        $(jplayer).find('video').hide(); 
        container.css({ 'opacity' : 0, 'z-index': -1, 'position' : 'relative' }); 
        container.find('.jp-interface').slideUp("slow"); 
       break; 

       case YT.PlayerState.ENDED: 
        $(jplayer).trigger($.jPlayer.event.ended); 
       break; 

       case YT.PlayerState.CUED: 
        $(jplayer).find('video').show(); 
        $(ytEvent.target.getIframe()).hide(); 
        container.css({ 'opacity' : 1, 'z-index': 0 }); 
        container.find('.jp-interface').slideDown("slow"); 

      } 
     }; 

     youtubeApi.loadVideoById(id); 
    } 

    $(document).on($.jPlayer.event.setmedia, function(jpEvent) { 
     var player = jpEvent.jPlayer, 
      url = player.status.src; 

     if(!player.html.video.available) return; 
     if(typeof player.status.media.type === "undefined" || player.status.media.type != 'youtube') { 
      if(window['youtubeApi']) 
       if(youtubeApi.getPlayerState() != YT.PlayerState.CUED && youtubeApi.getPlayerState() != YT.PlayerState.ENDED) 
        return youtubeApi.stopVideo(); 

      return; 
     } 

     var youtubeId = url.match(/(?:https?:\/{2})?(?:w{3}\.)?youtu(?:be)?\.(?:com|be)(?:\/watch\?v=|\/)([^\s&]+)/)[1] 

     if(window['youtubeApi']) 
      loadYoutubeListeners(player, jpEvent.target, youtubeId); 
     else { 
      setupYoutube(jpEvent.target, player.status.width, player.status.height); 

      $(document).on("ready.Youtube", function() { 
       loadYoutubeListeners(player, jpEvent.target, youtubeId); 
      }); 
     } 
    }); 
});