來自youtube的JPlayer視頻

Question

我想在JPlayer上播放來自YouTube的視頻，但我不知道該怎麼做。

感謝您的回答。

Answer 1

抱歉，但你必須從Youtube下載視頻並把它放在了Jplayer是，並將其配置

Answer 2

你所要做的，其中視頻文件的鏈接從YouTube的服務器和他們發現了一個腳本添加此鏈接到播放此視頻的Jplayer

Answer 3

Here公報example.-

Here有一個JPlayer YouTube播放器。看看代碼。希望這個幫助.-

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